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

Question

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

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

Answer 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 来绘制您想要的轮廓，然后直接绘制它，将其添加为子图层，或者将其用作蒙版。

Answer 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