一 前言

在項(xiàng)目開發(fā)中，在UI切圖不全的情況下，我們可以通過放大縮小圖片某個(gè)區(qū)域適配各種機(jī)型防止背景圖片變形。iOS可以通過UIImage的方法resizableImageWithCapInsets切片設(shè)置圖片的可拉伸區(qū)域，也可以通過slicing（基于OS7以上的 并且用Media.xcassets管理圖片）可視化的制定圖片的可擴(kuò)展和不可變區(qū)域 。類似于Android中的點(diǎn)9圖片。當(dāng)然，你不怕麻煩可以在圖層上畫出來各種情況下的背景。

二.Androd中的點(diǎn)9圖

點(diǎn)9圖示一種可伸縮的位圖，如果你某個(gè)View用了點(diǎn)9圖做background，Android會(huì)根據(jù)點(diǎn)9圖的設(shè)置來自動(dòng)為你調(diào)整、適應(yīng)內(nèi)容。點(diǎn)9圖是標(biāo)準(zhǔn)的PNG格式圖像，被一圈1像素寬的邊緣包圍，并且保存的時(shí)候擴(kuò)展名一定要是“.9.png”，還要保在“res/drawable/”目錄。（最外圍的一圈像素必須要么是純黑色，要么是透明，一點(diǎn)點(diǎn)的半透明的像素都不可以有，比如說99%的黑色或者是1%的投影都不可以有）

Paste_Image.png

三.iOS中的切片縮放

iOS的圖片Slicing，同等于Android中的點(diǎn)9圖片。iOS可以通過UIImage的方法resizableImageWithCapInsets切片設(shè)置圖片的可拉伸區(qū)域，也可以通過slicing（基于OS7以上的 并且用Media.xcassets管理圖片）可視化的制定圖片的可擴(kuò)展和不可變區(qū)域

代碼實(shí)現(xiàn)：

   UIImage *image = [UIImage imageNamed:@"004"];
   CGFloat top = 10; 
   CGFloat left = 10; 
   CGFloat bottom = 10; 
   CGFloat right = 10; 
   /// 頂端、左端、底部、右端分別預(yù)留距離
   UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
   //注意：拉伸之后一定要賦值回去 
  image = [image  resizableImageWithCapInsets:insets 
   resizingMode:UIImageResizingModeStretch]; 
   //UIImageResizingModeStretch：`拉伸`模式，通過`拉伸`Insets指定的矩形區(qū)域來填充圖片 
   //UIImageResizingModeTile：`平鋪`模式，通過`重復(fù)顯示`Insets指定的矩形區(qū)域來填充圖片

通過 Xcode Slicing： (xcode的slicing功能是UIImage的- resizableImageWithCapInsets:resizingMode:可視化操作)

打開項(xiàng)目中Images.xcassets文件，找到你想操作的圖片，點(diǎn)擊XCode右下方

Paste_Image.png

此時(shí)圖片上會(huì)展示出 Start Slicing 按鈕，點(diǎn)擊按鈕，根據(jù)需求選擇水平、垂直、水平與垂直不通Slicing方式

Paste_Image.png

此時(shí)圖片水平和垂直分別出現(xiàn)三條線，可以理解成，中間的兩條線可以先不用管，默認(rèn)讓它分別貼著下邊線和右邊線，另外的四條線交叉中間那個(gè)矩形區(qū)域就是用來拉伸或者平鋪的，只有四個(gè)角上的內(nèi)容不會(huì)變（實(shí)際意義上：以垂直方向?yàn)槔虚g到左面那條線是圖片填充像素，中間條到右面是隱藏填充區(qū)域。矩形左邊那塊是用來重復(fù)的，右邊那塊是用來覆蓋的，但有的時(shí)候不起作用，原因不詳）

Paste_Image.png