UIButton和UIImageView的圆角用CornerRadius和BezierPath实现对比

最新推荐文章于 2023-04-11 16:19:21 发布
最新推荐文章于 2023-04-11 16:19:21 发布
阅读量529 收藏
点赞数
文章标签： swift CornerRadius BezierPath
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhx_84/article/details/97113186
版权
本文通过测试不同方法实现UIButton和UIImageView圆角的效果及性能表现，对比layer.cornerRadius与BezierPath两种方式，结果显示layer.cornerRadius方法在显示时间和代码执行时间上更优。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

UIButton和UIImageView的圆角实现方法有好几种，网上查到所有说法都不推荐使用layer.cornerRadius的方法来实现，理由是离屏渲染影响性能。想要测试一下是不是这样，写了一个ViewController里面加载4000个UIButton或UIImageView，一屏幕显示40个控件，分别用纯色和图片填充，大概记录一下从加载到完全显示出来的时间表。（苹果提供的性能检测工具用不了，可能是我Mac太老了）
工具：XCode10.1 Swift5.0 iPhone6x模拟器（手动升级Swift5.0，导致不能真机调试 (ㄒoㄒ) 流泪中…） 秒表（手动记时）

结果如下：

实现方式第一次第二次第三次第四次
–显示/执行显示/执行显示/执行显示/执行
UIButton Color CornerRadius2.23/0.292.13/0.251.98/0.252.30/0.25
UIButton Color BezierPath2.55/0.362.30/0.332.23/0.342.21/0.35
UIButton Image CornerRadius3.01/0.283.23/0.272.91/0.272.61/0.29
UIButton Image BezierPath3.35/0.363.10/0.343.06/0.362.91/0.37
UIImageView CornerRadius2.16/0.952.11/0.902.16/0.912.11/0.90
UIImageView BezierPath2.21/1.012.21/0.992.18/0.991.96/1.06

从结果上看，从加载到显示出来的耗时，两种方式基本差不多，相差是毫秒级的。很有趣的是整体上来看，无论是从显示时间，还是代码执行时间来看layer.cornerRadius的耗时明显要少于BezierPath。也许是模拟器的原因，等新Mac机器来了用真机再测试一下看看。

主要代码：入口tableView页面+6个加载测试页面（代码很简单，贴出来方便大家复制测试）

入口页面tableView相关代码

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 6;
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell : UITableViewCell = UITableViewCell.init(style: UITableViewCell.CellStyle.default, reuseIdentifier: "purchaseCell");
        cell.layer.borderWidth = 1
        cell.layer.borderColor = UIColor.white.cgColor;
        cell.layer.cornerRadius = 10
        cell.layer.masksToBounds = true
        cell.backgroundColor = UIColor.white;
        switch indexPath.row{
        case 0:
            cell.textLabel?.text = "UIButton With Color CornerRadius";
        case 1:
            cell.textLabel?.text = "UIButton With Color BezierPath";
        case 2:
            cell.textLabel?.text = "UIImageView CornerRadius";
        case 3:
            cell.textLabel?.text = "UIImageView BezierPath";
        case 4:
            cell.textLabel?.text = "UIButton With Image CornerRadius";
        case 5:
            cell.textLabel?.text = "UIButton With Image BezierPath";
        default:
            cell.textLabel?.text = "";
        }
        return cell;
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        switch indexPath.row {
        case 0:
            let vc : TestCornerRadiusViewController = TestCornerRadiusViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        case 1:
            let vc : TestBezierPathViewController = TestBezierPathViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        case 2:
            let vc : TestImageCornerRadiusViewController = TestImageCornerRadiusViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        case 3:
            let vc : TestImageBezierPathViewController = TestImageBezierPathViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        case 4:
            let vc : TestImgBtnCornerRadiusViewController = TestImgBtnCornerRadiusViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        case 5:
            let vc : TestImgBtnBezierPathViewController = TestImgBtnBezierPathViewController();
            self.navigationController?.pushViewController(vc, animated: true);
        default:
            break;
        }
    }

UIButton Color CornerRadius

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        initPageTitle(title: "UIButton Color CornerRadius");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
    
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let btn : UIButton = UIButton(type: UIButton.ButtonType.custom);
                btn_x = CGFloat(colIndex) * btn_width;
                btn.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                btn.backgroundColor = UIColor.brown;
                btn.tintColor = UIColor.white;
                btn.setTitle(String(rowIndex) + "_" + String(colIndex), for: UIControl.State.normal);
                btn.layer.cornerRadius = 10.0;
                self.view.addSubview(btn);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

UIButton Color BezierPath

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
   
        initPageTitle(title: "UIButton Color BezierPath");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
    
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let btn : UIButton = UIButton(type: UIButton.ButtonType.custom);
                btn_x = CGFloat(colIndex) * btn_width;
                btn.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                btn.backgroundColor = UIColor.lightGray;
                btn.tintColor = UIColor.white;
                btn.setTitle(String(rowIndex) + "_" + String(colIndex), for: UIControl.State.normal);
                let maskPath : UIBezierPath = UIBezierPath.init(roundedRect:btn.bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: 10.0,height: 10.0));
                let maskShapeLayer : CAShapeLayer = CAShapeLayer();
                maskShapeLayer.frame = btn.bounds;
                maskShapeLayer.path = maskPath.cgPath;
                btn.layer.mask = maskShapeLayer;
                self.view.addSubview(btn);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

UIButton Image CornerRadius

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
   
        initPageTitle(title: "UIButton Image CornerRadius");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
    
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let btn : UIButton = UIButton(type: UIButton.ButtonType.custom);
                btn_x = CGFloat(colIndex) * btn_width;
                btn.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                btn.setBackgroundImage(UIImage(named: "BtnJuxing"), for: UIControl.State.normal);
                btn.tintColor = UIColor.white;
                btn.setTitle(String(rowIndex) + "_" + String(colIndex), for: UIControl.State.normal);
                btn.layer.masksToBounds = true;
                btn.layer.cornerRadius = 25.0;
                self.view.addSubview(btn);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

UIButton Image BezierPath

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    
        initPageTitle(title: "UIButton Image BezierPath");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
    
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let btn : UIButton = UIButton(type: UIButton.ButtonType.custom);
                btn_x = CGFloat(colIndex) * btn_width;
                btn.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                btn.setBackgroundImage(UIImage(named: "BtnJuxing"), for: UIControl.State.normal);
                btn.tintColor = UIColor.white;
                btn.setTitle(String(rowIndex) + "_" + String(colIndex), for: UIControl.State.normal);
                let maskPath : UIBezierPath = UIBezierPath.init(roundedRect:btn.bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: 25.0,height: 25.0));
                let maskShapeLayer : CAShapeLayer = CAShapeLayer();
                maskShapeLayer.frame = btn.bounds;
                maskShapeLayer.path = maskPath.cgPath;
                btn.layer.mask = maskShapeLayer;
                self.view.addSubview(btn);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

UIImageView CornerRadius

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        initPageTitle(title: "UIImageView CornerRadius");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
   
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let imageView : UIImageView = UIImageView(image: UIImage(named: "BtnJuxing"))
                btn_x = CGFloat(colIndex) * btn_width;
                imageView.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                imageView.backgroundColor = UIColor.green;
                imageView.tintColor = UIColor.white;
                let memoLable : UILabel = UILabel(frame: CGRect(x:0.0,y:0.0,width: btn_width,height:btn_height));
                memoLable.textColor = UIColor.white;
                memoLable.textAlignment = NSTextAlignment.center;
                memoLable.text = String(rowIndex) + "_" + String(colIndex);
                imageView.addSubview(memoLable);
                imageView.layer.masksToBounds = true;
                imageView.layer.cornerRadius = 25.0;
                self.view.addSubview(imageView);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

UIImageView BezierPath

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
  
        initPageTitle(title: "UIImageView BezierPath");
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Test", style: UIBarButtonItem.Style.plain, target: self, action: #selector(doTest));
    }
    
    @objc func doTest() -> Void {
        let dateBegin = Date();
        let dateFormatter = DateFormatter();
        dateFormatter.dateFormat = "YYYY-MM-dd HH:mm:ss.SSS";
        var locationString = dateFormatter.string(from: dateBegin);
        print(locationString);
        
        let main_width:CGFloat = self.view.frame.size.width;
        var btn_x:CGFloat = 0.0;
        var btn_y:CGFloat = navHeight();
        let btn_width:CGFloat = main_width/4;
        let btn_height:CGFloat = 50.0;
        for rowIndex in 1...1000{
            btn_x = 0;
            btn_y += btn_height;
            for colIndex in 0...3{
                let btn : UIImageView = UIImageView(image: UIImage(named: "BtnJuxing"))
                btn_x = CGFloat(colIndex) * btn_width;
                btn.frame = CGRect(x: btn_x, y: btn_y, width: btn_width, height: btn_height);
                btn.backgroundColor = UIColor.white;
                btn.tintColor = UIColor.yellow;
                let memoLable : UILabel = UILabel(frame: CGRect(x:0.0,y:0.0,width: btn_width,height:btn_height));
                memoLable.textColor = UIColor.white;
                memoLable.text = String(rowIndex) + "_" + String(colIndex);
                memoLable.textAlignment = NSTextAlignment.center;
                btn.addSubview(memoLable);
                let maskPath : UIBezierPath = UIBezierPath.init(roundedRect:btn.bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: 25.0,height: 25.0));
                let maskShapeLayer : CAShapeLayer = CAShapeLayer();
                maskShapeLayer.frame = btn.bounds;
                maskShapeLayer.path = maskPath.cgPath;
                btn.layer.mask = maskShapeLayer;
                self.view.addSubview(btn);
            }
        }
        let dateEnd = Date();
        locationString = dateFormatter.string(from: dateEnd);
        print(locationString);
        let timeMinus = dateEnd.timeIntervalSince1970-dateBegin.timeIntervalSince1970;
        print(String(timeMinus));
    }

顺便试了一下UIView纯色填充，结果如下：

实现方式第一次第二次第三次第四次
–显示/执行显示/执行显示/执行显示/执行
UIView Color CornerRadius1.56/0.491.11/0.491.56/0.471.60/0.48
UIView Color BezierPath1.05/0.581.73/0.591.65/0.561.75/0.56

性能也差不多，如果是一个纯色背景+文字的图片，从上表来看，推荐用UIView+UILable来实现，比UIIMageView快了一倍。

jhx_84
关注
UIButton设置圆角和边框及边框颜色
weixin_34257076的博客
03-25 1481
为什么80%的码农都做不了架构师？>>> ...
使用UIBezierPath和CAShapeLayer高效为UIView添加圆角
知更鸟CoolLee的博客
02-16 5429
我们在实际开发中，经常会遇到为某个view添加圆角的需求，这样出来的view的效果是比较好看的，那么平时用的最多的实现方式是什么呢？或许你也和我一样：UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 40)]; btn.layer.cornerRadius = 5; btn.clipsToBou
iOS给UIButton设置圆角
yuxikuo_1的专栏
12-31 914
UIButton* removeBn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; removeBn.backgroundColor = [UIColor redColor]; removeBn.layer.masksToBounds = YES; removeBn.layer.cornerRadius = 8.0
UIButton 里面设置圆角方法
qq_29254653的博客
01-07 1967
UIButton 里面设置圆角方法 代码设置 self.button.layer.cornerRadius = 5; self.button.layer.masksToBounds = YES; xib设置
iOSUIButton圆角边框
恐高的菜鸟
07-15 723
调整iOS中按钮，button圆角边框，角度越大，按钮越圆 [button1.layer setMasksToBounds:YES]; [button1.layer setCornerRadius:10.0]; [imageButton.layer setMasksToBounds:YES]; [imageButton.layer setCornerRadi
iOS 使用storyboard设置UIButton 和UILabel 的圆角
四分之一工程师的博客
02-07 3359
Label设置圆角的操作和设置UIButton相比，多了一步设置。 1。设置UIBUtton圆角 2.设置Label圆角
IOS控件阴影和圆角
06-15
通过以上的知识，我们可以实现类似UILabel的控件具有圆角和阴影的效果，同时其他控件如UIButton、UIImageView等也可以使用相同的方法进行设置。在实践中，开发者需要根据具体需求灵活运用这些技巧，创建出符合设计...
iOS控件 -- UIImageView使用详解
01-26
2. 创建圆角图片：通过`layer.cornerRadius`属性可以设置UIImageView的圆角半径，但需同时设置`layer.masksToBounds`为`true`，以确保圆角效果生效。 四、UIImageView的动画 UIImageView还支持GIF动画和序列帧动画...
iOS设置可选择圆角方向的控件圆角
09-01
在iOS应用开发中，我们经常需要为控件如UIButton、UILabel或者UIImageView添加圆角效果，以提升用户界面的美观度和用户体验。这篇文章将详细介绍如何在iOS中实现可选择圆角方向的控件圆角设置。 首先，让我们了解两...
Swift开发中圆形视图及其圆角实现教程
2. 使用UIImageView：与UIButton类似，通过设置UIImageView的`cornerRadius`和`clipsToBounds`属性，可以快速实现圆形图片显示。 ```swift let imageView = UIImageView(image: UIImage(named: "profilePicture")) ...
cornerradius属性设置后边缘部分不可点击
11-09
cornerradius属性设置后边缘圆角部分部分不可点击
IOS设置UIView、UIButton等控件的边框设置为圆角
BearsG
07-11 965
//将图层的边框设置为圆脚
 View.layer.cornerRadius = 8;
 View.layer.masksToBounds = YES; //给图层添加一个有色边框
 View.layer.borderWidth = 5;
 View.layer.borderColor = [[UIColor colorWithRed:0.52 green:0.09 blue:
iOS学习之UIButton的圆角边框设计
qq_40596811的博客
08-09 1010
按钮的圆角边框的实现 首选介绍一下什么是按钮的圆角边框，下面先放一张图片 像这样，按钮就有了圆角边框，这比较符合现在的扁平化UI设计，像这种漂亮的圆角边框需要我们手动实现一下 下面先将代码展示一下，为了方便起见，这次我直接在viewDidLoad里面写 - (void)viewDidLoad { [super viewDidLoad]; // Do any additi...
iOS UIButton的基本设置与切圆角
RangingWon的博客
12-22 3821
UIButton的本设置与切圆角：UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; //设置正常显示的图片 [button setBackgroundImage:[UIImage imageNamed:@"name_normal.png"] forState:UIControlStateNormal];
UI:IOS中自定义圆角图片和按钮
01-31 1165
在做新浪新闻的个人设置页面时候遇到了用户头像是圆角的情况，所以搜了搜圆角的设置方法，就此总结起来方便以后查阅。 首先，在project中添加QuartzCore.framework. 在需要做圆角的类中，导入库的头文件#import"QuartzCore/QuartzCore.h" //定义属性imageView  /  button imageView.layer.cor
按钮的image图片是非圆角，直接对UIButton设置圆角，iOS13系统没有圆角效果的问题及解决方案
jia12216的专栏
11-28 647
按钮的image图片是非圆角，直接对UIButton设置圆角，iOS13系统没有圆角的效果的问题。iOS9和iOS14都没有这个问题。 解决方案：直接对按钮imageView设置圆角，按钮背景设置为透明。 ``` self.imageView.layer.cornerRadius = cornerRadius; self.imageView.layer.masksToBounds = YES; ```
如何高性能的给UIImageView加个圆角？（不准说layer.cornerRadius!）
qq_33223879的博客
02-07 293
利用UIBezierPath这个类绘制圆形图片，如下： - (UIImage*)drawImageWithSize:(CGSize)size imageName:(NSString *)imageName {     // 申请一块特定大小的画布     UIGraphicsBeginImageContext(size);     // 画出一个与画布等大
WPF Button 设置圆角 CornerRadius属性的使用
u012803643的博客
04-11 3047
可以看到为border设置了CornerRadius属性，value为3，这个可以根据需求自定义圆角的弯曲度，同时上面将Background通过绑定的方式输入value,那么在画button的时候可以将值传入。在WPF,button的默认形态时长方形的，但是我们为了美观，通常需要将button的四个角设计的温和一点，在WPF中就需要用到这样一个属性CornerRadius。首先我们要画一个button。然后给button添加样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值