ios - sombras - ¿Cuál es la mejor manera de agregar una sombra paralela a mi UIView?

sombra paralela illustrator cc 2018

Question

Intento agregar una sombra paralela a las vistas superpuestas, las vistas colapsan permitiendo que se vea contenido en otras vistas, en este sentido quiero mantener view.clipsToBounds activado para que cuando las vistas colapsen su contenido está recortado.

Esto parece haberme dificultado agregar una sombra clipsToBounds a las capas, ya que cuando clipsToBounds las sombras también se recortan.

He intentado manipular view.frame y view.bounds para agregar una sombra view.bounds al marco pero permitir que los límites sean lo suficientemente grandes como para abarcarlo, sin embargo, no he tenido suerte con esto.

Aquí está el código que estoy usando para agregar una sombra (esto solo funciona con clipsToBounds desactivados como se muestra)

view.clipsToBounds = NO;
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowOffset = CGSizeMake(0,5);
view.layer.shadowOpacity = 0.5;

Aquí hay una captura de pantalla de la sombra que se aplica a la capa gris más liviana. Espero que esto dé una idea de cómo mi contenido se superpondrá si clipsToBounds está desactivado.

¿Cómo puedo agregar una sombra a mi UIView y mantener mi contenido recortado?

Editar: Solo quería agregar que también he jugado con el uso de imágenes de fondo con sombras encendidas, lo que funciona bien, sin embargo, me gustaría saber cuál es la mejor solución codificada para esto.

Answer 1

El truco consiste en definir masksToBounds propiedad masksToBounds de la capa de tu vista:

view.layer.masksToBounds = NO;

y debería funcionar

( Source )

Answer 2

En viewWillLayoutSubviews:

override func viewWillLayoutSubviews() {
    sampleView.layer.masksToBounds =  false
    sampleView.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    sampleView.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    sampleView.layer.shadowOpacity = 1.0
}

Usando la extensión de UIView:

extension UIView {

    func addDropShadowToView(targetView:UIView? ){
        targetView!.layer.masksToBounds =  false
        targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
        targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
        targetView!.layer.shadowOpacity = 1.0
    }
}

Uso:

sampleView.addDropShadowToView(sampleView)

Answer 3

La respuesta de Wasabii en Swift 2.3:

    let shadowPath = UIBezierPath(rect: view.bounds)
    view.layer.masksToBounds = false
    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
    view.layer.shadowOpacity = 0.2
    view.layer.shadowPath = shadowPath.CGPath

Y en Swift 3/4:

    let shadowPath = UIBezierPath(rect: view.bounds)
    view.layer.masksToBounds = false
    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
    view.layer.shadowOpacity = 0.2
    view.layer.shadowPath = shadowPath.cgPath

Coloque este código en layoutSubviews () si está utilizando AutoLayout.

Answer 4

Prueba esto:

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:view.bounds];
view.layer.masksToBounds = NO;
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
view.layer.shadowOpacity = 0.5f;
view.layer.shadowPath = shadowPath.CGPath;

En primer lugar : UIBezierPath utilizado como shadowPath es crucial. Si no lo usa, es posible que al principio no note la diferencia, pero el ojo atento observará un cierto retraso durante eventos como girar el dispositivo y / o similar. Es un ajuste de rendimiento importante.

Respecto a su problema específicamente : la línea importante es view.layer.masksToBounds = NO . Deshabilita el recorte de las subcapas de la capa de la vista que se extienden más allá de los límites de la vista.

Para aquellos que se preguntan cuál es la diferencia entre masksToBounds (en la capa) y la propia propiedad clipToBounds la vista: realmente no hay ninguno. Alternar uno tendrá un efecto en el otro. Solo un nivel diferente de abstracción.

Swift 2.2:

override func layoutSubviews()
{
    super.layoutSubviews()

    let shadowPath = UIBezierPath(rect: bounds)
    layer.masksToBounds = false
    layer.shadowColor = UIColor.blackColor().CGColor
    layer.shadowOffset = CGSizeMake(0.0, 5.0)
    layer.shadowOpacity = 0.5
    layer.shadowPath = shadowPath.CGPath
}

Swift 3:

override func layoutSubviews()
{
    super.layoutSubviews()

    let shadowPath = UIBezierPath(rect: bounds)
    layer.masksToBounds = false
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
    layer.shadowOpacity = 0.5
    layer.shadowPath = shadowPath.cgPath
}

Answer 5

Puede crear una extensión para UIView para acceder a estos valores en el editor de diseño

extension UIView{

    @IBInspectable var shadowOffset: CGSize{
        get{
            return self.layer.shadowOffset
        }
        set{
            self.layer.shadowOffset = newValue
        }
    }

    @IBInspectable var shadowColor: UIColor{
        get{
            return UIColor(cgColor: self.layer.shadowColor!)
        }
        set{
            self.layer.shadowColor = newValue.cgColor
        }
    }

    @IBInspectable var shadowRadius: CGFloat{
        get{
            return self.layer.shadowRadius
        }
        set{
            self.layer.shadowRadius = newValue
        }
    }

    @IBInspectable var shadowOpacity: Float{
        get{
            return self.layer.shadowOpacity
        }
        set{
            self.layer.shadowOpacity = newValue
        }
    }
}

Answer 6

Puedes establecer sombra a tu vista desde el guión gráfico también