圆角

作者: kingandyoga | 来源:发表于2016-05-24 17:08 被阅读60次

圆角

在很多地方,圆角是一种常用的视图效果。它会让你整个页面显得更佳优美柔和。这里结合日常运用,总结一下设置圆角的各种方法以及他们的优缺点。

方法一

xxx.layer.cornerRadius
这种方法是最好用的办法啦,如果可以用这种方法来解决问题,我们就不用做任何优化。

UIView.layer.cornerRadius = 5;
UIButton.layer.cornerRadius = 5;

不过这种方法对部分控件并不可行:

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.

就是说那些内部还有子视图的控件就不行了,比如说UILabel,UIImageView等


方法二

在上面提到方法一对某些视图不可行,但是我们依旧可以再加上一句

xxx.layer.maskToBounds = true

但是这个方法会在运行App的时候造成离屏渲染,但是我们在比较少的控件使用的时候,还是可以使用这个方法,毕竟牺牲的性能不是很多。

这时候我们也可以加上:

xxx.layer.shouldRasterize = YES

这个命令会让视图渲染的内容被缓存下来,下一次绘制的时候直接显示缓存。


方法三

UIBezierPath:

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.imageVIew.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
// byRoundingCorners 有多个属性,可以选择不同的角度变成圆角
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.imageVIew.bounds;
maskLayer.path = maskPath.CGPath;
self.imageVIew.layer.mask = maskLayer;
    

这个方法的效率最高,但是比较麻烦。


方法四

重写 drawRect 方法


方法五

提前画好有圆角的背景照片,作为背景照片即可。

以上就是本人常用的设置圆角的办法

相关文章

  • Flutter 部分圆角

    top 圆角 bottom 圆角 左边 圆角 右边 圆角

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • iOS开发-性能篇(持续更新中...)

    高效圆角 注意避免使用maskToBounds UIView的圆角 UILabel的圆角

  • iOS 绘制圆角

    级别: ★☆☆☆☆标签:「iOS切圆角」「layer圆角」「CAShapeLayer圆角」作者: Xs·H审校: ...

  • 圆角和边框

    圆角 圆角代码实现: 圆角User Defined Runtime Attributes实现: layer.cor...

  • 圆角矩形

    圆角钜形 上半边圆角钜形 下半边圆角钜形

  • Android设置上圆角和下圆角

    Android设置上圆角和下圆角 圆角背景多用于卡片等布局 1.正常的圆角 代码如下: 2.上圆角 代码如下: 3...

  • Flutter-Border

    边框(Border) 单侧边框 全部边框 圆角(borderRadius) 全部圆角 单侧圆角 阴影(BoxSha...

  • CSS边框圆角--跟着李南江学编程

    1.什么是边框圆角? 就是把矩形边框变成圆角边框,就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...

  • 圆角阴影

    全圆角阴影 部分圆角阴影 swift 版

网友评论

      本文标题:圆角

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