iOS常用组件之高效切圆角的方法汇总

前言

圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受。但很多人并不清楚如何设置圆角的正确方式和原理。

iOS 客户端开发中,经常碰到圆角视图的需求,本文简单总结一下 UIView 及其子类的一些切圆角方法,并且保证避免出现离屏渲染。下面话不多说了,来一起看看详细的介绍吧。

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有两种实现方法

// 天然支持设置圆角边框
UITextField *textField = [[UITextField alloc] init];
textField.borderStyle = UITextBorderStyleRoundedRect;
// 与 UIView 类似
UITextField *textField = [[UITextField alloc] init];
textField.layer.cornerRadius = cornerRadius;

UITextView

// 与 UIView 类似
UITextView *textView = [[UITextView alloc] init];
textView.layer.cornerRadius = cornerRadius;

UILabel

UILabel *label = [[UILabel alloc] init];
// 重点在此!!设置视图的图层背景色,千万不要直接设置 label.backgroundColor
label.layer.backgroundColor = [UIColor grayColor].CGColor;
label.layer.cornerRadius = cornerRadius;

其它

UIButton

说明: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 有四种方式实现圆角:

截取图片方式(性能较好,基本不掉帧)

@implementation UIImage (extend)
- (UIImage *)drawRectWithRoundedCorner
{
 CGRect rect = CGRectMake(0.f, 0.f, 150.f, 150.f);
 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:rect.size.width * 0.5];
 UIGraphicsBeginImageContextWithOptions(rect.size, false, [UIScreen mainScreen].scale);
 CGContextAddPath(UIGraphicsGetCurrentContext(), bezierPath.CGPath);
 CGContextClip(UIGraphicsGetCurrentContext());
 [self drawInRect:rect];
 CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
 UIImage *output = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 return output;
}
@end

贝塞尔曲线切割圆角(不推荐,掉帧严重)

- (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 上添加一个四个角有内容,其它部分是透明的视图,只对 UIImageView 圆角部分进行遮挡。但要保证被遮挡的部分背景色要与周围背景相同,避免穿帮。所以当 UIImageView 处于一个复杂的背景时,是不适合使用这个方法的。

最不推荐做法(当一个页面只有少量圆角图片时才推荐使用)

UIImageView *imageView = [[UIImageView alloc] init];
imageView.layer.cornerRadius = 5.f;
imageView.layer.masksToBounds = YES;

参考资料:

Core Animation 教程

总结

以上是开发过程常用组件的切圆角方法总结,如果有更好的方法或者文中有不对的地方,还请指正提出,谢谢。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

  • ios 贝塞尔曲线切割圆角的方法
  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法
  • IOS设置按钮为圆角的示例代码
  • iOS设置圆角的三种方式
  • iOS设置可选择圆角方向的控件圆角
  • iOS中设置圆角的几种方法示例
(0)

相关推荐

  • iOS设置可选择圆角方向的控件圆角

    前言 这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧. 示例代码 一.通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f;//如果设置圆角角度为半圆,则数值为控件高度的一半 self.view.layer.masksToBounds = YES;//是否删除多余的位置 二.通过贝塞尔曲线来设置圆角 UIBezierPath *maskPath = [UIB

  • ios 贝塞尔曲线切割圆角的方法

    ios 系统框架已经给我们提供了相应的切割圆角的方法, 但是如果在一个见面有很多控件切割的话会出现卡顿和个别不切得现在 /* 创建一个Button */ UIButton * button = [UIButton buttonWithType:(UIButtonTypeSystem)]; [button setFrame:CGRectMake(100, 100, 100, 100)]; [self addSubview:button]; /* 正厂的圆角需求处理方法 */ button.laye

  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法

    UIView加边框及边框颜色 引用库: 复制代码 代码如下: #import <QuartzCore/QuartzCore.h> 使用: 复制代码 代码如下: //添加边框和提示         CGRect frameRect = CGRectMake(20, 90, self.window.frame.size.width-40, self.window.frame.size.height-180);         UIView   *frameView = [[UIView alloc

  • IOS设置按钮为圆角的示例代码

    iOS中很多时候都需要用到指定风格的圆角按钮,以下是UIButton提供的创建圆角按钮方法 设置按钮的4个角: 左上:UIRectCornerTopLeft 左下:UIRectCornerBottomLeft 右上:UIRectCornerTopRight 右下:UIRectCornerBottomRight 示例代码: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 60, 80, 40)]; button.b

  • iOS设置圆角的三种方式

    第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; //只需要设置layer层的两个属性 //设置圆角 imageView.layer.cornerRadius = imageView.frame.size.width / 2; //将多余的部分切掉 imageView

  • iOS中设置圆角的几种方法示例

    前言 圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点讨论的话题.我查阅了一些现有的资料,收获良多的同时也发现了一些误导人错误. 1. 使用layer属性 layer.backgroundColor = [UIColor cyanColor].CGColor; // 给图层添加背景色 layer.contents = (id)[UIImage i

  • iOS常用组件之高效切圆角的方法汇总

    前言 圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理. iOS 客户端开发中,经常碰到圆角视图的需求,本文简单总结一下 UIView 及其子类的一些切圆角方法,并且保证避免出现离屏渲染.下面话不多说了,来一起看看详细的介绍吧. UIView(不包括其子类) UIView *view = [[UIView alloc] init]; view.backgroundColor = [UIColor blac

  • Winform控件优化Paint事件实现圆角组件及提取绘制圆角的方法

    目录 前言 Paint事件中实现圆角控件 提取绘制圆角矩形和旁边小尖角的代码为扩展方法 介绍 扩展方法 测试尖角的显示位置 重绘控件后文本的处理 同时重绘文本 通过添加Label控件实现对文本的处理[有尖角时需要额外处理] Paint事件中绘制圆角的优点 窗体失去焦点时按钮外观边框问题 Paint事件中绘制控件的问题[不要使用(事件)参数e.ClipRectangle] 前言 Windows 11下所有控件已经默认采用圆角,其效果更好.相对有着更好的优化,只是这是默认的行为,无法进一步自定义.

  • 浅析常用数据库的自增字段创建方法汇总

    DB2 复制代码 代码如下: CREATE   TABLE  T1(   id  INTEGER   NOT   NULL  GENERATED ALWAYS  AS   IDENTITY  (START  WITH   1  INCREMENT  BY   1  MINVALUE  1  NO MAXVALUE NO CYCLE NO CACHE  ORDER ),   ...); Oracle(需要创建一个SEQUENCE和一个TRIGGER): 复制代码 代码如下: CREATE TABL

  • React-Native中一些常用组件的用法详解(二)

    前言 本文为大家介绍一下React-Native中一些深入些的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的语法. ScrollView组件 能够调用移动平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的"响应者"系统. 注意一定要给scrollview一个高度,或者是他父级的高度. 常用方法 onScrollBeginDrag:开始拖拽的时候; onScrollEndDrag:结束拖拽的时候; onMomentumScrollBegin:开始

  • Android切圆角的几种常见方式总结

    Android 中有哪些可以切圆角的实现方式呢? 本文总结一下常用的方式. 以下内容分为以下几部分: 利用 Drawable 的 shape xml 实现 CardView 实现圆角 fresco 中的 SimpleDraweeView 实现圆角 利用 View 的 ViewOutlineProvider 实现圆角 总结 1. 利用 Drawable 的 shape xml 实现 很多时候,我们可以自定义一些 drawable , 代码如下: <?xml version="1.0"

  • IOS设置UIView的边框为圆角详解及实例

    IOS设置UIView的边框为圆角 iOS 系统自带的 View 组件都是正方形的,看起来都太生硬,有时候我需要变成圆角形式,如下图: 具体的实现是使用QuartzCore库,下面我具体的描述一下实现过程: •    首先创建一个项目,名字叫:ipad_webwiew     •    利用Interface Builder添加一个UIWebView,然后和相应的代码相关联     •    添加QuartzCore.framework 代码实现: 头文件: #import <UIKit/UIK

  • Bootstrap常用组件学习(整理)

    一.Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板

  • jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易

  • JQuery EasyUI的一些常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

随机推荐