É frecuente que desexemos personalizar as vistas proporcionadas por SwiftUI.

Estes cambios realízanse aplicando modificadores ás vistas ou subvistas.

Todas as vistas de SwiftUI teñen conxuntos de modificadores que se poden aplicar para facer cambios de aparencia e comportamento.

• Estes modificadores toman a forma de métodos que se chaman na instancia da vista e esencialmente envolven a vista orixinal dentro doutra vista que aplica os cambios necesarios.
• Isto significa que os modificadores pódense encadear para aplicar múltiples modificacións á mesma vista.

Así, neste exemplo:

• Cambiamos o tamaño e o cor da fonte do texto «Ola mundo!»
• Do mesmo xeito, facemos que a imaxe do coche sexa redimensionable, coa relación de aspecto establecida para que se axuste proporcionalmente dentro do espazo dispoñible e a pomos de cor azul:

font – Tipo de letra #

Para modificar o estilo do texto, empregamos o método .font(estilo) ao que lle pasamos o estilo que queremos empregar

No exemplo anterior visto a fonte utilizada para mostrar texto declarouse utilizando un estilo de texto integrado (neste caso, o estilo de título grande).

iOS proporciona unha forma para que o usuario seleccione un tamaño de texto preferido que se pode configurar nun dispositivo a través de «Axustes → Mostrar → Brillo → Pantalla → Tamaño do texto», que proporciona un control deslizante para axustar o tamaño da fonte.

Apple recomenda que as aplicacións de terceiros tamén se axusten ao tamaño de texto elixido polo usuario

Estilos de texto do sistema #

As seguintes opcións de estilo de texto están dispoñibles actualmente:

• .largeTitle: Texto grande
• .title: Título 1
• .title2: Título 2
• .title3: Título 3
• .headline: Cabeceira
• .subheadline: Sutítulo
• .body: Corpo
• .callout: Chamada
• .footnote: Pé de páxina
• .caption
• .caption2

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Título grande").font(.largeTitle)
            Text("Título").font(.title)
            Text("Título 2").font(.title2)
            Text("Título 3").font(.title3)
            Text("Cabeceira ou titular").font(.headline)
            Text("Subtítulo").font(.subheadline)
            Text("Corpo").font(.body)
            Text("Chamada").font(.callout)
            Text("Nota ao pé de páxina").font(.footnote)
        }
    }
}

border – Borde #

Para por un borde a unha vista, empregamos o modificador .border(cor) ao que lle pasamos a cor que queremos empregar a través da enumeración Color

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Título con borde vermello")
                .border(Color.red)
        }
    }
}

padding – Espazo ao redor (marxe interno ou recheo) #

O padding é o marxe interno dun texto, é dicir, a distancia entre o teño ao seu borde.

Podemos aumentar o marxe interno (padding) dun texto mediante o modificador .padding()

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Título sen padding (marxen interno)")
                .border(Color.red)
            Text("Título CON padding (marxen interno)")
                .padding()
                .border(Color.red)
        }
    }
}

En SwiftUI, podemos controlar o espazo ao redor das vistas a través do modificador .padding(valor).

En todas as propiedades lle podes especificar un valor do espazo en puntos (por exemplo, .padding(.all, 20)). Algúns dos tipos de padding son:

• .padding() ou .padding(.all): Agrega un espazo uniforme ao redor.
• .padding(.leading): Agrega espazo só á beira esquerda.
• .padding(.trailing): Agrega espazo só á beira dereita.
• .padding(.top): Agrega espazo só na parte superior.
• .padding(.bottom): Agrega espazo só na parte inferior.
• .padding(.horizontal): Engade espazo aos lados esquerdo e dereito.
• .padding(.vertical): Engade espazo arriba e abaixo.

Tede en conta onde se pon o modificador, no seguinte exemplo, poñemos un modificador .padding() antes do borde e outro despois. O primeiro .padding() agrega espazo ao redor do texto e o segundo, como está definido despois do borde, agrega espazo despois do borde:

Text("Diego Rodicio")
                .padding()
                .border(.green)
                .padding()

Vexámos agora un exemplo:

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Sen padding (marxen interno)")
                .border(Color.red)
            
            Text("Padding por defecto")
                .padding()
                .border(Color.black)
            
            Text("Padding 30 en todos os lados")
                .padding(.all,30)
                .border(.yellow)
            
            Text("Padding esquerdo + marxen por defecto")
                .padding(.leading)
                .border(.blue)
                .padding()
            
            Text("Padding dereito + marxen por defecto")
                .padding(.trailing)
                .border(.green)
                .padding()
            
            Text("Padding horizontal")
                .padding(.horizontal)
                .border(.black)
            
            Text("Padding vertical")
                .padding(.vertical)
                .border(.red)
        }
    }
}

frame #

De forma predeterminada, unha vista dimensionarase automaticamente en función do seu contido e os requisitos de calquera deseño no que poida estar incrustada.

Aínda que se pode lograr moito utilizando Stacks para controlar o tamaño e o posicionamento dunha vista, ás veces requírese que unha vista sexa dun tamaño específico ou que se axuste a un rango de dimensións de tamaño.

Para abordar esta necesidade, SwiftUl inclúe os Frames que se empregan como modificador .frame() sobre as vistas.

Así, no seguinte exemplo, temos dous textos, o primeiro nun frame (borde azul) de dimensións 100×100 e o segundo (borde vermello) de dimensións 200×200:

Alto e ancho mínimos dun frame #

En moitos casos, como cando o contido dunha vista cambia dinamicamente, as dimensións fixas pode causar problemas, por exemplo, podería facer que o contido se trunque:

Isto pódese resolver creando un marco con dimensións mínimas e máximas:

Text("Gústame os almendrados")
   .frame(minWidth: 100, maxWidth: 300, minHeight: 100,maxHeight: 300, alignment: .center)

Agora que o frame ten certa flexibilidade, a vista se dimensionará para acomodar o contido dentro dos límites mínimos e máximos definidos.

GeometryReader: Tamaño relativo do frame #

Os frames tamén se poden implementar para que teñan un tamaño relativo ao tamaño do contedor dentro do cal está incrustada a vista correspondente.

Isto lógrase envolvendo a vista nun GeometryReader

O seguinte exemplo utiliza un frame para establecer as dimensións de dúas vistas de texto en relación co tamaño do VStack que o contén. A vista de texto superior está configurada para ocupar a metade do ancho e tres cuartas partes da altura da pila, mentres que a vista de texto inferior ocupa un terzo do ancho e un cuarto da altura:

GeometryReader {
            tamaño_VStack in
            
            VStack {
                Text("Gústame os almendrados")
                    .frame(width: tamaño_VStack.size.width/2, height: (tamaño_VStack.size.height/4)*2)
                    .border(.blue)
                Text("Gústame os almendrados (200x200)")
                    .frame(width: tamaño_VStack.size.width/3, height: tamaño_VStack.size.height/4)
                    .border(.red)
            }
        }

foregroundColor – Cor de texto #

Para por un cor a un texto, empregamos o modificador .foregroundColor(cor) ao que lle pasamos a cor que queremos empregar a través da enumeración Color.

background – Cor de fondo #

Para por un cor a un texto, empregamos o modificador .background(cor) ao que lle pasamos a cor que queremos empregar a través da enumeración Color.

cornerRadius – Forma dos bordes #

Para curvar unha vista, empregamos o modificador .borderRadius(valor_radio) ao que lle pasamos o radio da curvatura.

shadow – Sombra #

O modificador .shadow úsase para agregar unha sombra a unha vista. A sombra pódese definir cunha combinación de parámetros, como o radio (radius:), desprazamento da sombra (x: e y: ) e a cor(color:).

opacity – Opacidade #

Mediante o modificador .opacity(opacidade entre 1.0 e 0.0) podemos modificar a opacidade dunha vista ou dunha cor.

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        ZStack {
            Image("fotoPerfilDiego")
                .resizable()
                .scaledToFit()
            
            VStack {
                Text("Texto e fondo opaco")
                    .frame(minWidth: 100, minHeight: 40)
                    .foregroundColor(.white)
                    .background(.black)
                    .cornerRadius(4)
                
                Text("Texto semitransparente (40% de opacidad)")
                    .frame(minWidth: 100, minHeight: 40)
                    .foregroundColor(.white)
                    .cornerRadius(4)
                    .background(.black)
                    .opacity(0.4)
                
                Text("Texto con fondo semitransparente (40% de opacidad)")
                    .frame(minWidth: 100, minHeight: 40)
                    .foregroundColor(.white)
                    .cornerRadius(4)
                    .background(Color.black.opacity(0.4))
            }
        }
    }
}

rotationEffect – Rotación #

Mediante o modificador .rotationEffect(.degrees(grados_rotación)) podemos rotar unha vista.

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Texto rotado -45º")
                .frame(minWidth: 100, minHeight: 40)
                .foregroundColor(.white)
                .background(.black)
                .cornerRadius(4)
                .padding(80)
                .rotationEffect(.degrees(-45))
                
                        
            Image("fotoPerfilDiego")
                .resizable()
                .scaledToFit()
                .frame(width: 200)
                .rotationEffect(.degrees(45))
            
        }
    }
}

scaleEffect – Axusta o tamaño #

Mediante o modificador .scaleEffect(% de escalado) ou .scaleEffect(x: % de escalado horizontal, y: % de escalado vertical) podemos escalar unha vista en tamaño.

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Text("Texto sin escalar")
                .foregroundColor(.white)
                .background(.black)
                .cornerRadius(4)
                .padding()
            
            Text("Texto escalado ao 150%")
                .foregroundColor(.white)
                .background(.black)
                .cornerRadius(4)
                .scaleEffect(1.5)
                
            Image("fotoPerfilDiego")
                .resizable()
                .scaleEffect(x: 0.5, y: 0.3)
            
            Image("fotoPerfilDiego")
                .resizable()
                .scaleEffect(0.4)
        }
    }
}

scaledToFit – Escalar para encaixar #

Mediante o modificador .scaleToFit() podemos escalar unha vista a un tamaño específico. Sobre todo se emprega en imaxes para escalala nos límites da vista na que esté sen distorsionar o seu aspecto orixinal.

No seguinte exemplo escalamos dúas imaxes:

• Unha nun marco de 200px de ancho
• A segunda nun marco de 300px de ancho

Fixádevos que non se distorsionan os seus aspectos orixinais.

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Image("fotoPerfilDiego")
                .resizable()
                .scaledToFit()
                .frame(width: 200)
            
            Image("fotoPerfilDiego")
                .resizable()
                .scaledToFit()
                .frame(width: 300)
        }
    }
}

overlay – Vista encima doutra #

Mediante o modificador .overlay(vista) podemos poñer unha vista sobre outra.

No seguinte exemplo poñemos un texto sobre unha imaxe:

import SwiftUI

struct ContentView: View {
   
    var body: some View {
        VStack {
            Image("fotoPerfilDiego")
                .resizable()
                .scaledToFit()
                .overlay(
                    Text("Texto sobre unha imaxen")
                        .frame(minHeight: 40)
                        .background(.black)
                        .foregroundColor(.white)
                        .cornerRadius(5)
                )
        }
    }
}

Modificadores personalizados #

É bastante común personalizar os modificadores, de xeito que se poden empregar en toda a nosa app, ao igual que fai o css co html.

import SwiftUI

struct ContentView: View {
      
    var body: some View {
        VStack {
            Text("Texto personalizado")
                .modifier(MeuTitulo())
        }
    }
}

struct MeuTitulo: ViewModifier{
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .padding()
            .foregroundColor(Color.red)
            .border(Color.red)
        
    }
}