美文网首页ios进阶
iOS高性能切圆角工具-适用Autolayout,frame布局

iOS高性能切圆角工具-适用Autolayout,frame布局

作者: Jamesholy | 来源:发表于2019-01-02 14:24 被阅读17次

切圆角的方式一般有两种。

第一种,使用 UIView 内嵌的 layer,直接来切圆角,方便快捷。
UIImageView *userHeaderImgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"header"]];
userHeaderImgView.layer.cornerRadius = 39;
userHeaderImgView.layer.masksToBounds = YES;

好处:方便快捷,2个属性就能搞定 UIView 的圆角切割。
坏处:切的圆角会产生混合图层,影响效率。尤其对于collectionView的cell上使用复用时,会很影响帧数

第二种,使用 CAShaperLayer 搭配 UIBezierPath 路径设置切割路径,然后把 layer 设置到 UIView 的 mask 属性上。
  UIImageView *userHeaderImgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"header"]];
  CAShapeLayer *cornerLayer = [CAShapeLayer layer];
  UIBezierPath *cornerPath = [UIBezierPath bezierPathWithRoundedRect:userHeaderImgView.bounds cornerRadius:39];
  cornerLayer.path = cornerPath.CGPath;
  cornerLayer.frame = userHeaderImgView.bounds;
  userHeaderImgView.layer.mask = cornerLayer;

好处:切割的圆角不会产生混合图层,提高效率,并且可以分别控制四个角的圆角。
坏处:代码量偏多, 该方式API都必须使用frame,所以对于使用使用约束布局的view就需要事先写死高度。不方便。


实际运用

项目中有时常用到卡片风格,首尾cell需要分别切上圆角和下圆角,cell也几乎是不定高度。所以针对第二种方式封装了适用于frame,约束布局的cell,提供了像系统切圆角的api,并且能指定切割圆角。

原理:view在layoutSubviews方法中的frame确定了,所以在该方法中进行layer的mask设置。通过runtime交换了方法,并且添加了相关的参数。

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class targetClass = [self class];
        SEL originalSelector = @selector(layoutSubviews);
        SEL swizzledSelector = @selector(sy_layoutSubviews);
        [self swizzleMethod:targetClass orgSel:originalSelector swizzSel:swizzledSelector];
    });
}
- (void)sy_layoutSubviews {
    [self sy_layoutSubviews];
    if (self.xk_openClip) {
        if (self.xk_clipType == XKCornerClipTypeNone) {
            self.layer.mask = nil;
        } else {
            UIRectCorner rectCorner = [self getRectCorner];
            if (self.maskLayer == nil) {
                self.maskLayer = [[CAShapeLayer alloc] init];
            }

            UIBezierPath *maskPath;
            maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(self.xk_radius, self.xk_radius)];
            self.maskLayer.frame = self.bounds;
            self.maskLayer.path = maskPath.CGPath;
            self.layer.mask = self.maskLayer;
        }
    }
}


以下是详细使用

XKCornerRadius

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

   self.view.backgroundColor = [UIColor whiteColor];
    _frameView = [[UILabel alloc] init];
    _frameView.backgroundColor = [UIColor redColor];
    _frameView.text = @"frame";
    _frameView.frame = CGRectMake(20, 100, 200, 100);
    
    _frameView.xk_openClip = YES;
    _frameView.xk_radius = 20;
    _frameView.xk_clipType = XKCornerClipTypeTopRight|XKCornerClipTypeBottomLeft;
    
    [self.view addSubview:_frameView];
    
    _masonryView = [[UILabel alloc] init];
    _masonryView.text = @"autoLayout";
    _masonryView.xk_openClip = YES;
    _masonryView.xk_radius = 20;
    _masonryView.backgroundColor = [UIColor orangeColor];
    _masonryView.xk_clipType = XKCornerClipTypeTopRight|XKCornerClipTypeTopLeft;
    
    [self.view addSubview:_masonryView];
    
    [_masonryView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.frameView.mas_bottom).offset(40);
        make.left.equalTo(self.frameView);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
Simulator Screen Shot - iPhone X - 2018-12-29 at 17.18.47.png

Requirements

Installation

XKCornerRadius is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'XKCornerRadius'

demo:
https://github.com/sy5075391/XKCornerRadius

相关文章

网友评论

    本文标题:iOS高性能切圆角工具-适用Autolayout,frame布局

    本文链接:https://www.haomeiwen.com/subject/hcsplqtx.html