2013-08-23 10 views
12

私は円を作成しようとしていますUIImageView、それは動作します。私はUIImageViewにいくつかの影を追加したいと思い円にUIImageViewまたはUIViewを追加するにはどうすればよいですか?

[self.pic.layer setMasksToBounds:YES]; 
[self.pic.layer setCornerRadius:50.0]; 

:以下は、私はそれを作るために使用する方法です。次のコードでは、画像ビューに影を追加していますが、画像ビューは四角形に戻ります。誰かが私にこの問題を解決するためのいくつかの指針を与えることができますか?以下は、私は影を追加するために使用するコードです:

self.pic.layer.shadowColor = [UIColor purpleColor].CGColor; 
self.pic.layer.shadowOffset = CGSizeMake(0, 1); 
self.pic.layer.shadowOpacity = 1; 
self.pic.layer.shadowRadius = 1.0; 
self.pic.clipsToBounds = NO; 

答えて

34

CALayershadowPath propertyを使用して、正方形っぽいのために丸みを帯びた矩形でUIBezierPath

self.pic.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.pic.frame cornerRadius:50.0].CGPath; 

EDIT

を追加あなたが言ったように、画像ビューは正方形に戻ってしまうため、この手法は直接的には機能しません。理由:がcontainerのサブビューである場合、コーナー半径のクリッピングを除去する影を表示するようにclipsToBounds = NOを設定します。

回避方法:
コンテナビューでイメージビューを追加し、このコンテナにレイヤーシャドウを適用します。以下は私が試したコードです。スクリーンショットに示すように

[self.imageView.layer setCornerRadius:60.0]; 
[self.imageView.layer setMasksToBounds:YES]; 
self.imageView.clipsToBounds = YES; 

self.container.backgroundColor = [UIColor clearColor]; 
self.container.layer.shadowColor = [UIColor blackColor].CGColor; 
self.container.layer.shadowOffset = CGSizeMake(5,15); 
self.container.layer.shadowOpacity = 0.5; 
self.container.layer.shadowRadius = 2.0; 
self.container.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.container.bounds cornerRadius:100.0].CGPath; 

結果として効果が役に立てば幸い

enter image description here

、です!

+1

私のコードに示唆しているコード行を追加しましたが、動作しません。あなたは上記のコードをどのように活用するかについて詳しく説明できますか?ありがとうございました。 – Newbie

+0

@Newbie私の編集をチェックしてください。 – Amar

+0

@Newbie助けになりましたか? – Amar

-4
yourImageView.layer.masksToBounds = NO; 
yourImageView.layer.shadowOffset = CGSizeMake(5, 0); 
yourImageView.layer.shadowRadius = 5; 
yourImageView.layer.shadowOpacity = 0.5; 
yourImageView.layer.shadowPath = [UIBezierPath bezierPathWithRect:yourImageView.bounds].CGPath; 

コンテナなしではなく、ここで背景の景色を

+0

それは動作していません:( – Newbie

2

が迅速2.2の拡張として、私の2セント

image?.applyCircleShadow(5, shadowOpacity: 1) 
extension UIView { 
    func applyCircleShadow(shadowRadius: CGFloat = 2, 
          shadowOpacity: Float = 0.3, 
          shadowColor: CGColor = UIColor.blackColor().CGColor, 
          shadowOffset: CGSize = CGSize.zero) { 
     layer.cornerRadius = frame.size.height/2 
     layer.masksToBounds = false 
     layer.shadowColor = shadowColor 
     layer.shadowOffset = shadowOffset 
     layer.shadowRadius = shadowRadius 
     layer.shadowOpacity = shadowOpacity 
    } 
} 
extension UIImageView { 
    override func applyCircleShadow(shadowRadius: CGFloat = 2, 
            shadowOpacity: Float = 0.3, 
            shadowColor: CGColor = UIColor.blackColor().CGColor, 
            shadowOffset: CGSize = CGSize.zero) { 

     // Use UIImageView.hashvalue as background view tag (should be unique) 
     let background: UIView = superview?.viewWithTag(hashValue) ?? UIView() 
     background.frame = frame 
     background.backgroundColor = backgroundColor 
     background.tag = hashValue 
     background.applyCircleShadow(shadowRadius, shadowOpacity: shadowOpacity, shadowColor: shadowColor, shadowOffset: shadowOffset) 
     layer.cornerRadius = background.layer.cornerRadius 
     layer.masksToBounds = true 
     superview?.insertSubview(background, belowSubview: self) 
    } 
} 
+0

偉大な解決策が、私はなぜそれが7 + –

2

です...このコードを試してみてください誰でもお探しの場合Swift 3 or 4 working解決策:

let imageSize: CGFloat = 64.0 

    // Create a container which has a shadow 
    let imageCotainer = UIView(frame: CGRect(x: 0, y: 0, width: imageSize, height: imageSize)) 
    imageCotainer.clipsToBounds = false 
    imageCotainer.layer.shadowColor = UIColor.black.cgColor 
    imageCotainer.layer.shadowOpacity = 0.2 
    imageCotainer.layer.shadowOffset = CGSize(width: 0, height: 1) 
    imageCotainer.layer.shadowRadius = 2 

    // Create an image view that will be inserted into the container view 
    let imageView = UIImageView(frame: imageCotainer.bounds) 
    imageView.image = yourImage 
    imageView.clipsToBounds = true 
    let cornerRadius = imageView.frame.height/2 
    imageView.layer.cornerRadius = cornerRadius 

    // Draw a shadow 
    imageCotainer.layer.shadowPath = UIBezierPath(roundedRect: imageCotainer.bounds, cornerRadius: cornerRadius).cgPath 
    // Add image into container 
    imageCotainer.addSubview(imageView) 

時々、あなたはまた、コンテナの内部で画像の制約を設定する必要がありますが、それはいくつかのケースでもそれなしで動作する可能性があります。しかし、そうでない場合は、これを追加してください:

// Set constraints for the image inside the container view 
    imageView.translatesAutoresizingMaskIntoConstraints = false 
    imageView.topAnchor.constraint(equalTo: imageCotainer.topAnchor).isActive = true 
    imageView.leftAnchor.constraint(equalTo: imageCotainer.leftAnchor).isActive = true 
    imageView.rightAnchor.constraint(equalTo: imageCotainer.rightAnchor).isActive = true 
    imageView.bottomAnchor.constraint(equalTo: imageCotainer.bottomAnchor).isActive = true 
    imageView.heightAnchor.constraint(equalToConstant: imageSize).isActive = true 
    imageView.widthAnchor.constraint(equalToConstant: imageSize).isActive = true