私は数年間アプリケーションの開発に取り組んでおり、UIView の角を丸くしてドロップ シャドウを追加するというシンプルなデザイン リクエストを受け取りました。以下のように実行します。
カスタムが必要ですUIView...: 角が丸く、明るいドロップ シャドウ (照明効果なし) が付いた空白の白いビューが欲しかっただけです。これらを 1 つずつ実行することはできますが、いつものようにclipToBounds競合maskToBoundsが発生します。
編集者注: この非常に古い質問は、iOS の変更により完全に時代遅れになっていることに注意してください (何年も前)。
ベストアンサー1
迅速
// corner radius
blueView.layer.cornerRadius = 10
// border
blueView.layer.borderWidth = 1.0
blueView.layer.borderColor = UIColor.black.cgColor
// shadow
blueView.layer.shadowColor = UIColor.black.cgColor
blueView.layer.shadowOffset = CGSize(width: 3, height: 3)
blueView.layer.shadowOpacity = 0.7
blueView.layer.shadowRadius = 4.0
選択肢を探る
問題1: 影が切り取られる
サブレイヤーまたはサブビュー (画像など) のコンテンツをビューの境界にクリップしたい場合はどうすればよいでしょうか?
これを達成できるのは
blueView.layer.masksToBounds = true
blueView.clipsToBounds = true（あるいは、同じ結果。
しかし、ああ、だめだ！影も境界外にあるため切り取られてしまいました！どうすればいいのでしょうか？どうすればいいのでしょうか？
解決
影と境界線には別々のビューを使用します。ベース ビューは透明で、影があります。境界線ビューは、境界線にあるその他のサブコンテンツをクリップします。
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
次のような結果が得られます。
問題2: パフォーマンスが低い
丸い角と影を追加すると、パフォーマンスが低下する可能性があります。影に定義済みのパスを使用し、ラスタライズするように指定することで、パフォーマンスを向上させることができます。次のコードを上記の例に追加できます。
baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale
この回答は Swift 4 と Xcode 9 でテストされました。