IOS irregular ImageView and iosimageview

IOS irregular ImageView and iosimageview

During iOS development, we often need to implement irregular profile pictures, such:

So how to implement it?

Generally, images are rectangular. If you want to implement irregular portraits on the client side, you need to implement them on your own.

1. Use the layer to implement, see the http://blog.csdn.net/johnzhjfly/article/details/39993345

2. How to Implement CAShapeLayer and CALayer

Let's take a look at how to use CAShapeLayer to implement it,

Defines a ShapedImageView that inherits from UIView. The Code is as follows:

#import "ShapedImageView.h"@interface ShapedImageView(){    CALayer      *_contentLayer;    CAShapeLayer *_maskLayer;}@end@implementation ShapedImageView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self setup];    }    return self;}- (void)setup{    _maskLayer = [CAShapeLayer layer];    _maskLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath;    _maskLayer.fillColor = [UIColor blackColor].CGColor;    _maskLayer.strokeColor = [UIColor redColor].CGColor;    _maskLayer.frame = self.bounds;    _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1);    _maskLayer.contentsScale = [UIScreen mainScreen].scale;        _contentLayer = [CALayer layer];    _contentLayer.mask = _maskLayer;    _contentLayer.frame = self.bounds;    [self.layer addSublayer:_contentLayer];    }- (void)setImage:(UIImage *)image{    _contentLayer.contents = (id)image.CGImage;}@end

Declared CAShapedLayer for maskLayer. CAShapedLayer has a path attribute. Set the mask of the content Layer to maskLayer to get the desired shape.

We can use the CAMutablePath to construct any path. The above code has been thought of as follows:

If you change the code

_ MaskLayer = [CAShapeLayer layer]; _ maskLayer. path = [UIBezierPath bezierPathWithRoundedRect: self. bounds cornerRadius: 20]. CGPath; _ maskLayer. fillColor = [UIColor blackColor]. CGColor; _ maskLayer. strokeColor = [UIColor redColor]. CGColor; _ maskLayer. frame = self. bounds; _ maskLayer. contentsCenter = CGRectMake (0.5, 0.5, 0.1, 0.1); _ maskLayer. contentsScale = [UIScreen mainScreen]. scale; // very critical. Set the auto-stretching effect without deformation. _ contentLayer = [CALayer layer]; _ contentLayer. mask = _ maskLayer; _ contentLayer. frame = self. bounds; [self. layer addSublayer: _ contentLayer];

Effect:

If you change the code:

CGMutablePathRef path = CGPathCreateMutable (); CGPoint origin = self. bounds. origin; CGFloat radius = CGRectGetWidth (self. bounds)/2; CGPathMoveToPoint (path, NULL, origin. x, origin. y + 2 * radius); CGPathMoveToPoint (path, NULL, origin. x, origin. y + radius); CGPathAddArcToPoint (path, NULL, origin. x, origin. y, origin. x + radius, origin. y, radius); CGPathAddArcToPoint (path, NULL, origin. x + 2 * radius, origin. y, origin. x + 2 * radius, origin. y + radius, radius); CGPathAddArcToPoint (path, NULL, origin. x + 2 * radius, origin. y + 2 * radius, origin. x + radius, origin. y + 2 * radius, radius); CGPathAddLineToPoint (path, NULL, origin. x, origin. y + 2 * radius); _ maskLayer = [CAShapeLayer layer]; _ maskLayer. path = path; _ maskLayer. fillColor = [UIColor blackColor]. CGColor; _ maskLayer. strokeColor = [UIColor clearColor]. CGColor; _ maskLayer. frame = self. bounds; _ maskLayer. contentsCenter = CGRectMake (0.5, 0.5, 0.1, 0.1); _ maskLayer. contentsScale = [UIScreen mainScreen]. scale; // very critical. Set the auto-stretching effect without deformation. _ contentLayer = [CALayer layer]; _ contentLayer. mask = _ maskLayer; _ contentLayer. frame = self. bounds; [self. layer addSublayer: _ contentLayer];

The result will be:

In theory, we can construct the desired shape, but some shapes cannot be correctly constructed if you are not familiar with geometric knowledge.

From the code, we can see that we can set the display content by setting the contents attribute of CALayer.

Can maskLayer be set by setting contents of CAShapedLayer? The answer is yes. The Code is as follows:

_ MaskLayer = [CAShapeLayer layer]; _ maskLayer. fillColor = [UIColor blackColor]. CGColor; _ maskLayer. strokeColor = [UIColor clearColor]. CGColor; _ maskLayer. frame = self. bounds; _ maskLayer. contentsCenter = CGRectMake (0.5, 0.5, 0.1, 0.1); _ maskLayer. contentsScale = [UIScreen mainScreen]. scale; // very critical to set the auto-stretch effect without deformation _ maskLayer. contents = (id) [UIImage imageNamed: @ "gray_bubble_right@2x.png"]. CGImage; _ contentLayer = [CALayer layer]; _ contentLayer. mask = _ maskLayer; _ contentLayer. frame = self. bounds; [self. layer addSublayer: _ contentLayer];

Gray_bubble_right is the desired shape. The running effect is as follows:

Source code: https://github.com/heavensword/ShapedImageView