この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Viewの四隅をふんわり丸めたいなということがあり、少しずつ角丸具合が違うViewを表現していき、その中からお気に入りの角丸を見つけることにしました。
今回はこちらの正方形ImageViewの四隅をふんわり角丸にしてきます。
さいしょに
今回はSwiftUIのRoundedRectangleについて触れるものではありません。SwiftのcornerRadiusの値を少しずつ変えていって変化を見ていきたいと思います。
開発環境
- Xcode 13
- Swift 5.5
丸にする
正方形の場合は縦または横の一辺の長さの50%の値をcornerRadiusに代入すると丸を表現することが出来ます。
awesomeImageView.layer.cornerRadius = awesomeImageView.frame.height / 2
Viewを角丸にする
Viewの角のエッジを変更するには、丸の時にやったことと同じようにcornerRadiusの値を変更することで実現できます。
今回は、ImageViewの一辺の長さの10%~100%までの値を代入していき、角丸の変化をみていきます。
// 例: cornerRadius 高さの10% の場合
awesomeImageView.layer.cornerRadius = awesomeImageView.frame.height * 0.1さて、自分好みの角丸を見つけることが出来るでしょうか？
理想的な角丸を探す
| 10% | 20% | 30% | 40% | 50% |
|---|---|---|---|---|
 |
 |
 |
 |
|
| 60% | 70% | 80% | 90% | 100% |
 |
 |
 |
 |
 |
様々なふんわり角丸が出揃いました。お眼鏡にかなう角丸は見つかりましたでしょうか？
60%以降からはもはや角丸ではない気がしますが、、。
個人的には30%くらいの角丸が可愛くて気になりました！
おわりに
角丸にもそれぞれに違いや、良いところがあることを知り、角丸の多様性を受け入れれるようになりました。
「みんな違って、みんな良い」
この角丸表が理想の角丸を探している人の助けになる日がくることを信じています、、。
10
