iOS 不規則的ImageView – iPhone手機開發技術文章 iPhone軟體開發教學課程

我們在做iOS開發的時候，往往需要實現不規則形狀的頭像，如：

那如何去實現？

通常圖片都是矩形的，如果想在客戶端去實現不規則的頭像，需要自己去實現。

1.使用layer去實現, 見https://blog.csdn.net/johnzhjfly/article/details/39993345vcD4KPHA+PC9wPgo8cD4yLsq508NDQVNoYXBlTGF5ZXIsIENBTGF5ZXLI57rOyKXKtc/WPC9wPgo8cD7O0sPHwLS/tL+0yOe6zsq508NDQVNoYXBlTGF5ZXLIpcq1z9YsPC9wPgo8cD62qNLl0ru49lNoYXBlZEltYWdlVmlld6OsvMyz0NPaVUlWaWV3o6wgtPrC68jnz8KjujwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ==”brush:java;”>#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
聲明瞭用於maskLayer個CAShapedLayer， CAShapedLayer有個path的屬性，將內容Layer的mask設置為maskLayer, 就可以獲取到我們想要的形狀。

path我們可以使用CAMutablePath任意的構造，上述的代碼運行想過如下：

如果將代碼改成

    _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;                 //非常關鍵設置自動拉伸的效果且不變形
    
    _contentLayer = [CALayer layer];
    _contentLayer.mask = _maskLayer;
    _contentLayer.frame = self.bounds;
    [self.layer addSublayer:_contentLayer];

的效果:

如果將代碼改成:

    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;                 //非常關鍵設置自動拉伸的效果且不變形
    
    _contentLayer = [CALayer layer];
    _contentLayer.mask = _maskLayer;
    _contentLayer.frame = self.bounds;
    [self.layer addSublayer:_contentLayer];

將是這個效果:

理論上我們可以構造出任意想要的形狀，但是有些形狀如果你不熟悉幾何知識的話是構造不出正確的

path的，從代碼上我們可以看到我們可以通過設置CALayer的contents屬性來設置顯示的內容，那我啤”/kf/web/php/” target=”_blank” class=”keylink”>PHPC9wPgo8cD7Kx7K7yse/ydLUzai5/cno1sNDQVNoYXBlZExheWVytcRjb250ZW50c8C0yejWw21hc2tMYXllcsTYo7+08LC4yse/z7aotcSjrLT6wuvI58/Co7o8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0=”brush:java;”> _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; //非常關鍵設置自動拉伸的效果且不變形
_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就是你想要的形狀，運行效果如下:

源代碼:https://github.com/heavensword/ShapedImageView