Xcode slicing 圖片拉伸方式

這篇文章不錯(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下的widthheight分別代表可重復(fù)部分的寬和高,只有上下左右同時(shí)裁剪的時(shí)候才會(huì)有窘游。在只有水平方向時(shí)唠椭,只有width;在只有垂直方向時(shí)忍饰,只有height贪嫂。
(ps:直接配置上述各種數(shù)值和手動(dòng)拖線的功能是一樣的。)
接下來直接拿一張聊天背景框的圖片操刀練手一下艾蓝。背景框圖片帶四個(gè)圓角撩荣,首先這四個(gè)圓角是不能被重復(fù)的,由于是純色背景圖饶深,那么可重復(fù)和被舍棄部分就有好幾種方案餐曹。如下圖,提供其中一種slicing方案敌厘,1~8都是不可重復(fù)的台猴。模擬器上跑起來,不管imageView的高度如何俱两,圖片都不會(huì)變形或模糊饱狂。
image

鏈接:http://www.reibang.com/p/8f9fac61bb95

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市宪彩,隨后出現(xiàn)的幾起案子休讳,更是在濱河造成了極大的恐慌,老刑警劉巖尿孔,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俊柔,死亡現(xiàn)場離奇詭異,居然都是意外死亡活合,警方通過查閱死者的電腦和手機(jī)雏婶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來白指,“玉大人留晚,你說我怎么就攤上這事「娉埃” “怎么了错维?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長橄唬。 經(jīng)常有香客問我赋焕,道長,這世上最難降的妖魔是什么轧坎? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任宏邮,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蜜氨。我一直安慰自己械筛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布飒炎。 她就那樣靜靜地躺著埋哟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪郎汪。 梳的紋絲不亂的頭發(fā)上赤赊,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音煞赢,去河邊找鬼抛计。 笑死,一個(gè)胖子當(dāng)著我的面吹牛照筑,可吹牛的內(nèi)容都是我干的吹截。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼凝危,長吁一口氣:“原來是場噩夢啊……” “哼波俄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蛾默,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬榮一對情侶失蹤懦铺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后支鸡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冬念,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年苍匆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刘急。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棚菊。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡浸踩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出统求,到底是詐尸還是另有隱情检碗,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布码邻,位于F島的核電站折剃,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏像屋。R本人自食惡果不足惜怕犁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧奏甫,春花似錦戈轿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至挠进,卻和暖如春色乾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背领突。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來泰國打工暖璧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人君旦。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓漆撞,卻偏偏與公主長得像,于是被迫代替她去往敵國和親于宙。 傳聞我的和親對象是個(gè)殘疾皇子浮驳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344