背景
iOS11 より、 View の四隅を丸める際に maskedCorners を指定することで、一部だけに cornerRadius を設定することが可能となりました。
コード上での設定するとなると
view.layer.cornerRadius = 16
view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXminYCorner]
となるのですが、レイアウトを Interface Builder で組んでいる場合、このためだけにコード側で処理するのは面倒なため、 Interface Builder 上で maskedCorners の設定が完結することを目指します。
設定方法
Interface Builder 上の User Defined Runtime Attributes にて、 layer.maskedCorners の Key Path に対して、 15 までの Number を設定することで対応が可能となります。
| IB 上の設定 | 表示 |
|---|---|
 |
 |
maskedCorners の型である CACornerMask は protocol OptionSet に準拠することによって、複数のフラグ設定を UInt のビットフラグ表現で保持できるような実装となっています。
ビットフラグとしては、
-
layerMinXMinYCorner(左上) -
layerMaxXMinYCorner(右上) -
layerMinXMaxYCorner(左下) -
layerMaxXMaxYCorner(右下)
の4つを取るため、 $0 〜 (2^4 - 1)$ の値によって、 maskedCorners: CACornerMask を表現できます。
早見表
以下に maskedCorners: CACornerMask に数値を設定する場合の対応をまとめました。
| 値 | 右下MaxXMaxY
|
左下MinXMaxY
|
右上MaxXMinY
|
左上MinXMinY
|
表示 |
|---|---|---|---|---|---|
| 0 | − | − | − | − |  |
| 1 | − | − | − |  |
 |
| 2 | − | − | |
− |  |
| 3 | − | − | |
|
 |
| 4 | − | |
− | − |  |
| 5 | − | |
− | |
 |
| 6 | − | |
|
− |  |
| 7 | − | |
|
|
 |
| 8 | |
− | − | − |  |
| 9 | |
− | − | |
 |
| 10 | |
− | |
− |  |
| 11 | |
− | |
|
 |
| 12 | |
|
− | − |  |
| 13 | |
|
− | |
 |
| 14 | |
|
|
− |  |
| 15 | |
|
|
|
 |