如何以编程方式在 UIview 中制作圆角和边？

Posted 2023-02-23

【中文标题】如何以编程方式在 UIview 中制作圆角和边？

【英文标题】：How to make rounded corners and sides in UIview programmatically?

【发布时间】：2015-11-21 20:56:08

【问题描述】：

如何在 UIview 中像 youtube 一样以编程方式制作圆角和边：

我知道如何制作圆角，但不知道如何制作圆边。我需要以编程方式进行（不仅仅是设置先前设计的图像蒙版）

【问题讨论】：

对不起，我的意思是圆边（不是边框）。更新主题

【参考方案1】：

您可以创建一个UIBezierPath。如果您只想绕过拐角，可以使用bezierPathWithRoundedRect。如果你想要更复杂的东西，比如那个 YouTube 标志，你可以使用moveToPoint 和一系列addCurveToPoint 或addQuadCurveToPoint。

例如，这是一个近似值：

生成的：

- (void)viewDidLoad 
    [super viewDidLoad];

    CGFloat width  = MIN(self.view.bounds.size.width, self.view.bounds.size.width) * 0.7;
    CGFloat height = width * 3.0 / 4.0;
    CGSize  size   = CGSizeMake(width, height);
    CGFloat corner = width / 9.0;

    CGPoint center = CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0);

    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = [self roundedPathAtCenter:center size:size corner:corner].CGPath;
    layer.fillColor = [UIColor redColor].CGColor;
    layer.strokeColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:layer];


- (UIBezierPath *)roundedPathAtCenter:(CGPoint)center size:(CGSize)size corner:(CGFloat)corner 
    CGFloat width = size.width;
    CGFloat height = size.height;

    UIBezierPath *path = [UIBezierPath bezierPath];

    // upper left corner

    [path moveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y - height / 2.0 + corner / 2.0)];

    // path to top center

    [path addQuadCurveToPoint: CGPointMake(center.x, center.y - height / 2.0) controlPoint: CGPointMake(center.x - width / 2.0 + corner, center.y - height / 2.0)];

    // path to upper right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0 - corner / 2.0, center.y - height / 2.0 + corner / 2.0) controlPoint: CGPointMake(center.x + width / 2.0 - corner, center.y - height / 2.0)];

    // path to mid right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0, center.y) controlPoint: CGPointMake(center.x + width / 2.0, center.y - height / 2.0 + corner)];

    // path to lower right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0 - corner / 2.0, center.y + height / 2.0 - corner / 2.0) controlPoint: CGPointMake(center.x + width / 2.0, center.y + height / 2.0 - corner)];

    // path to center bottom

    [path addQuadCurveToPoint: CGPointMake(center.x, center.y + height / 2.0) controlPoint: CGPointMake(center.x + width / 2.0 - corner, center.y + height / 2.0)];

    // path to lower left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y + height / 2.0 - corner / 2.0) controlPoint: CGPointMake(center.x - width / 2.0 + corner, center.y + height / 2.0)];

    // path to mid left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0, center.y) controlPoint: CGPointMake(center.x - width / 2.0, center.y + height / 2.0 - corner)];

    // path to top left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y - height / 2.0 + corner / 2.0) controlPoint: CGPointMake(center.x - width / 2.0, center.y - height / 2.0 + corner)];

    [path closePath];

    return path;

您可以使用这些控制点来获得您想要的效果。关键是你希望第一个控制点与前面圆弧的第二个控制点一致。

在这个例子中，我只是创建了一个CAShapeLayer 并将它添加为一个子层。或者，您也可以使用此CAShapeLayer 并将其作为mask 添加到其他视图的layer 中。关键是您只需要创建一个UIBezierPath 来绘制您想要的轮廓，然后直接绘制它，将其添加为子图层，或者将其用作蒙版。

【讨论】：

问题标记为 Objective-C，而不是 Swift。

针对 Objective-C 更新。

【参考方案2】：

任何UIView 的圆角都必须穿过其层。 将其粘贴到新的 Xcode Playground 中：

import Foundation
import UIKit

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.redColor()
view.layer.cornerRadius = 20.0
view

【讨论】：

问题是关于圆边，而不是圆角。这个问题被标记为 Objective-C。