如何以编程方式在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