如何高效的为控件实现圆角

注意:因为在项目中会用到各种奇形怪状的控件,有时候设计切图也比较费劲,那就自己动手吧正好了解一下高效切割圆角的方法,Let`s do it

通常我们经常会习惯性的直接在控件的Layer层进行设置,这样设置一个控件也许没有多大的性能影响,但是如果控件多的话估计就不行了。

self.button.layer.cornerRadius = 20;
self.button.layer.masksToBounds = YES;

下面就介绍两种比较常见的设置圆角的方法

第一种方法:使用Quartz2D直接绘制图片
- (UIImage*)cropImageWithRect:(CGRect)cropRect 
{
    CGRect drawRect = CGRectMake(-cropRect.origin.x , -cropRect.origin.y, self.size.width * self.scale, self.size.height * self.scale);
    UIGraphicsBeginImageContext(cropRect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, CGRectMake(0, 0, cropRect.size.width, cropRect.size.height));
    [self drawInRect:drawRect];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
第二种方法:使用贝塞尔曲线(UIBezierPath)
self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    self.button.frame = CGRectMake(10, 200, self.view.frame.size.width - 20, 40);
    self.button.backgroundColor = [UIColor brownColor];
    [self.view addSubview:self.button];
    
    /* 贝塞尔曲线切割 */
    /**
     *  @param UIRectCorner
     *  左上 UIRectCornerTopLeft     = 1 << 0,
     左下 UIRectCornerBottomLeft  = 1 << 2,
     右下 UIRectCornerBottomRight = 1 << 3,
     所有角 UIRectCornerAllCorners  = ~0UL
     */
    
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.button.bounds byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:self.button.bounds.size];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    [self.button setTitle:@"type: UIRectCornerTopRight | UIRectCornerBottomRight" forState:UIControlStateNormal];
    self.button.titleLabel.font = [UIFont systemFontOfSize:14];
    //设置大小
    maskLayer.frame = self.button.bounds;
    //设置图形样子
    maskLayer.path = maskPath.CGPath;
    self.button.layer.mask = maskLayer;
  • 下面是实现各种圆角的效果
    屏幕快照 2018-06-15 10.23.55.png
屏幕快照 2018-06-15 10.24.34.png
屏幕快照 2018-06-15 10.26.08.png
屏幕快照 2018-06-15 10.30.26.png
屏幕快照 2018-06-15 10.31.50.png
屏幕快照 2018-06-15 10.32.21.png
屏幕快照 2018-06-15 10.33.08.png
屏幕快照 2018-06-15 10.35.52.png

下次需要啥效果直接看看就知道了,因为平常实在是遇到的不多,多以记录一下,如果你觉得有用,留下您的脚印!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,037评论 3 119
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,797评论 8 265
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • 我用消逝代替了那个词。 第一次深刻面对消逝,是初中时,养了六年的猫病了。我和弟弟围着它哭泣,看着它无能为力。至今记...
    立哥行阅读 3,226评论 2 6
  • 新人,刚来到
    雨落古彭阅读 1,300评论 0 0