狛ログ

2020年3月31日火曜日

iOSでViewの一部分を角丸にしたい時の拡張クラスの作り方。

3月 31, 2020



こんにちは、オフィス狛 モバイル開発担当Aika-yuy です。
今回の投稿は、viewなどの一部分を角丸にしたい場合にインスペクタから設定できるようにする拡張クラスをご紹介します。
iOS11以降は、バージョンアップして以前より簡単に部分的に角丸にできるようになりました。


〜iOS10の設定方法

let path = UIBezierPath(roundedRect:layer.bounds,
                                byRoundingCorners:[//角丸にしたい場所を指定
                                                                    .topRight,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.topLeft,
                                                                    .bottomRight,
                                                                    .bottomLeft
                                                                   ],
                                cornerRadii: CGSize(width: XX, height: XX))
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer


iOS11〜の設定方法

layer.maskedCorners = [//角丸にしたい場所を指定
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.layerMaxXMaxYCorner,//右上
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.layerMinXMaxYCorner,//左上
                                          .layerMaxXMinYCorner,//右下
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 .layerMinXMinYCorner//左下
                                         ]


CustomViewを作成しました

角丸の位置の指定は、ビット値で設定しているため、cornersではそれぞれの角丸に設定された値の合計を出しています。 
class CustomView : UIView {
　　　　@IBInspectable var cornerRadius: CGFloat = 0.0 { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerTopRight: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerTopLeft: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerBottomRight: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerBottomLeft: Bool = false { didSet { self.setNeedsLayout() } }
    
    private var corners: UInt {
        return UInt((cornerTopLeft ? 2 : 0) + (cornerTopLeft ? 1 : 0) + (cornerBottomRight ? 8 : 0) + (cornerBottomLeft ? 4 : 0))
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.setcornerRadius()
    }
    
    private func setcornerRadius() {
        layer.cornerRadius = self.cornerRadius
        if #available(iOS 11.0, *) {
            layer.maskedCorners = CACornerMask(rawValue: corners)
        } else {
            let path = UIBezierPath(roundedRect: layer.bounds,
                                    byRoundingCorners: UIRectCorner(rawValue: self.corners),
                                    cornerRadii: CGSize(width: self.cornerRadius, height: self.cornerRadius))
            let maskLayer = CAShapeLayer()
            maskLayer.path = path.cgPath
            layer.mask = maskLayer
        }
        layer.masksToBounds = self.cornerRadius > 0
    }
}




CustomViewを使用すると、インスペクタからon/offで部分的に角丸を設定できるようになります。 細かい角丸の設定が必要な際は使ってみてください！
登録: 投稿 (Atom)

Recent Posts

Posts