iOS 客户端开发中,经常碰到圆角视图的需求,本文简单总结一下 UIView 及其子类的一些切圆角方法,并且保证避免出现离屏渲染。
- UIView * view = [[UIView alloc] init];
- view.backgroundColor = [UIColor blackColor];
- view.layer.cornerRadius = 3.f;
- // 以下两行,任写一行
- view.layer.masksToBounds = NO;
- view.clipToBounds = NO;
- // 以下两行,千万不要加!
- view.layer.masksToBounds = YES;
- view.clipToBounds = YES;
注意点:UIView 只要设置图层的 cornerRadius 属性即可(不明白的话,可以看看官方文档里对 cornerRadius 的描述),如果设置
,会造成不必要的离屏渲染。
- layer.masksToBounds = YES
UITextField 有两种实现方法
- // 天然支持设置圆角边框
- UITextField * textField = [[UITextField alloc] init];
- textField.borderStyle = UITextBorderStyleRoundedRect;
- // 与 UIView 类似
- UITextField * textField = [[UITextField alloc] init];
- textField.layer.cornerRadius = cornerRadius;
- // 与 UIView 类似
- UITextView * textView = [[UITextView alloc] init];
- textView.layer.cornerRadius = cornerRadius;
- UILabel * label = [[UILabel alloc] init];
- // 重点在此!!设置视图的图层背景色,千万不要直接设置 label.backgroundColor
- label.layer.backgroundColor = [UIColor grayColor].CGColor;
- label.layer.cornerRadius = cornerRadius;
说明:UIButton 的背景图片,如果是复杂的图片,可以依靠 UI 切图来实现。如果是简单的纯色背景图片,可以利用代码绘制带圆角的图片。
- UIButton * button = [UIButton buttonWithType: UIButtonTypeCustom];
- // 设置 UIButton 的背景图片。
- [button setBackgroundImage: image forState: UIControlStateNormal];
背景图片绘制方法
- + (UIImage * ) pureColorImageWithSize: (CGSize) size color: (UIColor * ) color cornRadius: (CGFloat) cornRadius {
- UIView * view = [[UIView alloc] initWithFrame: CGRectMake(0.0f, 0.0f, size.width, size.height)];
- view.backgroundColor = color;
- view.layer.cornerRadius = cornerRadius;
- // 下面方法,第一个参数表示区域大小。第二个参数表示是否是非透明的。如果需要显示半透明效果,需要传NO,否则传YES。第三个参数是屏幕密度
- UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, [UIScreen mainScreen].scale); [view.layer renderInContext: UIGraphicsGetCurrentContext()];
- UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
- UIGraphicsEndImageContext();
- return image;
- }
UIImageView 有三种方式实现圆角:
- - (UIImageView * ) roundedRectImageViewWithCornerRadius: (CGFloat) cornerRadius {
- UIBezierPath * bezierPath = [UIBezierPath bezierPathWithRoundedRect: self.bounds cornerRadius: cornerRadius];
- CAShapeLayer * layer = [CAShapeLayer layer];
- layer.path = bezierPath.CGPath;
- self.layer.mask = layer;
- return self;
- }
- UIImageView * imageView = [[UIImageView alloc] init];
- imageView.layer.cornerRadius = 5.f;
- imageView.layer.masksToBounds = YES;
以上是开发过程常用组件的切圆角方法总结,如果有更好的方法或者文中有不对的地方,还请指正提出,谢谢。
来源: https://juejin.im/post/5a310d6d6fb9a045132ab22b