uiview - ¿No se puede establecer CornerRadius AND shadow on layer que tenga una vista de imagen extendida a sus límites?

core-animation uiimageview

Question

Esto me está parando. Tengo un UIView (llámelo "padre"). La subvista inferior de esa vista es un UIImageView (llámelo "hijo"), cuyo marco ocupa la totalidad de los límites "principales".

Quiero redondear las esquinas en la vista "principal" y establecer una sombra paralela. Hago esto en el CALayer de "padre" como de costumbre:

[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];
[[parent layer] setCornerRadius:6];

Esto muestra la sombra correctamente, pero no redondea las esquinas.

Aquí está el kicker:

1. Si elimino la vista de imagen "secundaria", o la contrajo para que no ocupe todos los límites de la vista "primaria", obtengo las esquinas redondeadas y la sombra correctamente en la matriz.
2. Si dejo el "hijo" solo pero pongo "clipsToBounds" en la vista "padre", obtengo las esquinas correctamente. Pero ahora la sombra se ha ido.
3. Establecer el radio de la esquina en la capa del niño también parece no tener efecto.

Parece que la vista de la imagen "secundaria" simplemente está oscureciendo las esquinas redondeadas de la vista "primaria", ya que ocupa todo el rectángulo, y el recorte basado en la vista principal obtiene las esquinas, pero también se enmascara de la sombra. No estoy seguro de por qué el # 3 no funciona.

¿Qué me estoy perdiendo? ¿He estado pasando por alto algo obvio al mirar esto demasiado tiempo?

Gracias.

(Sorprendentemente, la etiqueta "roundedcorners-dropshadow" ya existe. Impresionante.)

Answer 1

¿Ha intentado establecer los límites de la UIImageView secundaria para que también tenga esquinas redondeadas? Tal vez entonces no anularía la sombra de la vista del contenedor. Sólo un pensamiento, no estoy seguro de si funcionará.

Answer 2

Con Swift 3, puede elegir uno de los dos fragmentos de código siguientes para establecer cornerRadius y shadow en una vista de imagen o en una vista que contenga una capa de imagen.

# 1. Usando UIView , CALayer y Spring and Struts

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// constants
let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
let frame = CGRect(x: 0, y: 0, width: 200, height: 200)
// custom view
let customView = UIView(frame: frame)
customView.contentMode = .scaleAspectFill
// image layer
let imageLayer = CALayer()
imageLayer.contentsGravity = kCAGravityResizeAspectFill
imageLayer.contents = UIImage(named: "image")!.cgImage
imageLayer.masksToBounds = true
imageLayer.frame = frame
imageLayer.cornerRadius = radius
imageLayer.masksToBounds = true
// rounded layer
let roundedLayer = CALayer()
roundedLayer.shadowColor = UIColor.darkGray.cgColor
roundedLayer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
roundedLayer.shadowOffset = CGSize(width: offset, height: offset)
roundedLayer.shadowOpacity = 0.8
roundedLayer.shadowRadius = 2
roundedLayer.frame = frame
// views and layers hierarchy
customView.layer.addSublayer(imageLayer)
customView.layer.insertSublayer(roundedLayer, below: imageLayer)
view.addSubview(customView)
// layout
customView.center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
customView.autoresizingMask = [UIViewAutoresizing.flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin]
}
}

# 2. Usando UIView , UIImageView , CALayer y Auto Layout

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// constants
let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
// image view
let imageView = UIImageView(image: UIImage(named: "image"))
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = radius
imageView.layer.masksToBounds = true
// rounded view
let roundedView = UIView()
roundedView.layer.shadowColor = UIColor.darkGray.cgColor
roundedView.layer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
roundedView.layer.shadowOffset = CGSize(width: offset, height: offset)
roundedView.layer.shadowOpacity = 0.8
roundedView.layer.shadowRadius = 2
// views hierarchy
roundedView.addSubview(imageView)
view.addSubview(roundedView)
// layout
imageView.translatesAutoresizingMaskIntoConstraints = false
roundedView.translatesAutoresizingMaskIntoConstraints = false
roundedView.widthAnchor.constraint(equalToConstant: dimension).isActive = true
roundedView.heightAnchor.constraint(equalToConstant: dimension).isActive = true
imageView.widthAnchor.constraint(equalTo: roundedView.widthAnchor).isActive = true
imageView.heightAnchor.constraint(equalTo: roundedView.heightAnchor).isActive = true
roundedView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
roundedView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
imageView.centerXAnchor.constraint(equalTo: roundedView.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: roundedView.centerYAnchor).isActive = true
}
}

Ambos fragmentos de código generan la siguiente visualización:

Puede encontrar más formas de combinar imágenes con esquinas redondeadas y sombras en este repositorio de Github .

Answer 3

Necesitará dos vistas anidadas, la interior con esquinas redondeadas y recorte a encuadernación, y la vista exterior con la sombra (y, por lo tanto, no recorte). En su caso, la vista interna y externa probablemente será "secundaria" y "primaria", pero supongo que no estableció los valores de recorte correctos para estas vistas.

Vea la respuesta en ¿Por qué masksToBounds = YES previene la sombra de CALayer? .

Answer 4

Normalmente, tiene que configurar clipsToBounds para que tenga esquinas redondeadas, pero como desea conservar la sombra, también debe redondear las esquinas de la sombra. ¿Has intentado configurar la ruta de la sombra utilizando una ruta de bezier? Mantenga clipsToBounds / masksToBounds a los valores predeterminados, NO. Algo como:

 [[parent layer] setCornerRadius:6.0f];
[[parent layer] setShadowPath:
[[UIBezierPath bezierPathWithRoundedRect:[parent bounds]
cornerRadius:6.0f] CGPath]];

Answer 5

Si desea una capa de sombra con un radio de esquina para la visualización de la imagen, es la mejor solución poner una vista de la vista de una vista como una subvista con un margen de 1 punto ... y

 imgBrandLogo.backgroundColor = UIColor.blue
imgBrandLogo.layer.cornerRadius = imgBrandLogo.frame.height/2
imgBrandLogo.clipsToBounds = true
viewBrandLogo.layer.shadowColor = UIColor(rgb:0x262626,alpha:0.24).cgColor
viewBrandLogo.layer.shadowOffset = CGSize(width: 0, height: 1)
viewBrandLogo.layer.shadowOpacity = 1
viewBrandLogo.layer.shadowPath = UIBezierPath(roundedRect:imgBrandLogo.bounds , cornerRadius: imgBrandLogo.frame.height/2).cgPath
viewBrandLogo.backgroundColor = UIColor.clear.withAlphaComponent(0.0)