Welcome to follow my official account. I will regularly share some solutions to the problems I encounter in the project and some practical skills of iOS. At the present stage, I will mainly sort out some basic knowledge and record it

The post will also be synchronized to my blog: ppsheep.com

Among IM application, familiar with our chat page, each message in the chat page has a background of bubble, but, in the WeChat picture background without bubbles, but the style of the picture itself has become a bubble, let’s take a look at how WeChat style, today to realize such a style:

In fact, it is still very simple to achieve, say something about the idea:

I’m going to use CAShapeLayer to implement this. The specific approach is as follows:

  • Prepare a background image of the bubble effect, then make the bubble image into a Layer instance and stretch it to the UIImageView size we want to display via contentCenter or contentRect
  • Assign the finished Layer instance to the UIImageView
  • And I’m just going to attach the image to the ImageView

Cut the crap and let’s go to the code

Prepare one of these pictures

And then the magic happens with a few lines of code

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];Copy the code

Let’s see what happens