圆角仅在UIView之上

Question

嗨,我正在寻找一个干净的解决方案,没有覆盖drawRect或类似的东西UIView,在视图的顶部创建一个圆角.我的主要问题是如果视图调整大小或类似的话,创建变量解决方案.有清洁的解决方案吗？Apple也是第一个表项目.做到这一点并不难.

Answer 1

您可以通过mask在视图的图层上设置一个来完成此操作:

CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii: (CGSize){10.0, 10.}].CGPath;

self.layer.mask = maskLayer;

重要提示:您应该在视图的layoutSubviews()方法中执行此操作,因此视图已从故事板中调整大小

在Swift <= 1.2

let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: .TopLeft | .TopRight, cornerRadii: CGSize(width: 10.0, height: 10.0)).CGPath

layer.mask = maskLayer

Swift 2.x

let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: UIRectCorner.TopLeft.union(.TopRight), cornerRadii: CGSizeMake(10, 10)).CGPath
layer.mask = maskLayer

Swift 3.x

let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10, height: 10)).cgPath
layer.mask = maskLayer

Answer 2

刚试过Swift 3.0,Xcode 8.0:

记得设置你的按钮viewDidLayoutSubviews()或layoutSubViews描述@rob 这里.

当你想改变你的按钮背景时,你只需要打电话:

yourButton.backgroundColor = UIColor.someColour

资源:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    yourButton.layer.masksToBounds = true
    yourButton.roundCorners(corners: [.topLeft,.topRight], radius: 5)
}

extension UIButton
{
    func roundCorners(corners:UIRectCorner, radius: CGFloat)
    {
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
        self.layer.mask = maskLayer
    }
}

• 结果如下:

默认状态:

选择状态:

希望这有帮助!!

Answer 3

现代简单的解决方案

iOS 11+

现在我们maskedCorners在视图的图层上有了这个属性，它让生活变得更轻松。

只需设置所需的角半径并指定应屏蔽哪些角即可。最好的部分是这与边框配合得很好 - 无论是否圆角，图层边框都将跟随图层的边缘！在操场上试试下面的代码（记得按一下打开实时视图，command+option+return这样你就可以看到它的样子）

import UIKit
import PlaygroundSupport

let wrapperView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 160))
wrapperView.backgroundColor = .lightGray

let roundedCornerView = UIView(frame: CGRect(x: 50, y: 50, width: 300, height: 60))
roundedCornerView.backgroundColor = .white

wrapperView.addSubview(roundedCornerView)

roundedCornerView.layer.cornerRadius = 10
roundedCornerView.layer.borderColor = UIColor.red.cgColor
roundedCornerView.layer.borderWidth = 1


// this is the key part - try out different corner combinations to achieve what you need
roundedCornerView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]


PlaygroundPage.current.liveView = wrapperView

这是它的样子：

Answer 4

对于 iOS11 及更高版本，您可以使用视图的 layer 属性：

@property CACornerMask maskedCorners

这定义了在使用cornerRadius属性时四个角中的哪一个接收遮罩。默认为所有四个角。（苹果文档）

Answer 5

圆角的 UIView 扩展（Swift 4）：

extension UIView {

    /// Round UIView selected corners
    ///
    /// - Parameters:
    ///   - corners: selected corners to round
    ///   - radius: round amount
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

例子：

ratingView.roundCorners([.topLeft, .topRight, .bottomRight], radius: 6)