iOS-視圖切圓角

許多應(yīng)用中會(huì)有視圖圓角效果, 如頭像會(huì)切成圓形樣式顯示

  • 直接設(shè)置視圖layer層屬性
//聲明
@property (nonatomic, strong) UIImageView *carImgView;

//懶加載
- (UIImageView *)carImgView
{
    if (!_carImgView) {
        _carImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 100, 80, 80)];
        _carImgView.backgroundColor = [UIColor orangeColor];
        _carImgView.image = [UIImage imageNamed:@"car"];
        _carImgView.layer.cornerRadius = 40;
        _carImgView.layer.masksToBounds = YES;
    }
    return _carImgView;
}
  • 貝塞爾曲線(xiàn)UIBezierPath和Core Graphics框架畫(huà)出一個(gè)圓角
//聲明
@property (nonatomic, strong) UIImageView *dogImgView;

//懶加載
- (UIImageView *)dogImgView
{
    if (!_dogImgView) {
        _dogImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 200, 80, 80)];
//        _dogImgView.backgroundColor = [UIColor orangeColor];
        _dogImgView.image = [UIImage imageNamed:@"dog"];
    }
    return _dogImgView;
}

//圓角
//開(kāi)始對(duì)imageView進(jìn)行畫(huà)圖
    UIGraphicsBeginImageContextWithOptions(self.dogImgView.bounds.size, NO, 40.0);
    //使用貝塞爾曲線(xiàn)畫(huà)出一個(gè)圓形
    [[UIBezierPath bezierPathWithRoundedRect:self.dogImgView.bounds cornerRadius:self.dogImgView.frame.size.width] addClip];
    [self.dogImgView drawRect:self.dogImgView.bounds];
    self.dogImgView.image = UIGraphicsGetImageFromCurrentImageContext();
    //結(jié)束畫(huà)圖
    UIGraphicsEndImageContext();

  • 使用CAShapeLayer和UIBezierPath設(shè)置圓角
//聲明
@property (nonatomic, strong) UIImageView *plantImgView;

//懶加載
- (UIImageView *)plantImgView
{
    if (!_plantImgView) {
        _plantImgView = [[UIImageView alloc] initWithFrame:CGRectMake((kScreen_Width - 80)/2.0, 300, 80, 80)];
        _plantImgView.backgroundColor = [UIColor orangeColor];
        _plantImgView.image = [UIImage imageNamed:@"plant"];
    }
    return _plantImgView;
}

//圓角
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.plantImgView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:self.plantImgView.bounds.size];
    
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
    
    //設(shè)置大小
    maskLayer.frame = self.plantImgView.bounds;
    
    //設(shè)置圖形樣子
    maskLayer.path = maskPath.CGPath;
    self.plantImgView.layer.mask = maskLayer;
  • 根據(jù)使用CAShapeLayer和UIBezierPath設(shè)置圓角 利用byRoundingCorners設(shè)置不同枚舉和cornerRadii 可以做出一些其他效果 如有些需求需要我們將視圖的部分位置切圓角其他仍保持直角
//聲明
@property (nonatomic, strong) UIImageView *girlImgView;

//懶加載
- (UIImageView *)girlImgView
{
    if (!_girlImgView) {
        _girlImgView = [[UIImageView alloc] initWithFrame:CGRectMake(5, kScreen_Height - (kScreen_Width - 10) * 281/450.0 - 5, kScreen_Width - 10, (kScreen_Width - 10) * 281/450.0)];
        _girlImgView.backgroundColor = [UIColor orangeColor];
        _girlImgView.image = [UIImage imageNamed:@"girl"];
    }
    return _girlImgView;
}

//枚舉
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
     UIRectCornerTopLeft     = 1 << 0,
     UIRectCornerTopRight    = 1 << 1,
     UIRectCornerBottomLeft  = 1 << 2,
     UIRectCornerBottomRight = 1 << 3,
     UIRectCornerAllCorners  = ~0UL
     };

//部分切圓角
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.girlImgView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc]init];
    
    //設(shè)置大小
    layer.frame = self.girlImgView.bounds;
    
    //設(shè)置圖形樣子
    layer.path = path.CGPath;
    self.girlImgView.layer.mask = layer;

最終效果:

Simulator Screen Shot 2017年7月25日 13.31.23.png

代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容