注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

隐龙 为了一生的信念

今日默默沉于水,他日飞腾在九天...

 
 
 

日志

 
 

界面贴图技术与九宫格助手  

2012-08-16 19:24:09|  分类: 界面开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在 HTMLayout 中,background-position(以及foreground-position) 有一个特殊的可选值:expand。这种特殊的背景模式给 UI 设计带来了极大的便利。

窗体背景图

用过皮肤控件的可能比较清楚,皮肤引擎是怎样将一张很小的图片绘制到控件上的,就像上面这张尺寸很小的图片,实际上可以作为窗体的背景,可以无限被拉伸而不会感到别扭。

说到图片拉伸,很多人脑海中会浮现出一个词——失真。没错,一张小图片要拉伸成大图片,就意味着要凭空创造出一些数据来填充那些新增加的空间,这些数据完全是凭空捏造的,拉伸出来怎么能不模糊?

于是,聪明的 UI 引擎设计者们发明了“九宫格”这玩意,即将一张图片分为九个区域:左上、上、右上、左、中、右、左下、下、右下。其中,四个角(左上、右上、左下、右下)不拉伸,按照原始尺寸直接绘制,其余部分使用平铺或者拉伸的方式绘制。如下图所示(图片链自快手官方论坛):
九宫格
九宫格实例

具体怎样实现这种技术,可以参看快手官方论坛中“编程”贡献的文档,非常详细,这里就不再多说:
http://www.aau.cn/thread-7262-1-1.html

值得一提的是,九宫格的尺寸需要大家自行测量,比较麻烦。因此我花了些时间编写了一个软件,可以自行生成九宫格代码,就取名为“HTMLayout 九宫格助手吧”。

先打开一张图片
先打开一张图片。

如果图片太小,可以放大
如果图片太小,可以放大。

直接用鼠标拖拽的方式调节设置九宫格,右下角预览区域可直接预览效果
直接用鼠标拖拽的方式调节设置九宫格,右下角预览区域可直接预览效果。

在右侧选择需要拉伸的部分,同样可以实时预览
在右侧选择需要拉伸的部分,同样可以实时预览。

点击“复制”按钮复制代码
最后,可以点击“复制”按钮,复制最终代码。

友情提示:预览区域会随窗口大小的改变而改变,可以调整窗口大小来查看效果。

HTMLayout 九宫格助手下载:HTMLayout 九宫格助手

  评论这张
 
阅读(623)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018