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

Question

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

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

Answer 1

任何 UIView 的圆角都必须穿过其图层。将其粘贴到新的 Xcode 游乐场：

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

Answer 2

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

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

How to make rounded corners and sides in UIview programmatically?

core-animation

objective-c

ios