如何创建底部边缘圆角的UIView并设置视图底部圆角？

嘿，搞定底部带圆角的UIView其实很简单！我给你整理了Swift和Objective-C两种常用方案，还有效果说明，直接抄作业就行～

先给你看看最终要实现的效果：顶部保持直角，只有底部两个角呈现圆润的弧度，示意图如下：

方法一：自定义可复用View类（推荐） #

创建一个自定义UIView子类，这样不管哪里需要底部圆角视图，直接用这个类就行，还能自动适配尺寸变化：

import UIKit

class BottomRoundedView: UIView {
    // 可自定义圆角半径，默认16
    @IBInspectable var cornerRadius: CGFloat = 16 {
        didSet {
            setNeedsLayout()
        }
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 创建仅底部圆角的路径
        let path = UIBezierPath(roundedRect: bounds,
                                byRoundingCorners: [.bottomLeft, .bottomRight],
                                cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
        // 设置mask层实现圆角
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer
    }
}

使用方式：

• 代码里初始化：直接创建BottomRoundedView实例，设置尺寸、背景色即可；
• Storyboard/Xib里：拖一个UIView，在Identity Inspector里把类改成BottomRoundedView，还能直接在Attributes Inspector里调整cornerRadius参数。

方法二：给现有视图动态设置圆角 #

如果只是临时给某个已有视图加底部圆角，直接写这段代码就行：

// 假设你的目标视图是myView
let targetCornerRadius: CGFloat = 16
let roundedPath = UIBezierPath(roundedRect: myView.bounds,
                               byRoundingCorners: [.bottomLeft, .bottomRight],
                               cornerRadii: CGSize(width: targetCornerRadius, height: targetCornerRadius))
let maskLayer = CAShapeLayer()
maskLayer.path = roundedPath.cgPath
myView.layer.mask = maskLayer

⚠️ 注意：如果用AutoLayout布局，一定要在viewDidLayoutSubviews方法里执行这段代码，不然视图尺寸还没确定，圆角会显示异常！

方法一：自定义可复用View类 #

#import <UIKit/UIKit.h>

@interface BottomRoundedView : UIView
@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;
@end

@implementation BottomRoundedView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _cornerRadius = 16;
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    // 创建底部圆角路径
    UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds
                                                   byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                                                         cornerRadii:CGSizeMake(self.cornerRadius, self.cornerRadius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = roundedPath.CGPath;
    self.layer.mask = maskLayer;
}

- (void)setCornerRadius:(CGFloat)cornerRadius {
    _cornerRadius = cornerRadius;
    [self setNeedsLayout];
}

@end

使用方式：

BottomRoundedView *roundedView = [[BottomRoundedView alloc] initWithFrame:CGRectMake(50, 200, 300, 200)];
roundedView.backgroundColor = [UIColor systemBlueColor];
roundedView.cornerRadius = 20;
[self.view addSubview:roundedView];

方法二：动态设置现有视图 #

// 假设目标视图是myView
CGFloat targetCornerRadius = 16;
UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                               byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                                                     cornerRadii:CGSizeMake(targetCornerRadius, targetCornerRadius)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = roundedPath.CGPath;
myView.layer.mask = maskLayer;

同样要注意：AutoLayout布局下，把这段代码放在-viewDidLayoutSubviews里执行，避免尺寸问题。

如果需要同时设置其他圆角，只需要修改byRoundingCorners的参数就行，比如：

• Swift里：[.topLeft, .bottomLeft, .bottomRight]
• Objective-C里：UIRectCornerTopLeft | UIRectCornerBottomLeft | UIRectCornerBottomRight

内容的提问来源于stack exchange，提问作者Tural Veliyev