Hay muchas maneras de crear una vista con esquinas redondeadas o rounded corners en SwiftUI. Vamos a ver todas la formas que tenemos de redondear los bordes de una vista y así puedes escoger la que más te guste.
Esquinas redondeadas usando el modifier cornerRadius
Puedes crear esquinas redondeadas usando el modifier cornerRadius.
En el siguiente ejemplo:
Label("WiFi", systemImage: "wifi")
.padding()
.background(.blue)
.foregroundColor(.white)
.cornerRadius(10)El resultado sería el siguiente:
Usamos el modifier cornerRadius, disponible desde iOS 13 en adelante para crear unas esquinas redondeadas.
Esquinas Redondeadas usando el modifier clipShape
También podemos hacer unas esquinas redondeadas en SwiftUI usando el modifier clipShape. Este modifier recortará la vista modificada a una forma específica.
SwiftUI tiene muchas formas integradas que pueden producir esquinas redondeadas, por ejemplo, RoundedRectangle y Capsule.
En el siguiente ejemplo creamos esquinas redondeadas con estas formas integradas.
VStack {
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(.blue)
.clipShape(
RoundedRectangle(
cornerRadius: 10
)
)
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(.blue)
.clipShape(
Capsule()
)
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(.blue)
.clipShape(
RoundedRectangle(
cornerRadius: 20,
style: .continuous
)
)
}En Xcode el resultado sería el siguiente:
Esquinas redondeadas usando el background modifier
En este útlimo método creamos esquinas redondeadas usando el background modifier.
En el siguiente ejemplo creamos una vista de background usando la misma forma que usamos con clipShape y aplicamos su color con el modifier fill.
VStack {
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(
RoundedRectangle(cornerRadius: 8)
.fill(.blue)
)
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(
Capsule()
.fill(.blue)
)
Label("WiFi", systemImage: "wifi")
.padding()
.foregroundColor(.white)
.background(
RoundedRectangle(
cornerRadius: 20,
style: .continuous
)
.fill(.blue)
)
}Que en Xcode daría el siguiente resultado:
Desde iOS 15 el modifier background tuvo una actualización que hace que crear esquinas redondeadas sea mucho más fácil. El nuevo background nos permite especificar tanto el color como la forma del fondo.
De manera que no necesitamos especificar el modifier clipShape o fill cuando usamos el modifier background.
En este ejemplo lo podemos ver:
VStack {
Label("Bookmark", systemImage: "bookmark.fill")
.padding()
.foregroundColor(.white)
.background(
.pink,
in: RoundedRectangle(cornerRadius: 8)
)
Label("Bookmark", systemImage: "bookmark.fill")
.padding()
.foregroundColor(.white)
.background(
.pink,
in: Capsule()
)
Label("Bookmark", systemImage: "bookmark.fill")
.padding()
.foregroundColor(.white)
.background(
.pink,
in: RoundedRectangle(
cornerRadius: 20,
style: .continuous
)
)
}En Xcode daría el mismo resultado:
