はじめに
UILabelを角丸にしたいのに角丸にならない！という経験をしたことある人、結構多いんじゃないでしょうか？
label.layer.cornerRadius = 10
この時以下のように、1行追加すると途端に角丸になります。
label.layer.cornerRadius = 10
label.clipsToBounds = true
clipsToBounds=trueとは一体何なんでしょうか？
UILabelとUIButtonの構造の違い
混乱の原因となっているのはUIButtonの挙動で、こっちは1行で角丸になります。
button.layer.cornerRadius = 10
ここで、UILabelとUIButtonの構造をHierarchyを用いて観察してみます。
以下のように、layer.cornerRadiusのみ設定した状態だと画像のようになります。
label.layer.cornerRadius = 10
button.layer.cornerRadius = 10
やはりUILabelだけうまく角丸になりません。
ここで実行中に以下のボタンをクリックすることで構造を見ることができます。
ここで大事なのは、UIButtonのclipsToBoundsもfalseであること。それは以下のように確認されます。
そもそもclipsToBoundsは何をしている？
公式ドキュメントでは、
A Boolean value that determines whether subviews are confined to the bounds of the view.
とあります。
ここでのboundsとはViewの枠と捉えてよいので、（frameとは座標系の差しかない）、Viewの枠の外側に要素を描画するかどうかということになります。
外側にはみ出るとはどういう場合か、については、以下の記事が大変参考になります。
では、根本的な原因は何なのでしょうか。
構造が異なることが原因
ここで大事なのは、UILabelとUIButtonの層の数が異なるということです。
UIButtonはこのように3つの層からできており、一番後ろのView（UIButton）のSubviewとして_UISystemBackgroundViewとUILabelがあることが確認できます。
一方UILabelは一つしか層がありません。
さて、ここで以下の2行を追加して、UILabelのboundsを描画してみましょう。
label.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)
label.layer.borderWidth = 2.0
すると以下のようになります。
したがって、boundsはしっかり角丸になっているが、背景の要素がboundsをはみ出て描画されていることが原因だとわかります。
UIButtonが角丸になる原因の考察
UIKitのパーツは内部構造がブラックボックス化されているため完全な理由は分かりませんが、Hierarchyからヒントをもらうことは可能です。
最下層のViewをクリックすると、以下のような情報が出てきます。
UILabel
UIButton
UIButtonはただのCALayerで実装されていますが、UILabelは特注の_UILabelLayerなるもので実装されていることがわかります。
ここで、dump(button.layer)などしてみる（printでも可）と、button.layerでアクセスされるのはこのCALayerであることがわかります。
したがって、
- UIButton.layer.cornerRadiusは最下層のlayerを角丸にするため、boundsどおり角丸になる
- UILabel.layer.cornerRaduisでは、_UILabelLayerで背景とboundsが別の層にあると考えられ、bounds通りに角丸にならない
と考えられます。
UILabelを角丸にする方法
原理を理解したところで、角丸にする方法をおさらいしましょう。
layerを角丸にする
label.layer.cornerRadius = 10
label.clipsToBounds = true
また、layerをboundsの形に合わせるという処理として、
label.layer.cornerRadius = 10
label.layer.masksToBounds = true
ともかけます。
まとめ
UIViewの内部構造が秘匿されているため完全に原因を究明できないのが残念ですが、Hierarchyを駆使すればここまで構造を把握することができます。
ここまで理解できたら、clipsToBoundsと書くのも苦じゃないですね！