iOS Swift 仿微信聊天圖片顯示

效果圖

如圖所示，圖片左側有個小箭頭

原理

其實原理比較簡單，準備一張圖片MaskImgae，先對其進行拉伸，而後按照其輪廓對圖片進行裁剪就好了

步驟

這裏摘重點說，佈局什麼的按本身意願去弄吧。我固定了圖片的顯示大小爲 102 * 152

一、對MaskImgae進行拉伸

// 設置拉伸範圍
let stretchInsets = UIEdgeInsetsMake(30, 28, 23, 28)
// 待拉伸的圖片
let stretchImage = UIImage(named: "SenderImageNodeMask")
// 進行拉伸
let bubbleMaskImage = stretchImage.resizableImage(withCapInsets: stretchInsets, resizingMode: .stretch)
複製代碼

拉伸的效果如圖

二、對imageView設置裁剪區域

這裏個人 imageView 叫 chatImgView 上面的拉伸效果圖是臨時把拉伸好的圖片賦值給了chatImgView，只是爲了給你們看到效果而已，各位看官若是有賦值請記得改回來~~

好，下面進行裁剪

// 新建一個圖層
let layer = CALayer()
// 設置圖層顯示的內容爲拉伸過的MaskImgae
layer.contents = bubbleMaskImage.cgImage
// 設置拉伸範圍(注意：這裏contentsCenter的CGRect是比例（不是絕對座標）)
layer.contentsCenter = self.CGRectCenterRectForResizableImage(bubbleMaskImage)
// 設置圖層大小與chatImgView相同
layer.frame = CGRect(x: 0, y: 0, width: 102, height: 152)
// 設置比例
layer.contentsScale = UIScreen.main.scale
// 設置不透明度
layer.opacity = 1
// 設置裁剪範圍
self.chatImgView.layer.mask = layer
// 設置裁剪掉超出的區域
self.chatImgView.layer.masksToBounds = true
複製代碼

func CGRectCenterRectForResizableImage(_ image: UIImage) -> CGRect {
    // LXFLog("\(image.capInsets)")
    // 這裏的image.capInsets就是UIEdgeInsetsMake(30, 28, 23, 28)
    return CGRect(
        x: image.capInsets.left / image.size.width,
        y: image.capInsets.top / image.size.height,
        width: (image.size.width - image.capInsets.right - image.capInsets.left) / image.size.width,
        height: (image.size.height - image.capInsets.bottom - image.capInsets.top) / image.size.height
    )
}
複製代碼

這樣就完成了

解釋一下下

UIEdgeInsetsMake

MaskImgae 的大小爲 56 * 50

// UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)
UIEdgeInsetsMake(30, 28, 23, 28)
複製代碼

紅色範圍就是要拉伸的範圍(隨手一扣，不太準確，意思意思下就行了~~)

contentsCenter

這是對某個區域進行全面拉伸，若是不設置的話默認值爲

CGRect(x: 0, y: 0, width: 1, height: 1)
複製代碼

就是直接進行縮放 那咱們先來看看，若是不對contentsCenter這個值進行設置會是什麼效果

咱們來看下官方解釋

var contentsCenter: CGRect { get set }
Description	
The rectangle that defines how the layer contents are scaled
if the layer’s contents are resized. Animatable.
複製代碼

翻譯：若是圖層的內容是從新設置了尺寸的，那定義的這個矩形(contentsCenter)是爲了告訴圖層，圖層的內容是如何被縮放的

那明瞭，咱們的圖片是被拉伸後再繪製到layer上的，爲了正確顯示咱們的圖片，咱們得告訴layer它是怎麼被進行拉伸的。是的，就是下面代碼所指定的範圍

UIEdgeInsetsMake(30, 28, 23, 28)
複製代碼

可是，正如上面提到過的，contentsCenter所要賦值的CGRect是比例，不是絕對座標，因此如今咱們得經過(30, 28, 23, 28)獲取比例值，轉換方法已經在上面給出了，就是CGRectCenterRectForResizableImage 咱們來打印下 image.capInsets的內容

LXFLog("\(image.capInsets)")
LXFLog("\(image.capInsets.top)")
LXFLog("\(image.capInsets.bottom)")
LXFLog("\(image.capInsets.left)")
LXFLog("\(image.capInsets.right)")
複製代碼

打印結果

UIEdgeInsets(top: 30.0, left: 28.0, bottom: 23.0, right: 28.0)
30.0
23.0
28.0
28.0
複製代碼

好，如今結合 下面的圖 與 CGRectCenterRectForResizableImage 方法中的代碼就很明確比例是怎麼取到的了

附上相關項目：Swift 3.0 高仿微信