丸みを帯びた角と影を付けて深さを与えるImageView
を作成しようとしています。 UIImageView
の影を作成できましたが、角を丸くするようにコードを追加したときは、影のない丸い角しかありませんでした。 IBOutlet
という名前のmyImage
があり、それはviewDidLoad
関数の内部にあります。誰かがそれを機能させる方法についてのアイデアを持っていますか?何が間違っていますか?
override func viewDidLoad() {
super.ViewDidLoad()
myImage.layer.shadowColor = UIColor.black.cgColor
myImage.layer.shadowOpacity = 1
myImage.layer.shadowOffset = CGSize.zero
myImage.layer.shadowRadius = 10
myImage.layer.shadowPath = UIBezierPath(rect: myImage.bounds).cgPath
myImage.layer.shouldRasterize = false
myImage.layer.cornerRadius = 10
myImage.clipsToBounds = true
}
clipsToBounds
をtrue
に設定すると、角は丸くなりますが、影は表示されなくなります。これを解決するために、2つのビューを作成できます。コンテナビューには影があり、サブビューには丸い角が必要です。
コンテナビューにはclipsToBounds
がfalse
に設定されており、シャドウプロパティが適用されています。影も丸くしたい場合は、UIBezierPath
とroundedRect
を取り込むcornerRadius
コンストラクターを使用します。
let outerView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
outerView.clipsToBounds = false
outerView.layer.shadowColor = UIColor.black.cgColor
outerView.layer.shadowOpacity = 1
outerView.layer.shadowOffset = CGSize.zero
outerView.layer.shadowRadius = 10
outerView.layer.shadowPath = UIBezierPath(roundedRect: outerView.bounds, cornerRadius: 10).cgPath
次に、コンテナビューと同じサイズになるように画像ビュー(またはその他の種類のUIView
)を設定し、clipsToBounds
をtrue
に設定して、cornerRadius
。
let myImage = UIImageView(frame: outerView.bounds)
myImage.clipsToBounds = true
myImage.layer.cornerRadius = 10
最後に、画像ビューをコンテナビューのサブビューにすることを忘れないでください。
outerView.addSubview(myImage)
結果は次のようになります。
Swift 2.の別のソリューション(テスト済みコード)です
ClipsToBoundsをtrueに設定すると、角は丸くなりますが、影は表示されなくなります。したがって、imageviewの背後にあるストーリーボードに同じサイズのUIViewを追加し、そのビューに影を付けることができます
Swift 2.
outerView.layer.cornerRadius = 20.0
outerView.layer.shadowColor = UIColor.blackColor().CGColor
outerView.layer.shadowOffset = CGSizeMake(0, 2)
outerView.layer.shadowOpacity = 1
outerView.backgroundColor = UIColor.whiteColor()
最後に、ここに方法があります
これは簡単です:
class ShadowRoundedImageView: UIView {
@IBInspectable var image: UIImage? = nil {
didSet {
imageLayer.contents = image?.cgImage
shadowLayer.shadowPath = (image == nil) ? nil : shapeAsPath }}
var imageLayer: CALayer = CALayer()
var shadowLayer: CALayer = CALayer()
var shape: UIBezierPath {
return UIBezierPath(roundedRect: bounds, cornerRadius:50) }
var shapeAsPath: CGPath {
return shape.cgPath }
var shapeAsMask: CAShapeLayer {
let s = CAShapeLayer()
s.path = shapeAsPath
return s }
override func layoutSubviews() {
super.layoutSubviews()
clipsToBounds = false
backgroundColor = .clear
self.layer.addSublayer(shadowLayer)
self.layer.addSublayer(imageLayer) // (in that order)
imageLayer.frame = bounds
imageLayer.contentsGravity = .resizeAspectFill // (as preferred)
imageLayer.mask = shapeAsMask
shadowLayer.shadowPath = (image == nil) ? nil : shapeAsPath
shadowLayer.shadowOpacity = 0.80 // etc ...
}
}
こちらが
UIImageViewは無用です。UIViewを使用します
影用と画像用の2つのレイヤーが必要です
画像レイヤーを丸めるには、maskを使用します
シャドウレイヤーを丸めるには、pathを使用します
シャドウの品質については、明らかに適切なコードを追加してください
shadowLayer.shadowOffset = CGSize(width: 0, height: 20)
shadowLayer.shadowColor = UIColor.purple.cgColor
shadowLayer.shadowRadius = 5
shadowLayer.shadowOpacity = 0.80
実際の形状(bezパス)については、任意の形状にします。
(たとえば、このヒント https://stackoverflow.com/a/41553784/294884 は、1つまたは2つの角のみを丸くする方法を示しています。)
概要
あなたのベジェを作り、...