Quiero una costumbre UIView
...: solo quería una vista en blanco en blanco con esquinas redondeadas y una sombra ligera (sin efecto de iluminación). Puedo hacer cada uno de los uno por uno, pero la costumbre clipToBounds
/ maskToBounds
ocurren conflictos.
iphone
ios
cocoa-touch
uiview
rounded-corners
Aditya Vaidyam
fuente
fuente
Respuestas:
El siguiente fragmento de código agrega un borde, radio de borde y sombra paralela a
v
, aUIView
:Puede ajustar la configuración para satisfacer sus necesidades.
Además, agregue el marco QuartzCore a su proyecto y:
Vea mi otra respuesta al respecto
masksToBounds
.Nota
Esto puede no funcionar en todos los casos. Si encuentra que este método interfiere con otras operaciones de dibujo que está realizando, consulte esta respuesta .
fuente
Rápido
Explorando las opciones
Problema 1: la sombra se corta
¿Qué sucede si hay subcapas o subvistas (como una imagen) cuyo contenido queremos recortar al límite de nuestra vista?
Podemos lograr esto con
(Alternativamente,
blueView.clipsToBounds = true
da el mismo resultado ).Pero, oh no! ¡La sombra también se cortó porque está fuera de los límites! ¿Qué hacer? ¿Qué hacer?
Solución
Use vistas separadas para la sombra y el borde. La vista base es transparente y tiene la sombra. La vista de borde recorta cualquier otro subcontenido que tenga a sus bordes.
Esto da el siguiente resultado:
Problema 2: bajo rendimiento
Agregar esquinas redondeadas y sombras puede ser un éxito de rendimiento. Puede mejorar el rendimiento utilizando una ruta predefinida para la sombra y también especificando que se rasterice. El siguiente código se puede agregar al ejemplo anterior.
Vea esta publicación para más detalles. Ver aquí y aquí también.
Esta respuesta se probó con Swift 4 y Xcode 9.
fuente
baseView.backgroundColor = UIColor.clear
elimina la sombra. Solo si configura un color de fondo lo verá.Una forma de hacerlo es colocar la vista con esquinas redondeadas en una vista con la sombra paralela.
Luego puedes agregar shadowView donde quieras.
fuente
Consulte el proyecto de ejemplo en GitHub para asegurarse de usar el componente correctamente.
Solución simple de Swift 5 sin subvistas o subclases adicionales:
Tenga en cuenta que debe configurar su vista con radio de esquina y otras propiedades antes de llamar
addShadow
.Después de eso, simplemente llame a esto de
viewDidLoad
esta manera:Resultado final:
Súper fácil y simple!
fuente
layer.shadowPath = UIBezierPath.init(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath
. Sin embargo, no puedo explicar por qué, ¿alguien tiene una explicación para eso?Esto funcionó para mí. El truco consistía en mover el color de fondo de la vista principal a la capa.
fuente
UIView extension
aquí - stackoverflow.com/a/43295741/1313939 ¡ gracias por la inspiración!Resolví el problema usando el siguiente truco al asignar la ruta de sombra para la vista de contenedor:
Observe que la ruta dada a la sombra es un rectángulo redondeado con el mismo radio de esquina que el fondo que contiene la celda:
fuente
Si estás luchando por el redondeado
corners
vs.subviews
vs.masksToBounds
, entonces intenta usar mi función:llámalo desde tu punto de vista. si su vista tiene esquinas redondeadas, sin importar su tamaño, su forma, se dibujará una bonita sombra.
Simplemente mantenga el valor de retorno de la función para que pueda consultarlo cuando desee eliminar la tabla (o, por ejemplo, usarla
insertSubview:aboveView:
)fuente
shadow.userInteractionEnabled = NO; // Modify this if needed
línea? Entonces este es el caso donde es necesario.userInteractionEnabled
es una propiedad básica y popular con la que ya debería estar familiarizado :-)Usando Swift 4 y Xcode 9 , este es un ejemplo práctico de redondear una
ImageView
con una sombra paralela y un borde.Si desea que la imagen sea circular: (y se muestra sin borde)
fuente
He creado un ayudante en UIView
puedes llamarlo asi
Aquí está la implementación
fuente
Después de un día entero de investigación de la vista de la esquina redonda con sombra, me complace publicar mi clase de uiview personalizada aquí, espero terminar esta pregunta:
RoundCornerShadowView.h
RoundCornerShadowView.m
por lo tanto, NO es necesario agregar una subvista en la vista o debajo en la vista de destino, solo agregue una capa en la vista actual y realice 3 pasos para completarla.
Eche un vistazo de cerca a los comentarios en el código, ¡es útil para comprender el componente!
fuente
Algo veloz probado en swift 4
Produce
Si lo habilita en el Inspector así:
Agregará el atributo de tiempo de ejecución definido por el usuario, lo que dará como resultado:
(Agregué previamente el
cornerRadius = 8
):)
fuente
Necesitas usar use
shadowView
yroundView
shadowView
roundView
shadowView
un poco adentro, y su sombra necesita brillar. Ajusta elinsets
modo para queshadowView
sea completamente invisible detrásroundView
roundView
El código
O simplemente puede hacer a continuación sin especificar
clipToBounds/maskToBounds
fuente
Swift 3 y solución IBI Inspectable:
inspirada en la solución de Ade
Primero, cree una extensión UIView:
Luego, simplemente seleccione su UIView en el generador de interfaz configurando la sombra ON y el radio de la esquina , como a continuación:
¡El resultado!
fuente
Aquí está la solución para el problema de conflicto masksToBounds, funciona para mí.
Después de configurar corderRadius / borderColor / shadow y así sucesivamente, establezca masksToBounds como NO:
fuente
Sombra + Borde + Radio de esquina
fuente
Aquí está mi versión en Swift 3 para una UIView
fuente
Swift 4: Crear subclase de UIView
Utilizando..
fuente
Bueno, si no desea cambiar sus puntas y ver la jerarquía como sugirió David C. este método lo hará por usted. Para agregar esquinas redondeadas y sombras a su UIImageView solo use este método, por ejemplo:
(!) Por razones de rendimiento, no creo que sea una buena idea usar este código en algo como UITableView, ya que este código cambia la jerarquía de la vista. Por lo tanto, sugeriré cambiar su punta y agregar una vista de contenedor para el efecto de sombra y usar el código Davic C.
fuente
Hilo antiguo aún actual ...
También he editado el método de Daniel Gindi para que sea posible usarlo con botones, etc. Si alguien necesita esquinas redondeadas o desea combinar esquinas redondeadas y un borde, debe establecerse en la capa de la vista que se pasa a este método. También configuré la rasterización para acelerarla un poco.
fuente
Lo siguiente funcionó mejor para mí (este código se encuentra en la extensión UIView, por lo que self denota alguna UIView a la que debemos agregar una sombra y una esquina redonda)
La principal diferencia entre este y otros ejemplos de código es que esto agrega la vista de sombra como una vista similar (en comparación con la adición de la vista actual como subvista de la vista de sombra), eliminando así la necesidad de modificar la jerarquía de vista existente de cualquier manera.
fuente
¡La respuesta anterior de daniel.gindi me sirvió! (+1 daniel) Sin embargo, tuve que hacer pequeños ajustes: cambiar el tamaño de shadowFrame para que sea el mismo que el tamaño del marco de la vista y permitir la interacción del usuario. Aquí está el código actualizado:
Me gustaría agregar que en mi caso, estaba tratando de agregar esto a un controlador de vista de terceros, es decir, no tenía control directo sobre el código. Entonces, así es como utilicé la función anterior:
fuente
Realizo algunos cambios en el código de daniel.gindi
Esto es todo lo que necesitas para que funcione.
fuente
Necesitas usar dos
UIViews
para lograr esto. UnoUIView
funcionará como sombra y otro funcionará para el borde redondeado.Aquí hay un fragmento de código a
Class Method
con la ayuda de aprotocol
:En el código anterior
btnCompose_click:
se convertirá en un@required
método delegado que se activará al hacer clic en el botón.Y aquí agregué un botón a mi
UIViewController
como este:El resultado se verá así:
fuente
He probado muchas soluciones de esta publicación y terminé con la siguiente solución. Esta es una solución de prueba completa a menos que necesite soltar sombra en una vista de color claro .
fuente
¡Aquí está la solución que funcionará con seguridad!
He creado la extensión UIView con los bordes necesarios para aplicar sombra como se muestra a continuación
Finalmente, puede llamar a la función de sombra como se muestra a continuación para cualquiera de sus subclases de UIView, también puede especificar el borde para aplicar sombra, pruebe diferentes variaciones según su necesidad de cambiar los parámetros de la llamada al método a continuación.
Imagen del resultado
fuente
La respuesta proporcionada por Evan Mulawski funcionará perfectamente. El problema es que debe establecer el color de fondo para la vista en clearColor y la propiedad masksToBounds en NO.
Puede establecer el color que desee para la vista, configurarlo como
Espero que esto ayude..
fuente
Así es como lo haces, con esquinas redondeadas y sombras redondeadas sin molestarte con los caminos.
La vista con contenido, en mi caso un UIImageView, tiene un radio de esquina y, por lo tanto, tiene que enmascararse hasta los límites.
Creamos otra vista de igual tamaño para las sombras, establecemos su maskToBounds en NO y luego agregamos la vista de contenido a la vista del contenedor (por ejemplo, shadowContainer).
fuente
Escribo este método de categoría UIView para resolver este problema, usa vistas separadas para la sombra y el radio de la esquina.
fuente
Solución Swift 4 para hacer que UICollectionViewCell sea redondo y agregar sombras , sin extensiones ni complicaciones :)
Nota: para vistas simples, por ejemplo, botones. Vea la respuesta de @ suragch en esta publicación. https://stackoverflow.com/a/34984063/7698092 . Probado con éxito para botones
En caso de que alguien todavía esté luchando por redondear las esquinas y agregar sombras al mismo tiempo. Aunque esta solución funciona con UICollectionViewCell, se puede generalizar a cualquier vista.
Esta técnica funcionó para mí sin hacer ninguna extensión y todas las cosas complicadas. Estoy trabajando con storyBoard.
Técnica
Debe agregar una UIView (digamos "containerView") dentro de su UICollectionViewCell en storyBoard y agregar todas las vistas requeridas (botones, imágenes, etc.) dentro de containerView. Ver la captura de pantalla.
Conecte la salida para containerView. Agregue las siguientes líneas de código en la función de delegado CellforItemAtIndexPath.
Salida
Ver el simulador Captura de pantalla
fuente
fuente