web-dev-qa-db-ja.com

SwiftのUIButtonのラウンドトップコーナー

以下を使用して4つのコーナーすべてを丸くできることを知っています。

 myBtn.layer.cornerRadius = 8
 myBtn.layer.masksToBounds = true

私は2つだけを丸めたいので、いくつかの調査を行って this ：

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
    }
}

これは次のように呼び出されます：

view.roundCorners([.TopLeft , .TopRight], radius: 10)

しかし、これはUIButtonでは機能しません。拡張機能をUIButton型に切り替えてbuttonに渡すと、出力は次のようになります。

enter image description here

問題は、UIButtonで動作するようにこれをどのように適応させるかです。

iosswiftuibuttonrounded-corners
26
Dave G

UIButtonの拡張機能を追加：

extension UIButton{
    func roundedButton(){
        let maskPath1 = UIBezierPath(roundedRect: bounds,
            byRoundingCorners: [.topLeft , .topRight],
            cornerRadii: CGSize(width: 8, height: 8))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

viewDidAppear/viewDidLayoutSubviewsでの呼び出し：

btnCorner.roundedButton()

ボタンコーナーアウトプット：

enter image description here

45
Kirit Modi

Swift 4：最新のiOS 11以降

override func viewDidLoad() {
    super.viewDidLoad()

    if #available(iOS 11.0, *) {
        self.viewToRound.clipsToBounds = true
        viewToRound.layer.cornerRadius = 20
        viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    } else {
        // Fallback on earlier versions
    }
}

以前のiOS（10,9など）バージョン（iOS 11でも動作します）

override func viewDidLayoutSubviews() {
    self.viewToRound.clipsToBounds = true
    let path = UIBezierPath(roundedRect: viewToRound.bounds,
                            byRoundingCorners: [.topRight, .topLeft],
                            cornerRadii: CGSize(width: 20, height: 20))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    viewToRound.layer.mask = maskLayer
}
31
Naishta

Swiftの場合、Kirit Modiの答えは次のように変更されます。

extension UIButton {
   func roundedButton(){
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: [.topLeft , .topRight],
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

拡張機能のファイルの先頭に追加することを忘れないでください：

import UIKit

IViewの拡張が必要な​​場合、上または下の角を丸くするオプションを使用できます：

extension UIView {
   func roundedCorners(top: Bool){
       let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])        
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

ボタンとして次のように呼び出されます：

myButton.roundedCorners(top: true)
20
C. Kontos

iOS 11では、角を丸くするのが本当に簡単になりました。以下のコードは、左上隅と右下隅を丸めます。

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]
6
dsunku

拡張機能を次のように更新します。

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()
    let rect = self.bounds
    mask.frame = rect
    mask.path = path.cgPath
    self.layer.mask = mask
}
}

形状レイヤー（マスク）はフレームを知る必要があります

5
Hossam Ghareeb

このコードを使用して、

let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.CGPath
viewTo.layer.mask = maskLayer

その役に立つことを願って

0
Iyyappan Ravi

シェイプレイヤーのフレームを設定するのを忘れました：

mask.frame = layer.bounds
0
return true

Swift 5および最大の柔軟性

roundCorners関数で拡張機能を定義する

extension UIButton {
    func roundCorners(corners: UIRectCorner, radius: Int = 8) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: corners,
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

roundCorners関数を呼び出します

myButton.roundCorners(corners: [.topLeft, .topRight])

enter image description here

または特定の半径

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

enter image description here

0
Scott

丸みはビュー/ボタンの角に適用されますが、ボタンの境界に来ると、正しく適用されません。その解決策はありますか？ @

ここに私が使用したコードがあります。これはiOS11.0以上で動作（境界）しており、以下のバージョンでは動作していません

if #available(iOS 11.0, *) {
        self.layer.cornerRadius = radius
        self.layer.maskedCorners = maskedCorners
    } else {
        let shapeLayer = CAShapeLayer()
        shapeLayer.position = self.center
        self.layer.masksToBounds = true
        self.clipsToBounds = true
        let bezirePath = UIBezierPath(roundedRect: self.bounds,
                                      byRoundingCorners: corners,
                                      cornerRadii: CGSize(width: radius, height: radius))
        shapeLayer.bounds = frame
        shapeLayer.path = bezirePath.cgPath

        self.layer.mask = shapeLayer
0
sharath kumar