こんにちは、オフィス狛 モバイル開発担当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で部分的に角丸を設定できるようになります。 細かい角丸の設定が必要な際は使ってみてください!
ios
0 件のコメント:
コメントを投稿