------------------------------------------------什么是九宫格------------------------------------------------

9宫格是一种我们给它的称呼而已。在主题制作中，它代表一种图片处理的方式。将图片画分9个区域，每个区域都有其参数，根据制作者对参数不同的设置可以使图片排列出不同的效果。通俗的说，9宫格嘛，就是给图片设置参数用的呗~

在ss中，9宫格会有不同颜色表示，如图↓↓↓：

红色部分代表顶部/top
蓝色部分代表底部/bottom
绿色部分代表左侧/left
黄色部分代表右侧/right

现在让我们去掉分割线和数字看一看九宫格在实际运用中的效果：

是不是开始很像我们平时处理图片时候的样子了？对比一下~

现在刺刺要告诉你，在9宫格中，标有数字“5”的区域最最关键。他是9宫格的中心，也可以看成是目标位。区域2，4，6，8是用来调整图片的，区域1，3，7，9在处理圆角图片时会用到。下面我们就仔细来看一下，不同的九宫格设置对图片的影响。

--------------------九宫格与“拉伸”，“平铺”的关系--------------------

在实际运用中，我们的图片大小是固定不变的，但是我们每个人使用习惯不尽相同。有时候，用户习惯使用大一些尺寸的界面，但
是原图尺寸不够该怎么办呢？这时候就可以通过拉伸或者平铺的方式，告诉主题或界面制作软件要用什么形式填补原图不够尺寸的部分。这样即使我们使用很小尺寸
的图片，在给用户使用中却可以拉到很大，同时又不改变图片原貌。这就是九宫格最大的作用啦~

1.拉伸

1.1 无渐变的拉伸

无渐变，单色的位图在主题制作过程中是最简单的一种位图。如果没有白边，甚至可以不用设置9宫格。因为这种位图不论平铺还是拉伸都是一样的。加上没有圆角，没有图案，也没有阴影，所以对于这种位图我们可以设置9宫格也可以不设置。

原图，无参数：

原图，1像素参数，纵向拉伸：

原图，1像素参数，横向拉伸：

我们发现，对于这类位图，不管怎么拉伸，它的区域5除了形状之外，其余都不会改变。不会因为拉伸而改变形状，也不会因为拉伸而改变颜色。不会因为拉伸或平铺而改变位图的原貌，这就是我们的最终目的。

补充知识：

我上面说到“1像素参数”，其实这个称呼是我自己取的。1像素代表参数值。它和像素有
关？是的，在左侧参数设置中，每增加1像素参数，代表区域5就减少了1像素。举个例子：一个位图本来是10x10像素的正方形，当我设置了参
数：top1,bottom1,left1,right1之后，图片的最上，最下，最左，最右1像素的内容将会保持不变，剩余9x9像素根据实际情况拉伸
或平铺，对，也就是区域5根据实际情况拉伸或平铺，这也就是为什么我把区域5叫做“目标位”的原因。（如果这里还不是很明白，在接下来的教程中会陆续说
明）

PS.参数可以是正的也可以是负的，别忘了哟^^

1.2 有渐变的拉伸 
原图，1像素参数，无拉伸：

1像素参数，纵向拉伸：

1像素参数，横向拉伸：

以上都是1像素参数，下面来看一下不同参数的效果：

粉色拉伸：

橘色拉伸：

发现区别了吗？同一张位图，参数设置不同，拉伸以后的效果也会不同。上面的一张图由于设置了bottom参数40像素，以至于从底部开始往上40个像素都排除在拉伸范围（也就是区域5）之外，所以拉伸的区域（也就是区域5）只包含了粉色部分。

下面的一张图由于设置了top参数40像素，以至于从顶部开始向下40个像素都排除在拉伸范围，所以拉伸的区域只包含了橘色部分。

注意：如果图片在界面实际应用中没有被拉伸到这个程度，出来的效果还是跟原图差不多的哦。我拉伸这么多是为了让大家看明白区别。

1.3 有图案的拉伸

当位图上有图案的时候，如何保证图案不随图片的拉伸而变形呢？请看如下几种处理方法：

原图，无参数，无拉伸：

无参数，纵向拉伸。此时位图中图片已经发生变形。

无参数，横向拉伸。情况与上图类似。

在制作主题的过程中，如果面对有图案的图片，没有设置好九宫格，就会面临如上图或者别的问题，最后给用户带来糟糕的体验，这是每个制作主题的童鞋都应该避免的。

下面介绍几种用于处理这种图片的9宫格参数设置方法：

方法一，将有图案的部分放置在3区域：

方法二，将有图案的部分放置在9区域：

方法三，将有图案的部分放置在6区域，但是排列方式选择“平铺”（注意左侧，我在right选项后面打了钩，表示该区域使用平铺。没有打钩的表示拉伸）

但是使用方法三所带来的一个问题是，会这样：

如果你在编辑某一个位置的位图，希望选择方法3来设置参数的话，你必须保证位图拉伸的最大高度小于第二个蝴蝶出来的高度。这样即便这个设置是有局限，但是只要它的弊端出不来，那此方法也无碍。

以上三种方法的比较：

以上三种方法都是可以达到目的。方法一和方法二其实是一种处理办法。在面对不同的条件时可以灵活运用。方法三有局限性，这点请牢记。但是这个局限性有时也是优势。如果你要做一个连续花纹的位图时，方法三就是最佳的办法。

如果没有选择平铺，图片则会：

而选择了平铺之后，图片就可以正常显示：

1.4 有渐变，有图案的位图

碰到这类位图，在保证图案显示正确的情况下尽量把区域5的范围扩大到最大。这里就不做例举了。具体情况要具体分析。记住啦~只有把区域5范围尽可能扩大才能保证渐变流畅~~

1.5 有阴影的位图

原图，无参数，无拉伸：

无参数，拉伸（没有设置参数，对于阴影图来说拉伸效果会很恐怖）

设置了参数后，拉伸效果：

诶？发现了什么？尽管图片拉伸了，但是只拉伸了区域5，其余区域都没有拉伸喔~区域2，4，6，8在这时候默认了平铺方式（虽然我们并没有在后面的平铺选项中打钩），这就是SS神奇的地方~而区域1，3，7，9没有在参数范围内，没有变化。

1.6 有圆角的位图

在这里，原图我就不上了（偷个小懒~），直接上无参数，拉伸图：

设置了参数之后，拉伸图：

这里掌握一点就行，把圆角放置在1，3，7，9区域即可。

1.7 有圆角，有阴影的位图

有圆角，有阴影的位图原理都在上述内容中阐述过了。处理这类位图原则是把阴影和圆角都放置在除区域5以外的区域内，如果有渐变，那么区域5尽量把范围尽可能扩大。

2. 平铺

这里所指的“平铺”指的是：

中的“tile middle section"之前我们一直都是用"stretch middle section"。这里的平铺是针对区域5来说的。其他区域平铺选项是在上方的复选框。（如果这里选择“stretch middle section"也是针对区域5来说的）

平铺方式，一般用在有花纹的位图中（主题或界面需要在拉伸过程中不断延续花纹图案的时候）。在制作位图的时候就要注意花纹形状是否适合相互拼接，在设置参数时也要反覆测试，不然十分容易错位。

关于平铺的例子，我在1楼的“图案拉伸”那一部分已经有举例，这里就不再重复了。只说明几点需要注意的事项。

第一，有渐变的位图大都不适合采用平铺方式。
第二，如果是用SS制作主题，开始菜单背景和任务栏背景不推荐使用平铺方式。
第三，平铺方式一定要注意边缘的衔接。
第四，不是任何图案都可以去平铺的。

3. 关于“-”参数（负参数）和其他“怪异”的参数

3.1 “怪异”参数（即，大于图片尺寸的参数）

假设一个位图高度是10px，我们如果把top设置成7，bottom也设置成7，会出现什么效果呢？（由于这个帖子不能再传附件了所以我用文字表达一下吧...）

情况一：应用界面后，该位置实际高度小于或等于10px,那么图片就会有4像素或者更多像素的重影，在中间横向位置。

情况二：应用界面后，该位置实际高度大于10px且小于14px,那么图片就会有（14px-位图应用后实际高度）个像素的重影，在中间横向位置。

情况三：应用界面后，该位置实际高度大于14px,那么图片就正常拉伸。

（宽度的情况和高度雷同，不做例举了。另外在梦梦的R4中，就有类似这样的情况发生，在开始菜单右侧，有心的童鞋可以注意一下。PS.无意冒犯，只是举例说明。）

3.2 负参数

根据我个人浅薄的经验，我只碰到过几个地方常需用到负参数。

一种，是开始菜单，左右分2种悬停按钮样式的时候。由于此位置SS默认的是2个位图表示2种状态，如果要实现左右2种按钮样式，那就是要4个位图了。于是我们就只有通过调整参数来实现这个效果。（举例案例请看我的主题pure中的开始菜单，请使用SS6.0以上打开，不然是打不开的哟~）

另一种，就是各种字体位置的设置。字体也可以设置九宫格（不单单图片可以喔~）。我们常会通过设置负的参数来让字体显示到我们想要的位置。如果你想问：“
那一个图片设置了负参数会怎样？”答曰：“参数区域的图片会消失掉...”，除非你的图片能够压缩到没有再压缩成负的大小...（那是不可能的...）

好了，就写到这。我现在能想到的暂时就这么多了。说得繁琐了一点。其实熟悉了SS以后，这些都是很简单的。我怕自己讲不清楚，所以用了很多图...如果有问题，欢迎提问。不要PM我，请回帖提问。这样便于我整理，也方便别人参考，谢谢。

原文地址：http://www.ehein.cc/tutorial/tutorial-2/