這篇文章不錯(cuò):
Xcode slicing
這里主要講下Slicing里三條線條的意義和作用
首先,先分解出水平拉伸效果的來看势就,這里選擇的拉伸效果為Tiles也就是瓷磚式復(fù)制圖像元素填充模式泉瞻。
image
其中三條線的作用如下
image
也就是當(dāng)圖片拉伸時(shí),用區(qū)域A的圖片元素去不斷復(fù)制填充區(qū)域B的空間苞冯,區(qū)域B是被白遮罩層蓋的袖牙,這區(qū)域的圖片部分是不可見的,是用于區(qū)域A填充的空間舅锄。
線1和線2的區(qū)間為區(qū)域A
線2和線3之間的白遮罩區(qū)間為區(qū)域B
豎向拉伸效果的判斷同理
這部分摘自:
http://www.reibang.com/p/1bcffdda9bbd
下邊這個(gè)文章講的挺清楚
Image Slicing
功能是在WWDC 2013中Xcode 5 中新增的鞭达,類似于安卓里面的Create 9-Patch file
。現(xiàn)在用的最多的場景就是聊天功能中皇忿,聊天內(nèi)容的背景框圖片可以隨文字多少自動(dòng)變換高度畴蹭。
代碼等同于:- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
接下來,我們用一張顏色鮮明的圖來看看Slicing到底是如何作用的禁添。進(jìn)入Assets
撮胧,選中圖片桨踪,點(diǎn)擊右下角的Show Slicing
老翘,在圖片上出現(xiàn)三個(gè)可操作按鈕。如下圖锻离。
image
先看水平方向铺峭。點(diǎn)擊之后如下圖,圖片上出現(xiàn)三根線汽纠,Inspector
面板中也有Slicing
對應(yīng)的設(shè)置卫键。
image
-
左邊線表示左邊的區(qū)域不能被重復(fù)
-
右邊線表示右邊的區(qū)域不能被重復(fù)
-
中間線和左邊線之間的區(qū)域被重復(fù)
-
中間線和右邊線之間的區(qū)域舍棄掉(舍棄的部分會(huì)有白色蒙板)
image
同理,從垂直方向上看也一樣虱朵。左邊和右邊分別對應(yīng)上邊和下邊莉炉。如果同時(shí)有水平和垂直方向,那么重復(fù)區(qū)域取交集碴犬,不能被重復(fù)部分選并集絮宁,舍棄掉的部分視覺上可直接看到。
-
slices
是 拉伸的方向服协,其中有四個(gè)選項(xiàng)绍昂。不同選項(xiàng)下方對應(yīng)的insert
也不一樣。 -
center
是 重復(fù)部分的填充方式-
Tiles
:平鋪 -
Stretches
:拉伸
-
-
center
下的width
和height
分別代表可重復(fù)部分的寬和高,只有上下左右同時(shí)裁剪的時(shí)候才會(huì)有窘游。在只有水平方向時(shí)唠椭,只有width
;在只有垂直方向時(shí)忍饰,只有height
贪嫂。
(ps:直接配置上述各種數(shù)值和手動(dòng)拖線的功能是一樣的。)
接下來直接拿一張聊天背景框的圖片操刀練手一下艾蓝。背景框圖片帶四個(gè)圓角撩荣,首先這四個(gè)圓角是不能被重復(fù)的,由于是純色背景圖饶深,那么可重復(fù)和被舍棄部分就有好幾種方案餐曹。如下圖,提供其中一種slicing
方案敌厘,1~8都是不可重復(fù)的台猴。模擬器上跑起來,不管imageView
的高度如何俱两,圖片都不會(huì)變形或模糊饱狂。
image