Jak dodać cień do koła UIImageView lub UIView?

Question

Próbuję utworzyć okrąg UIImageView i to działa. Poniżej znajduje się sposób mogę używać, aby go:

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

Chciałbym dodać cień do UIImageView. Poniższy kod dodaje trochę cienia do mojego widoku obrazu, ale widok obrazu zmienia się z powrotem w kwadratowy. Czy ktoś może mi dać wskazówki do rozwiązania tego problemu? Poniżej znajduje się kod za pomocą dodania ukrytego:

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; 

Answer 1

obsługi CALayer jest shadowPath property i dodać UIBezierPath z zaokrąglonymi rect

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

EDIT

Dla kwadratowymi widok obrazu ta technika nie działa bezpośrednio, ponieważ, jak powiedziałeś, widok obrazu powraca do kwadratu. Powód: Ustawiono clipsToBounds = NO, aby pokazać cień, który usuwa obcinanie dla promienia narożnika, gdzie imageView jest podrzędnym z container.

Obejście problemu: Dodaj widok obrazu w widoku kontenera, a następnie zastosuj cień warstwy do tego kontenera. Poniżej znajduje się kod, który próbowałem.

[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; 

Efekt wynikowy jest jak pokazano na zrzucie ekranu,

nadzieję, że pomoże!

Answer 2

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; 

spróbuj tego kodu ...

Answer 3

Bez pojemnika, ale z myślą tle Oto mój 2 centy

W szybkiej 2.2 przedłużenie

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

Answer 4

Jeśli ktoś szuka Swift 3 lub 4 pracuje rozwiązanie:

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) 

Czasem trzeba także ustawić ograniczenia dla obrazu wewnątrz pojemnika, ale może pracować bez niego też w niektórych przypadkach. Ale jeśli nie jest, dodaj to:

// 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