【问题标题】:How to set layer cornerRadius for only bottom-left, bottom-right, and top-left corner?如何仅为左下角、右下角和左上角设置图层cornerRadius?
【发布时间】:2015-09-22 19:45:22
【问题描述】:

如何仅设置文本视图的左下角、右下角和左上角的角半径?

let rectShape = CAShapeLayer()
rectShape.backgroundColor = UIColor.redColor().CGColor
rectShape.bounds = messages.frame
rectShape.position = messages.center
rectShape.path = UIBezierPath(roundedRect: messages.bounds, byRoundingCorners: .BottomLeft | .TopRight, cornerRadii: CGSize(width: 20, height: 20)).CGPath

messages.layer.addSublayer(rectShape)

这段代码创建了两个矩形。我不知道为什么。

【问题讨论】:

标签: swift textview rounded-corners


【解决方案1】:

(swift 4/iOS 11) 简单说下:

yourView.clipsToBounds = true 
yourView.layer.cornerRadius = 10
yourView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]

向上:

yourView.clipsToBounds = true 
yourView.layer.cornerRadius = 10
yourView.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]

在你的情况下:

yourView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]

希望有帮助:)

【讨论】:

  • THX @Rafal,我忘了说明 :)
  • 简洁明了。
  • THX @KenZira,很高兴为您提供帮助 :)
  • @AnandaBayuPutraYudhistira 很高兴为您提供帮助 :)
  • 为我工作。谢谢法比奥!
【解决方案2】:

你只需要像下面这样屏蔽层:

对于 Swift 3

let rectShape = CAShapeLayer()
rectShape.bounds = self.myView.frame
rectShape.position = self.myView.center
rectShape.path = UIBezierPath(roundedRect: self.myView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath

self.myView.layer.backgroundColor = UIColor.green.cgColor
//Here I'm masking the textView's layer with rectShape layer
self.myView.layer.mask = rectShape

低版本:

let rectShape = CAShapeLayer()
rectShape.bounds = self.myView.frame
rectShape.position = self.myView.center
rectShape.path = UIBezierPath(roundedRect: self.myView.bounds, byRoundingCorners: .BottomLeft | .BottomRight | .TopLeft, cornerRadii: CGSize(width: 20, height: 20)).CGPath

self.myView.layer.backgroundColor = UIColor.greenColor().CGColor
//Here I'm masking the textView's layer with rectShape layer
self.myView.layer.mask = rectShape

【讨论】:

  • 对不起,我想再问一个问题。我不能把拐角向右转。 .TopRight 和 .ButtonRight 不起作用
  • 只需将此代码添加到新控制器并检查一次,因为它可能是您的自动布局的问题......对我来说它可以正常工作
  • 我认为byRoundingCorners 需要一个数组,所以在上面的例子中应该是:byRoundingCorners: [.BottomLeft, .BottomRight, .TopLeft]
  • 不适用于底部。即 bottomLeft & bottomRight
  • 在 iPhone8Plus 中的文本字段角半径 topleft 和 bottomleft 之后在右侧留出空间
【解决方案3】:

斯威夫特 3

extension UIView {
    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
  }
}

这样使用

YourView.roundCorners([.topLeft, .bottomLeft], radius: 10)

【讨论】:

  • 不适用于底部。即 bottomLeft & bottomRight
  • 效果很好,适用于所有角落。谢谢!
  • @Harsha 很高兴为您提供帮助
  • 我在右上和右下有问题。 :(
  • 我遇到了类似的问题,不能在右上角和右下角工作。我通过在视图控制器的 viewDidLayoutSubviews 和 tableview 单元格的 layoutSubviews 中调用它来修复它。它对我有用。
【解决方案4】:

对于 iOS 11 和 iOS 10 底角的更好答案是

 if #available(iOS 11.0, *){
        view.clipsToBounds = true
        view.layer.cornerRadius = 10
        view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]
    }else{
       let rectShape = CAShapeLayer()
       rectShape.bounds = view.frame
       rectShape.position = view.center
       rectShape.path = UIBezierPath(roundedRect: view.bounds,    byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
      view.layer.backgroundColor = UIColor.green.cgColor
      view.layer.mask = rectShape
  }

如果这在 iOS 10 及更低版本上不起作用,请尝试像这样在 viewcontroller 类的 viewDidLayoutSubviews() 中运行代码

override func viewDidLayoutSubviews() {
    if #available(iOS 11.0, *){
    }else{
       let rectShape = CAShapeLayer()
       rectShape.bounds = view.frame
       rectShape.position = view.center
       rectShape.path = UIBezierPath(roundedRect: view.bounds,    byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
       view.layer.backgroundColor = UIColor.green.cgColor
       view.layer.mask = rectShape
}

【讨论】:

  • 完美适用于 iOS 11
  • 适用于 ios 10。它不适用于右上角和右上角,但将代码移动到 viewDidLayoutSubViews 解决了问题。谢谢
【解决方案5】:

Swift 4+

func roundCorners(with CACornerMask: CACornerMask, radius: CGFloat) {
    self.layer.cornerRadius = radius
    self.layer.maskedCorners = [CACornerMask]
}

右上角

roundCorners(with: [.layerMinXMinYCorner], radius: 20)

左上角

roundCorners(with: [.layerMaxXMinYCorner], radius: 20)

右下

roundCorners(with: [.layerMinXMaxYCorner], radius: 20)

左下

roundCorners(with: [.layerMaxXMaxYCorner], radius: 20)

同时多个角

func roundedCorners(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
    layer.mask = mask
}

如何使用

roundedCorners(corners: [.topLeft, .topRight], radius: 20)

【讨论】:

    【解决方案6】:

    Swift 4

    override func viewDidLoad() {
        let topRight = UIView(frame: CGRect(x: 120, y: 200, width: 120, height: 120))
        topRight.roundedTop()
        topRight.backgroundColor = .red
        self.view.center = topRight.center
        self.view.addSubview(topRight)
        super.viewDidLoad()
    }
    

    输出:

    UIView Swift 4 上的扩展:Reference Link

    【讨论】:

      【解决方案7】:

      这是一个适用于 iOS 11+ 的扩展

       import Foundation
       import UIKit
      
       extension UIView {
      
         func roundCorners(_ corners: CACornerMask, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
             self.layer.maskedCorners = corners
             self.layer.cornerRadius = radius
             self.layer.borderWidth = borderWidth
             self.layer.borderColor = borderColor.cgColor
          
         }
      
       }
      

      用法:-

      self.yourView.roundCorners([.layerMaxXMaxYCorner, .layerMaxXMinYCorner], radius: 20.0, borderColor: UIColor.green, borderWidth: 1)
      

      斯威夫特 5+

      view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner]
      

      【讨论】:

        【解决方案8】:
        1. 将 RoundedCornerView.swift 文件添加到您的项目中
        2. 将 UIView 添加到您的 ViewController
        3. 将 Identity Inspector 中的自定义类更改为 RoundedCornerView
        4. 转到 Attribute Inspector 选择 Corner Radius (CGFloat) 和 On the corners you want rounded。

        RoundedCornerView.swift

        import UIKit
        
        @IBDesignable
        class RoundedCornerView: UIView {
        
            var cornerRadiusValue : CGFloat = 0
            var corners : UIRectCorner = []
        
            @IBInspectable public var cornerRadius : CGFloat {
                get {
                    return cornerRadiusValue
                }
                set {
                    cornerRadiusValue = newValue
                }
            }
        
            @IBInspectable public var topLeft : Bool {
                get {
                    return corners.contains(.topLeft)
                }
                set {
                    setCorner(newValue: newValue, for: .topLeft)
                }
            }
        
            @IBInspectable public var topRight : Bool {
                get {
                    return corners.contains(.topRight)
                }
                set {
                    setCorner(newValue: newValue, for: .topRight)
                }
            }
        
            @IBInspectable public var bottomLeft : Bool {
                get {
                    return corners.contains(.bottomLeft)
                }
                set {
                    setCorner(newValue: newValue, for: .bottomLeft)
                }
            }
        
            @IBInspectable public var bottomRight : Bool {
                get {
                    return corners.contains(.bottomRight)
                }
                set {
                    setCorner(newValue: newValue, for: .bottomRight)
                }
            }
        
            func setCorner(newValue: Bool, for corner: UIRectCorner) {
                if newValue {
                    addRectCorner(corner: corner)
                } else {
                    removeRectCorner(corner: corner)
                }
            }
        
            func addRectCorner(corner: UIRectCorner) {
                corners.insert(corner)
                updateCorners()
            }
        
            func removeRectCorner(corner: UIRectCorner) {
                if corners.contains(corner) {
                    corners.remove(corner)
                    updateCorners()
                }
            }
        
            func updateCorners() {
                let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadiusValue, height: cornerRadiusValue))
                let mask = CAShapeLayer()
                mask.path = path.cgPath
                self.layer.mask = mask
            }
        
        }
        

        github 链接:RoundedCornerView

        【讨论】:

        • 感谢它工作的库,但它不会在情节提要中快速更新,我们需要关闭和打开属性然后才会更新
        • 在情节提要中没问题,但仅适用于 devie 上的左角。为什么?
        • @MahdiMoqadasi 如果您的设备宽度与模拟器设备不同,那么它可能不会显示在实际设备上。更好的解决方案是在 viewDidLayoutSubviews() 函数中设置所有你想要的圆角设置为真。例如在 viewDidLayoutSubviews() 函数里面写: roundedView.topLeft = true roundedView.topRight = true 它会根据你的视图宽度重绘。希望对您有所帮助。
        【解决方案9】:

        方式

        用于子视图和弹出窗口 [斯威夫特 5]

        override func layoutSublayers(of layer: CALayer) {
            searchBarPopup.clipsToBounds = true
            searchBarPopup.layer.cornerRadius = 10
            searchBarPopup.layer.maskedCorners = [ .layerMaxXMinYCorner, .layerMinXMinYCorner]
        }
        

        输出:

        image

        【讨论】:

        • 请添加一些解释,这将有助于新人理解你写的内容
        【解决方案10】:

        我能想出上述所有解决方案的最佳解决方案就是这个。

        extension UIView {
            func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
                if #available(iOS 11, *) {
                    var cornerMask = CACornerMask()
                    if(corners.contains(.topLeft)){
                        cornerMask.insert(.layerMinXMinYCorner)
                    }
                    if(corners.contains(.topRight)){
                        cornerMask.insert(.layerMaxXMinYCorner)
                    }
                    if(corners.contains(.bottomLeft)){
                        cornerMask.insert(.layerMinXMaxYCorner)
                    }
                    if(corners.contains(.bottomRight)){
                        cornerMask.insert(.layerMaxXMaxYCorner)
                    }
                    self.layer.cornerRadius = radius
                    self.layer.maskedCorners = cornerMask
        
                } else {
                    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
                }
            }
        }
        

        我相信这种方式在选择边时很容易实现。

        view.roundCorners([.bottomLeft, .bottomRight, .topLeft], radius: 16)
        

        【讨论】:

        • 在此处提供的所有答案的帮助下,我刚刚想出了一个简单易用的扩展。很高兴听到它对您有所帮助。
        【解决方案11】:
        extension UIView {
        
        func roundCorners(_ corners: CACornerMask, radius: CGFloat) {
            if #available(iOS 11, *) {
                self.layer.cornerRadius = radius
                self.layer.maskedCorners = corners
            } else {
                var cornerMask = UIRectCorner()
                if(corners.contains(.layerMinXMinYCorner)){
                    cornerMask.insert(.topLeft)
                }
                if(corners.contains(.layerMaxXMinYCorner)){
                    cornerMask.insert(.topRight)
                }
                if(corners.contains(.layerMinXMaxYCorner)){
                    cornerMask.insert(.bottomLeft)
                }
                if(corners.contains(.layerMaxXMaxYCorner)){
                    cornerMask.insert(.bottomRight)
                }
                let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: cornerMask, cornerRadii: CGSize(width: radius, height: radius))
                let mask = CAShapeLayer()
                mask.path = path.cgPath
                self.layer.mask = mask
            }
        }
        

        }

        【讨论】:

        • 这应该是最新 iOS 版本的公认答案,谢谢它对我有用
        【解决方案12】:

        STEP:1 -> 使用这个扩展。

        import UIKit
        
        extension UIView {
        
        func round(corners: UIRectCorner, cornerRadius: Double) {
            
            let size = CGSize(width: cornerRadius, height: cornerRadius)
            let bezierPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size)
            let shapeLayer = CAShapeLayer()
            shapeLayer.frame = self.bounds
            shapeLayer.path = bezierPath.cgPath
            self.layer.mask = shapeLayer
            }
        }
        

        步骤:2 -> 在 UIView IBOutlet 变量中使用 round()

        仅圆顶角 写下面的代码只圆顶角

        myView.round(corners: [.topLeft, .topRight], cornerRadius: 20)
        

        仅圆底角

        myView.round(corners: [.bottomLeft, .bottomRight], cornerRadius: 20)
        

        圆其他角 // 仅圆左上角 myView.round(corners: [.topLeft],cornerRadius: 20)

        // Round top-left and bottom-left corners only
        myView.round(corners: [.topLeft, .bottomLeft], cornerRadius: 20)
                
        // Round top-left and bottom-right corners only
        myView.round(corners: [.topLeft, .bottomRight], cornerRadius: 20)
                
        // Round top-right and bottom-left corners only
        myView.round(corners: [.topRight, .bottomLeft], cornerRadius: 20)
        

        Like This Open Image

        【讨论】:

          【解决方案13】:

          问题解决了,现在右上和右下工作

          在 iOS 9 , 10 , 11 版本中测试代码

           extension UIView {
                  func roundCorners(_ corners:UIRectCorner,_ cormerMask:CACornerMask, radius: CGFloat) {
                      if #available(iOS 11.0, *){
                          self.clipsToBounds = false
                          self.layer.cornerRadius = radius
                          self.layer.maskedCorners = cormerMask
                      }else{
                          let rectShape = CAShapeLayer()
                          rectShape.bounds = self.frame
                          rectShape.position = self.center
                          rectShape.path = UIBezierPath(roundedRect: self.bounds,    byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
                          self.layer.mask = rectShape
                      }
                  }
                  
              }
          

          【讨论】:

          • 不适用于 IOS 9。半径部分的边角切割
          猜你喜欢
          • 2014-10-26
          • 1970-01-01
          • 2012-04-27
          • 2013-12-22
          • 2016-06-08
          • 2021-08-21
          • 1970-01-01
          • 2011-04-14
          相关资源
          最近更新 更多