宫格格用法

主要用在ui皮肤制作

http://bbs.9ria.com/thread-160875-1-1.html

我们都知道矢量图放大不失真，而位图放大会失真，这个和它们在电脑底层的计算方法有关。为了放大一个矩形或者圆角矩形，我们可以用矢量图来绘制这个矩形，这没有问题，但是假如这个矩形同时要移动或者变形，势必给CPU带来较大的压力，因为矢量图的每一次变化都要CPU重新计算，假如你的作品本身耗费CPU较高的话，那么这种方式就差强人意了，为了最优地放大位图，Flash中引入了9宫格的方法，也叫9切片，本节详细讲述一下9宫格。

第一步：什么是9宫格？Flash中的9宫格实际上是由9个边长为偶数的正方形位图组成的能实现放大不失真的影片剪辑（这个定义是我自己总结的，但是个人觉得完全可以作为标准定义收入教材了。）9个切片分别为“左上，中上，右上；左中，中中，右中；左下，中下，右下”这9片，如下图所示：

第二步：9宫格放大原理9宫格放大时其实是这样的，四个角的四个切片向四个方向延伸，到达新的位置，然后上下两边的切片水平拉伸，左右两侧的切片垂直拉伸，中间的那个位图向四个方向放大铺满剩余区域。一图顶万言，大家看下图的放大过程：
 第三步：为什么放大不失真？其实纯色的位图是可以规则拉伸变形的，就像网页的切片一样，这种变形并没有改变原来的色彩效果和排列，所以视觉上并没有失真，而最容易变形的四个角落没有让它发生形变，只是移动了位置而已，因此最后视觉上造成了“不失真”的效果。
 第四步：Flash里的9宫格实现方式在flash里，9宫格是一个影片剪辑，在AS3里它是一个Sprite，（也可以是一个MovieClip，因为复杂的9切片是可以允许变色的），9宫格属性在新建影片剪辑元件时勾选了“启用9切片”选项来赋予它；而真正想不失真改变它的大小，必须利用程序来实现尺寸设置，比如一个叫mc的9切片元件，可以用下面的代码将其放大到200x100尺寸。mc.width=200;mc.height = 100;那些妄图通过按一下Q键来自由缩放大小的同学，他们的企图毕竟落空，因为这种缩放就是普通的放大变形，和我们上一步中说的原理是不一样的，因此他们最后必将看到一个让人抓狂的失真效果郁郁而终。
 第五步：做一个9切片。做9切片就必须要用到Adobe的看家软件PhotoShop了，简称PS。我们在PS里打开一个圆角矩形，我们可以看到这个矩形的效果很好，有内阴影，有渐变，有投影，是一个非常漂亮的UI交互设计；首先我们把它缩小到能显示它效果的最小大小，而且边长要是3的偶数倍，因为每个边我们要三等分，并且每一份都是偶数。
 第六步：利用辅助线和裁剪工具，我们把9个切片都切下来。一般这个过程都是由美工同学来完成的，笔者是个程序猿，做这个工作有点心里不爽，因为不够迅速和专业嘛，并且程序猿的虚荣心导致他们觉得这项工作没有技术含量，可是我并不这样觉得。出完的9片资源每片是10x10大小，出得足够小是为了实际使用时只放大不缩小，出好的资源如下图所示：
 
第七步：接下来我们需要在Flash里制作9切片。想必这一刻你们等待很久了，终于跟教程的帖子走到了一起，我也长出一口气啊。新建一个空的文档，并且保存到你电脑的某个地方，然后按下Ctrl+F8，我们新建一个影片剪辑，在新建面板上勾选“启用9切片”选项，然后单击确定，你会发现你进入了一个带有4根长度没有尽头的虚线的影片剪辑里面，没错，这就是传说中的9宫格的编辑模式。

 
第八步：将刚才出好的资源一个个拖进来，按照“左上，中上，右上；左中，中中，右中；左下，中下，右下”排列好，辅助线（那四根虚线）按照每个图片的宽度拉好位置，为了整齐好看和方便对齐，这个不是必须的但是最好对齐，像笔者这种对代码规范和元件制作规范很有洁癖的人而言，对齐是名正言顺的。
 第九步：回到我们空白的舞台，从库里拖出一个刚才的9宫格元件到舞台上，让我们用色迷迷的眼神好好观察一下她的相貌，因为它的总大小只有30x30，所显得小鸟依人了一些，我们凝视着她思考一下应该做一个什么样的效果来使用这个9宫格，发挥她的最大优势。
 第十步：我思考了一分钟，决定做一个背景随着输入文字多少变化的输入效果，也就是我给输入框一个底板，输入的内容越多这个底板就变得越大，反之删除文字，这个底板就变小，她总是仅仅依偎着文本的实际显示区域。 第十一步：接下来我们实现这个想法，首先写一个9宫格类NormalBackground，这个类包含了一个改变这个9宫格高度和宽度的公有方法，也有单独改变宽度和高度的方法。
 第十二步：新建一个文档类Main，写下如下代码，代码简单解释如下：首先创建一个标题，提示用户输入，其次创建9宫格底板，接着创建输入文本框，并且监听文本框的change事件，实时获取文本框的大小，然后改变底板的大小。
 
第十三步：下面是展示阶段，我输入文本，删除文本，底板会自动收缩变化：