美文网首页
iOS 视图圆角那些事儿

iOS 视图圆角那些事儿

作者: Smallwolf_JS | 来源:发表于2020-03-28 18:33 被阅读0次

切圆角共有以下三种方案:

  • cornerRadius + masksToBounds:适用于单个视图或视图不在列表上且量级较小的情况,会导致离屏渲染。
  • CAShapeLayer+UIBezierPath:会导致离屏渲染,性能消耗严重,不推荐使用。
  • Core Graphics:不会导致离屏渲染,推荐使用。
1、很显然第一种就不过多介绍了,大家最熟悉的,直接设置layer的属性就可以.

但是需要注意第一种出现离屏渲染的原因是masksToBounds
下面是cornerRadius的解释

By default, the corner radius does not apply to the image in the layer’s contents 
property; it applies only to the background color and border of the layer. 
However, setting the masksToBounds property to true causes the content to be 
clipped to the rounded corners.

也就是说在默认情况下,这个属性只会影响视图的背景颜色和 border。对于 UILabel 这样内部还有子视图的控件就无能为力了

2、第二种也比较常用:

这里贴下实现的示例代码

UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建
基于矢量的路径。使用此类可以定义常见的圆形、多边形等形状 。我们使用直
线、弧(arc)来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是
下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个
UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。


CAShapeLayer: CAShapeLayer顾名思义,继承于CALayer。 每个
CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具
体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形,所以
需要frame属性。CAShapeLayer初始化时也需要指定frame值,但 它本身没有形
状,它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性,它
从CALayer继承而来的属性在绘制时是不起作用的
不需要获取上下文
//设置圆角
    UIBezierPath *path;
    path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(self.frame.size.width, self.frame.size.height)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = path.CGPath;
    self.layer.mask = maskLayer;

CAShapeLayer有着几点很重要:
1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接
2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比
3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果
3、第三种方式是通过绘图的方式进行做圆角

示例代码

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
 imageView.image = [UIImage imageNamed:@"1"];
 //开始对imageView进行画图
 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
 //使用贝塞尔曲线画出一个圆形图
 [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
 [imageView drawRect:imageView.bounds];
 imageView.image = UIGraphicsGetImageFromCurrentImageContext();
 //结束画图
 UIGraphicsEndImageContext();
 [self.view addSubview:imageView];

相关文章

  • iOS 视图圆角那些事儿

    切圆角共有以下三种方案: cornerRadius + masksToBounds:适用于单个视图或视图不在列表上...

  • iOS 高效添加圆角效果 性能优化 实战讲解

    转载自:iOS 高效添加圆角效果 性能优化 实战讲解 圆角(RounderCorner)是一种很常见的视图效果,相...

  • iOS 截图的那些事儿

    iOS 截图的那些事儿 iOS 截图的那些事儿

  • iOS Masonry布局(四) - 视图设置圆角

    视图设置任意圆角 Masonry布局视图设置圆角 若使用Masonry布局的视图设置后发现,设置的圆角不起作用。这...

  • iOS Masonry - 视图设置圆角

    视图设置任意圆角 Masonry布局视图设置圆角 若使用Masonry布局的视图设置后发现,设置的圆角不起作用。这...

  • iOS 知识收集

    性能优化 iOS 保持界面流畅的技巧 UIKit性能调优实战讲解 iOS高效设置视图圆角 使用 ASDK 性能调优...

  • iOS视图切割圆角

    iOS切圆角的方式有三种 1.通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少....

  • iOS视图部分圆角

    我们都知道iOS视图圆角 但是某些需求上可能我们只需要指定View的某几个角为圆角例如: 图中框出的橘色部分我们只...

  • 图片处理

    iOS中图片的加载、圆角、阴影实现方式多种多样,我们需着重考虑性能问题 视图阴影 圆角图片 注意:这种方法能够避免...

  • 微信小程序学习笔记(二)

    1、overflow 超出部分需要截取类似iOS makestobounds 的性质,适用场景就像父视图设置圆角以...

网友评论

      本文标题:iOS 视图圆角那些事儿

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