iOS 微信聊天消息的圖片氣泡實現

歡迎你們關注個人公衆號，我會按期分享一些我在項目中遇到問題的解決辦法和一些iOS實用的技巧，現階段主要是整理出一些基礎的知識記錄下來

文章也會同步更新到個人博客：
ppsheep.com

在IM應用當中，咱們的聊天頁面再熟悉不過了，在聊天頁面中每條消息都有一個背景氣泡，可是在微信中呢，圖片的背景氣泡卻沒有，而是圖片自己成爲了一個氣泡的樣式，咱們來看看微信的樣式是怎麼樣的，今天就來實現這樣一種樣式：

其實實現起來仍是很簡單的，說一下思路：

我準備用CAShapeLayer來實現，具體的作法就是：

• 準備一張這種氣泡效果的背景圖，而後將這個氣泡圖作成一個layer實例，而且經過contentCenter或者contentRect拉伸至咱們須要展現的UIImageView大小
• 將作好的layer實例賦給UIImageView
• 再將imageview賦上圖片就好了

廢話少說 咱們上代碼

準備一張這種圖片

而後 神奇的事情來了 幾行代碼搞定

CGRect frame = CGRectMake(100, 100, 100, 150);

UIImageView *image = [[UIImageView alloc] initWithFrame:frame];

CAShapeLayer *layer = [CAShapeLayer layer];

layer.frame = image.bounds;
layer.contents = (id)[UIImage imageNamed:@"chat_box_blue"].CGImage;
layer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1);
layer.contentsScale = [UIScreen mainScreen].scale;

image.layer.mask = layer;
image.layer.frame = image.frame;
image.image = [UIImage imageNamed:@"image"];
[self.view addSubview:image];複製代碼

看一下效果