Crear interfaces de usuario exquisitas y ricas en aspectos destacados puede ser una prueba alucinante de reglas y estimaciones. Para algunos, es una tarea abrumadora. Sea como fuere, no tiene por qué ser así.
Hoy investigaremos una de las partes más básicas del plan en SwiftUI: las formas o shapes. En términos de interfaz de usuario, el uso de variedades es una de las mejores formas de transmitir datos, realizar un orden visual y mejorar el aspecto general de una aplicación. Es más, ocuparse de los negocios nunca ha sido tan sencillo.
Este artículo explicará diferentes enfoques para incorporar formas en SwiftUI, incorporando el trabajo con tonos de marco, creando tonos personalizados y aplicando diversos estilos al texto y las formas.
La mayoría de las formas subyacentes en SwiftUI reconocen su tamaño propuesto y llenan el tamaño propuesto. El círculo es el caso especial; informará continuamente un tamaño cuadrado. Podemos ver los tamaños detallados en el siguiente ejemplo al habilitar la línea, que visualiza el cuadro de salto de la forma.
Naturalmente, una forma se rellena utilizando el estilo de vista más cercana. Podemos utilizar relleno o agregar un trazo a la forma. Un trazo sigue la forma, dibujando la mitad del ancho de la línea más allá de los límites.
A diferencia de las pilas, las formas ocupan el espacio más extremo. Para variarlos, utiliza relleno y color de primer plano en lugar de base. Son perfectos para cortar sustancia y establecer un estilo límite.
SwiftUI nos proporciona cinco formas integradas de uso frecuente: cápsula, círculo, elipse, rectángulo , rectángulo redondeado. Dependiendo de los tamaños que elijas, estos tres últimos en particular actúan de manera ligeramente diferente, pero podemos mostrarte todas las alternativas con solo un ejemplo:
struct ContentView: View {
var body: some View {
VStack {
Rectangle()
.fill(.red)
.frame(width: 200, height: 200)
RoundedRectangle(cornerRadius: 25)
.fill(.green)
.frame(width: 200, height: 200)
UnevenRoundedRectangle(cornerRadii: .init(topLeading: 100, topTrailing: 100))
.fill(.orange)
.frame(width: 100, height: 100)
Capsule()
.fill(.yellow)
.frame(width: 100, height: 50)
Ellipse()
.fill(.blue)
.frame(width: 100, height: 50)
Circle()
.fill(.white)
.frame(width: 100, height: 50)
}
}
}Eso ilustra las seis formas. No obstante, las cinco formas se verán en el resultado debido a las variaciones en el comportamiento de dibujo de las formas.
En XCode quedaría de la siguiente manera:
Rectangle crea un cuadro con precisamente las medidas que proporcionas. Si bien la mayoría de los componentes de SwiftUI, por ejemplo, las pilas, los colores y los ángulos, comienzan como formas cuadradas, no son formas.
RoundedRectangle hace las mismas funciones, pero le permite ajustar cuánto redondear las esquinas. Puede elegir entre las esquinas significativamente más suaves (.continuous) de Apple o las tradicionales esquinas redondeadas (.circular) con su segunda opción, estilo. Desde iOS 13 hasta iOS 16, el valor predeterminado era circular; sin embargo, a partir de iOS 17, esto cambia a continuo. RoundedRectangle acompaña valiosas propiedades de estilo y cornerRadius. Es perfecto para crear botones y producir las esquinas suaves de iOS.
UnevenRoundedRectangle con sólo algunas esquinas redondeadas se llama rectángulo redondeado desigual. Para cada esquina, el valor predeterminado es 0, pero puedes anular tantas como quieras para crear un efecto único.
Dependiendo de cuál sea más grande, la cápsula crea una caja con un eje de borde completamente redondeado. Dado que nuestra forma es de 100 por 50, sus bordes superior e inferior serán rectos y sus bordes izquierdo y derecho serán redondeados.
Ellipse crea una elipse con las medidas precisas que usted proporciona. La elipse se parece a un círculo, aunque sin la proporción ideal de 1:1. Cuando el ancho y el nivel son diferentes, ocupará el espacio y se deformará.
Capsule es una cápsula. Al igual que RoundedRectangle, el estuche tiene forma de píldora. Cada remate de la caja está formado por un semicírculo. Puedes usarlos para botones.
Circle crea una elipse con igual altura y ancho, por lo tanto, si le damos al espacio 100 por 50, en realidad recibiremos 50 por 50. El círculo te permite dibujar una forma redonda ideal. La forma redonda tendrá una anchura equivalente al número más modesto entre anchura y nivel.