web-dev-qa-db-ja.com

角が丸いUIImageViewの影を作成しますか？

丸みを帯びた角と影を付けて深さを与える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
}
iosswiftuiviewuiimageviewshadow
17
John Hodge

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)

結果は次のようになります。

enter image description here

74
nathangitter

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()
5
Hardik Thakkar

作成したシンプルなクラスを使用して、角丸のイメージとストーリーボードから直接影を追加できます

クラスを見つけることができます here

Swift_Shadow_ImageView

2
George Leonidas

2019年

最後に、ここに方法があります

丸みを帯びた角と影のある画像ビューを適切に使用します。

これは簡単です：

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 ...
    }
}

こちらが

説明

  1. UIImageViewは無用です。UIViewを使用します

  2. 影用と画像用の2つのレイヤーが必要です

  3. 画像レイヤーを丸めるには、maskを使用します

  4. シャドウレイヤーを丸めるには、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つの角のみを丸くする方法を示しています。）

概要

•UIViewで2つのレイヤーを使用する

あなたのベジェを作り、...

•イメージレイヤーでmaskを使用する

•シャドウレイヤーでpathを使用する

1
Fattie