九宫格的认识以及如何运用九宫格原理

转载 2011年01月25日 12:04:00

 

转自:http://www.dzlover.net/share/tutorial-2/

 

写在前面的话:从刺刺来到极限之后,发现在互助区和童鞋们PM我的内容很多都是没有弄明白九宫格原理,所以刺刺今日有空闲来写一篇关于九宫格的教程~(其实是刺刺偷懒,不想一遍遍解释了~哇哈哈~听到咯?以后刺刺都不解释了~休怪我无情m(_ _)m)

————————————————什么是九宫格————————————————

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像素。举个例子:一个位图本来是10×10像素的正方形,当我设置了参
数:top1,bottom1,left1,right1之后,图片的最上,最下,最左,最右1像素的内容将会保持不变,剩余9×9像素根据实际情况拉伸
或平铺,对,也就是区域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我,请回帖提问。这样便于我整理,也方便别人参考,谢谢。

 

cocostudio 九宫格拉伸

参考: 九宫格 九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。 绘制时会遵循下面的规则:   a. 保持4个角部分不变形 b. 单向拉伸...
  • songtianming
  • songtianming
  • 2014年07月15日 13:54
  • 4430

unity3d UGUI九宫格纹理拉伸的使用

本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用,不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,任意缩...
  • andyhebear
  • andyhebear
  • 2016年01月07日 15:41
  • 4609

Qt使用九宫格原理缩放图片

9宫格缩放规则如下: 1、将一张图分割成9块 2、四个角(1,3,7,9)在缩放的时候是保持大小不变 3、图块2,8仅当宽度变化时缩放宽度。 4、图块4,6仅当高度变化时缩放高度。 5、图块...
  • caoshangpa
  • caoshangpa
  • 2016年11月29日 12:20
  • 1597

NGUI 九宫格纹理拉伸

我对九宫格的理解:九宫格是将一张图分为9个部分,在拉伸的时候针对这9个部分进行不同的拉伸处理。                       图1-1 九宫格 - 说明 如图1-1 所示,顶点1...
  • gongfu_li
  • gongfu_li
  • 2015年08月07日 10:04
  • 629

weex图片显示

在weex中,图片可能会不显示,用网络的就行,例如
  • renbolaoda
  • renbolaoda
  • 2017年03月23日 10:09
  • 255

使用GRID来实现九宫格菜单

1、头文件中声明用到的变量CAknGrid* iGrid;   CAknGridM* iGridM;   TInt iNumOfRows;   TInt iNumOfColumns;   TSize ...
  • stonesl
  • stonesl
  • 2008年06月23日 09:01
  • 1572

小程序开发系列(二)九宫格

小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢? 基于一个简单的思考,九宫格就是三行三列,如果把行作为一个单位,再将每一行分成三列...
  • xxdddail
  • xxdddail
  • 2017年01月16日 15:45
  • 3220

weex 可用样式,与唯一布局方式flex

Weex 布局模型基于 CSS Flexbox,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。 对于刚开始接触 weex想把它当html...
  • jayhkw
  • jayhkw
  • 2017年01月12日 17:30
  • 6249

[UnityUI]九宫格在游戏中的使用

参考链接:http://blog.csdn.net/onerain88/article/details/12587301 九宫格的主要目的是处理图片拉伸效果,我们知道图片一旦被拉伸,它就会出现形变...
  • lyh916
  • lyh916
  • 2015年03月30日 09:50
  • 3853

Qt使用九宫格原理缩放图片

9宫格缩放规则如下: 1、将一张图分割成9块 2、四个角(1,3,7,9)在缩放的时候是保持大小不变 3、图块2,8仅当宽度变化时缩放宽度。 4、图块4,6仅当高度变化时缩放高度。 5、图块...
  • caoshangpa
  • caoshangpa
  • 2016年11月29日 12:20
  • 1597
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:九宫格的认识以及如何运用九宫格原理
举报原因:
原因补充:

(最多只允许输入30个字)