如何创建只有左上角和左下角圆角的UIButton？

Question

我需要创建一个带有左上角和左下角圆角的按钮，就像这张图片所示：。我尝试通过创建以下扩展程序来实现，该扩展程序是从stackoverflow答案中获取的：

extension UIButton {

   func roundCorners(corners:UIRectCorner, radius: CGFloat) {
       self.layer.borderColor = GenerateShape.UIColorFromHex(0x989898, alpha: (1.0-0.3)).CGColor
       self.layer.borderWidth = 1.0
       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

   }
}

然后像这样调用方法：

self.collectionBtn.roundCorners(.TopLeft | .BottomLeft, radius: cornerRadius) 

这段代码生成了以下形状

为什么左上角和左下角是不可见的？我该怎么做才能使它们变得可见？

- Linkon Sid

---

在应用“mask”之前，尝试添加“self.layer.masksToBounds = true”。看起来你已经创建了一个矩形边框，然后切割出了所需的形状，但是边框没有“maskingToBounds”。 - Chameleon

谢谢您的建议。我使用了 @Duncan C. 的解决方案，对我很有效。 - Linkon Sid

请告诉我你不是在尝试自己编写分段控件 :-) - Nicolas Miari

请查看我的答案：https://dev59.com/0mkv5IYBdhLWcg3w1kOq#40222533 - Nhat Dinh

Answer 1

您的代码正在将遮罩层应用于按钮。这会导致在您安装在遮罩层中的形状之外的任何内容被遮掩。当您安装具有圆角的路径时，它实际上会“削去”2个角。这不是您想要的。

您可能希望创建一个形状层，并将其安装为按钮图层的常规子层，而不是作为遮罩层。但是，您需要将填充颜色设置为清除。

请将您的代码更改如下：

extension UIButton 
{
  func roundCorners(corners:UIRectCorner, radius: CGFloat) 
  {
    let borderLayer = CAShapeLayer()
    borderLayer.frame = self.layer.bounds
    borderLayer.strokeColor = GenerateShape.UIColorFromHex(0x989898, 
      alpha: (1.0-0.3)).CGColor
    borderLayer.fillColor = UIColor.clearColor().CGColor
    borderLayer.lineWidth = 1.0
    let path = UIBezierPath(roundedRect: self.bounds, 
      byRoundingCorners: corners, 
      cornerRadii: CGSize(width: radius, height: radius))
    borderLayer.path = path.CGPath
    self.layer.addSublayer(borderLayer);
  }
}

编辑:

在Swift 2中，设置角落的语法不起作用:

self.collectionBtn.roundCorners(.TopLeft | .BottomLeft, radius: 10)

应该是：

self.collectionBtn.roundCorners([.TopLeft, .BottomLeft], radius: 10)

- Duncan C

---

太好了，这很好用。请帮我一个忙。我修改了代码，使用以下代码将按钮填充为灰色：borderLayer.fillColor = UIColor.lightGrayColor().CGColor。这个可以工作。现在我需要将按钮标题颜色设置为白色。我使用以下代码：button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)。但是标题颜色没有改变。颜色仍然是我从故事板中设置的灰色。你能告诉我为什么它没有改变吗？ - Linkon Sid

请在您的问题末尾发布设置按钮颜色的整个方法。什么是“button”？ - Duncan C

在 UIButton 扩展的 roundCorners() 方法中，我首先添加了以下代码：self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)。 - Linkon Sid

borderLayer.fillColor = GenerateShape.UIColorFromHex(0x989898, alpha: (1.0-0.3)).CGColor 这是设置按钮颜色的代码。 - Linkon Sid

我在这段代码中遇到了一些问题。主要是，我的编译器在“self.layer.addSublayer(borderLayer.path)”这一行上给出了这个错误：“无法将类型为CGPath？的值转换为预期的参数类型CGLayer”。有什么建议吗？ - David Tamrazov

那是一个打字错误。应该是 self.layer.addSublayer(borderLayer)。 - Duncan C

Answer 2

以下是您可以完成它的方法：

CGRect maskRect = CGRectMake(0.0, 0.0, CGRectGetWidth(<#something here#>), CGRectGetHeight(<#something here#>));
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:maskRect
                                           byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerTopLeft)
                                                 cornerRadii:CGSizeMake(<#corner radius#>, <#corner radius#>)];
maskLayer.path = path.CGPath;
self.layer.mask = maskLayer;

- Soberman

---

不，那会得到与原始代码相同的结果。如果您想在按钮上拥有圆角，则不需要蒙版图层，而是需要一个普通子图层的形状图层。 - Duncan C

仔细看，这是一个CAShapeLayer。 - Soberman

是的，但您正在将形状图层安装为按钮图层的蒙版，这不会产生期望的结果。试试看。它不会按您想象的那样工作。请查看我的答案。 - Duncan C