iOS: ¿Cómo agregar sombra paralela y sombra de trazo en UIView?

objective-c dropshadow

Question

Quiero agregar sombra y UIView sombra en UIView Esto es lo que mi diseñador me dio para aplicar sombra,

• Para la sombra, me dijo que usara RGB (176,199,226) con 90% de opacidad, distancia-3 y tamaño-5.

• Para la sombra del trazo, dijo que aplicara, RGB (209,217,226) de opacidad de tamaño 1 y 100%.

Esta es la pantalla de efectos aplicados por Photoshop,

La vista con la sombra requerida (salida esperada)

Intenté lo siguiente para obtener la sombra

viewCheck.layer.masksToBounds = NO;
viewCheck.layer.cornerRadius = 5.f;
viewCheck.layer.shadowOffset = CGSizeMake(.0f,2.5f);
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowOpacity = .9f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewCheck.bounds].CGPath;

Y este es el resultado de ello,

Tengo problemas para entender cómo puedo aplicar trazo y sombra paralela como se muestra en las capturas de pantalla de Photoshop (que he agregado arriba). ¿Cómo aplicar Distancia, Spread, Tamaño, Posición?

¿Puede alguien indicarme una guía para aplicar este tipo de sombras? ¡Se están produciendo muchos efectos de sombra y quiero aprender cómo puede ser posible en lugar de hacer cada una de las preguntas aquí!

Gracias :)

Answer 1

Creo que la mayor parte de la configuración que busca se puede lograr empleando la propiedad shadowPath .

viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;
UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath = shadowPath.CGPath;

Por ejemplo, al configurar shadowInsets esta manera

UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);

obtendrá una bonita sombra deseable:

Ahora puede decidir cómo desea que se construya el rectángulo de sombra mediante el control de las inserciones del rectángulo de trayectoria de sombra.

Answer 2

Lo siento, solo tengo la solución Swift pero aquí están mis extensiones UIView que utilizo para hacer esta tarea:

// MARK: Layer Extensions
extension UIView {
func setCornerRadius(#radius: CGFloat) {
self.layer.cornerRadius = radius
self.layer.masksToBounds = true
}
func addShadow(#offset: CGSize, radius: CGFloat, color: UIColor, opacity: Float, cornerRadius: CGFloat? = nil) {
self.layer.shadowOffset = offset
self.layer.shadowRadius = radius
self.layer.shadowOpacity = opacity
self.layer.shadowColor = color.CGColor
if let r = cornerRadius {
self.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: r).CGPath
}
}
func addBorder(#width: CGFloat, color: UIColor) {
self.layer.borderWidth = width
self.layer.borderColor = color.CGColor
self.layer.masksToBounds = true
}
func drawStroke(#width: CGFloat, color: UIColor) {
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.w, height: self.w), cornerRadius: self.w/2)
let shapeLayer = CAShapeLayer ()
shapeLayer.path = path.CGPath
shapeLayer.fillColor = UIColor.clearColor().CGColor
shapeLayer.strokeColor = color.CGColor
shapeLayer.lineWidth = width
self.layer.addSublayer(shapeLayer)
}
}

Nunca lo probé, pero puedes pegar este código en cualquier archivo Swift y probablemente llamarlos desde el código Obj-C.

Answer 3

Los siguientes son los pasos para el User Defined Runtime Attribute por el User Defined Runtime Attribute .

1. Abra un guión gráfico o un archivo xib en Interface Builder.
2. En Interface Builder, seleccione el objeto para agregar el atributo.
3. Seleccione Ver> Utilidades> Mostrar inspector de identidad.

El inspector de identidad aparece en el área de utilidad. Como se muestra a continuación, el editor de atributos de tiempo de ejecución definido por el usuario es uno de los elementos en el inspector.

4. Haga clic en el botón Agregar (+) en la parte inferior izquierda del editor de atributos de tiempo de ejecución definido por el usuario.

Answer 4

Para dar la frontera de UIView .

Agregue #import "QuartzCore/QuartzCore.h" trabajo de #import "QuartzCore/QuartzCore.h" .

myView.layer.cornerRadius = 15.0; // set as you want.
myView.layer.borderColor = [UIColor lightGrayColor].CGColor; // set color as you want.
myView.layer.borderWidth = 1.0; // set as you want.