iOS 實現使用.9圖片

很多時候非常羨慕安卓可以使用.9圖片,不管怎么拉伸都不會變形,作為傲嬌的iOS攻城獅的我堅信這種事在我大iOS里應該也是可以的,所以,找資料。最終通過不懈努力,找到了答案,終于實現了,在我大iOS中可以像安卓那樣使用.9圖片的方法了

官方文檔api

@interface UIImage(UIImageDeprecated)

// use resizableImageWithCapInsets: and capInsets.

  • (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight __TVOS_PROHIBITED;
    @property(nonatomic,readonly) NSInteger leftCapWidth __TVOS_PROHIBITED; // default is 0. if non-zero, horiz. stretchable. right cap is calculated as width - leftCapWidth - 1
    @property(nonatomic,readonly) NSInteger topCapHeight __TVOS_PROHIBITED; // default is 0. if non-zero, vert. stretchable. bottom cap is calculated as height - topCapWidth - 1

@end

  • 代碼效果
UIImage *img = [UIImage imageNamed:@"icon_zb_comment_bg"];
img = [img stretchableImageWithLeftCapWidth:25 topCapHeight:15];
    
UIImageView *ivBG = [[UIImageView alloc]initWithFrame:CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width - 20, 80)];
ivBG.image = img;
[self.view addSubview:ivBG];
  • 上面代碼里重點的一句
    img = [img stretchableImageWithLeftCapWidth:25 topCapHeight:15];

補充

2019.11.11 加班實在太困了,敲不了代碼,整理下文章吧。
這次補充的內容可以說是太牛逼了,相信有一部分人是不知道Xcode自帶的這個功能,括弧知道的朋友就別在心里默默的嘲諷我這個后知的人了哈,別裝逼括弧完liao(三聲)網上說,這個功能是Xcode5就開始支持的了,奈何我呢?當時沒涉及到這方面的工作,也沒瞎貓碰到死耗子,所以才會有現在這些話了。
好了,廢話不多說,接下來看圖說話……

  • 1、先上三張圖,注意圖片名字


    UI給我原圖.png
不拉伸效果圖.png
拉伸后效果圖.png

哎(尖銳的拔高四聲)~對吧!看出來效果了吧,同一張圖片,png格式的。那么怎么做的呢?一種是上面的代碼方式,另一種就是接下來要介紹的方式了。

  • 2、首先,把UI給你的圖拉進你的項目中,起一個拉風的名字,比如:abcdefg@2x.png。放到如下的位置:Assets.xcassets,正常情況下是顯示成這個樣子的
    1.png

看到右下角那個Show Slicing了嗎?鼠標移過去,點它就對了,然后出現下面的頁面

2.png

繼續移動鼠標,點中間那個Start Slicing的按鈕,然后又出現下面的頁面

3.png

在出現的這三個圖標,我們可以自由選擇,從左往右分別簡單介紹下每個圖標代表的含義:1、左右拉伸;2、上下左右拉伸;3、上下拉伸。簡單吧?沒錯,就是這么簡單的含義。同樣的,點開Xcode右邊的工具欄,滑到最底部,如下兩張圖:


4.png
5.png

看到Slicing這一欄了吧,在這里也可以設置拉伸方式,也可以取消拉伸,鼠標點擊Slices對應的選項框,彈出如下樣式,從上到下分別簡單介紹下每個選項代表的含義:1、取消拉伸;2、左右拉伸;3、上下拉伸;4、上下左右拉伸。

6.png

好,選好了你想要的拉伸方式之后,在下面的四個輸入框中(Left、Right、Top、Bottom)中,你可以隨意設置你的拉伸起點,按照你的需求填寫數字就可以。
最后看到Center這一欄了吧,其實這個位置的設置我個人覺得作用都差不多,鼠標點擊Center對應的選項框,彈出如下樣式,從上到下分別簡單介紹下每個選項代表的含義:1、拉伸;2、平鋪。

7.png

然后下面對應的兩個輸入框(Width、Height),你所填寫的數字可以決定拉伸或平鋪的區域大小,一般我都是設置1*1的大小。設置好了之后,回頭運行下項目,看下效果,嗯,跟自己預期的樣式不太一樣,那怎么辦呢?修改設置的值唄,一遍遍試,試到可以了為止,哈哈哈哈,別動手別動手,有話好好說唄,那我就真的是這樣做的好吧。

到這里,對這篇文章的補充就結束了,希望對有需要的朋友能有幫助!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容