如何创建仅具有左上角和左下角半径的圆形 UIButton

Posted 2023-03-10

【中文标题】如何创建仅具有左上角和左下角半径的圆形 UIButton

【英文标题】：How to create rounded UIButton with top-left & bottom-left corner radius only

【发布时间】：2015-10-04 19:13:24

【问题描述】：

我需要创建一个具有左上角和左下角半径的按钮，例如。我尝试创建以下扩展名，该扩展名取自 *** 答案之一：

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) 

此代码生成以下形状

那么为什么左上角和左下角不可见呢？我应该怎么做才能让它们可见？

【问题讨论】：

在应用mask之前尝试添加self.layer.masksToBounds = true。看起来您已经创建了一个矩形边框，然后切片了您需要的形状，但边框不是 maskingToBounds。

感谢您的建议。我使用@Duncan C 的解决方案。它对我有用。

请告诉我你不是在尝试滚动你自己的分段控件:-)

在这里查看我的答案：***.com/a/40222533/2594699

【参考方案1】：

您的代码正在为您的按钮应用遮罩层。这会导致您在遮罩层中安装的形状之外的任何东西都被遮盖掉。当您安装带有圆角的路径时，它基本上会“刮掉”两个角。这不是你想要的。

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

像这样更改您的代码：

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)

【讨论】：

太棒了。效果很好。帮我个忙。我使用以下代码修改了代码以用灰色填充按钮：borderLayer.fillColor = UIColor.lightGrayColor().CGColor。这样可行。现在我需要将按钮标题颜色设置为白色。我使用以下代码：button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)。但标题颜色不会改变。颜色仍然是我从情节提要中设置的灰色。你能告诉我为什么它没有改变吗？？

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

在第一行 UIButton 扩展的 roundCorners() 方法中，我添加了以下代码：self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)

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

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

【参考方案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;

【讨论】：

不。这将给出与 OPs 代码相同的结果。如果您想要按钮上的圆角，您不需要遮罩层，您需要一个作为常规子层的形状层。

仔细看看。这是一个CAShapeLayer。

是的，但是您将形状图层安装为按钮图层的蒙版，这不会产生所需的结果。尝试一下。它不会像你想象的那样工作。看我的回答。