Text | Font
A maneira mais utilizada para exibir textos no SwiftUI, é o componente visual chamado Text.
Um Text é uma visualização de texto que exibe na interface uma ou mais linhas de um conteúdo não editável.
Assim como em qualquer editor de texto, aqui também é possível exibir um texto em negrito, itálico ou sublinhado. Basta utilizar os seguinte modificadores .bolt() , .italic() e .underline() :
Quando existe um conteúdo muito grande, o comportamento natural do Text é criar múltiplas linhas de exibição para que tudo apareça na interface do usuário. Mas através do modificador .lineLimit() podemos determinar um número máximo de linhas que serão exibidas, e o conteúdo excedente será completamente omitido.
Para modificar a cor do texto, nós utilizamos o modificador .foregroundColor()
E também é possível agrupar múltiplos textos fazendo com que eles sejam exibidos através de um único componente visual, basta concatenar as Views ultilizando o operador + .
Ou se for necessário, ao invés de inserir uma String você pode utilizar um AttributedString, para estilizar partes específicas de um único conteúdo.
Para exibir um texto com letras maiúsculas ou minúsculas podemos recorrer aos métodos uppercased() e lowercased(). Esses métodos pertecem a própria String, bem diferente dos modificadores que utilizamos até agora.
Alinhamento
Existem duas alternativas para alinhar um texo, a primeira delas é através do .frame(aligment:).
E a segunda opção é utilizada quando queremos alinhar um texto um pouco maior, e que requer múltiplas linhas de exibição. Nesses casos alinhamos o conteúdo do Text através do modificador.multilineTextAlignment().
Font
Uma das características mais legais do Text é que ele é capaz de exibir o seu conteúdo através de uma fonte que se adapta as definições da plataforma atual. Isso significa que a fonte do seu texto pode automaticamente se adaptar ao estilo do device que você está trabalhando, seja ele um iPhone, iPad ou até mesmo um Apple Watch.
Para tirar proveito desse comportamento, basta utilizar o modificador .font() e selecionar uma das opções de estilo pré-definidas no SwiftUI.
Assim como existe um estilo de fonte específico para a exibição de títulos, também existem outras opções pré-configuradas que facilitam bastante o processo de criação de interfaces:
largeTitle- título grandetitle- título padrãoheadline- título de manchetesubheadline- subtítulo de manchetebody- texto padrão ✭callout- texto explicativocaption- texto de legendafootnote- texto de nota de rodapé
Utilizar as fontes pré-instaladas é sem dúvida o caminho mais rápido e seguro para obter uma interface consistente e agradável. Mas nem sempre as opções que foram disponibilizadas atendem a todas as nossas necessidades.
No SwiftUI você consegue customizar o seu próprio estilo de fonte com base na fonte nativa do sistema. Dessa forma mesmo que aconteça uma atualização na plataforma, os seus textos sempre estarão combinando com as características do device.
Para gerar uma fonte que esteja de acordo com a plataforma, nós utilizamos o .font(.system()) . E através da opção size será possível determinar um tamanho específico de fonte.
Além de customizar o tamanho, também podemos customizar a espessura da fonte através do parâmetro weight :
blackheavyboldsemiboldmediumregularlightthinultraLight
E também é possível customizar o design da fonte:
default- design original da fontemonospaced- letras com o mesmo espaço horizontal.rounded- letras com as bordas arredondadas.serif- letras com as hastes prolongadas
O resultado desse processo será um novo estilo de texto, mas que continua tendo como base a fonte nativa do sistema.
Alterar Fonte Padrão
Para utilizar uma fonte completamente customizada e diferente da fonte original do sistema, nós utilizamos o Font.custom().
Primeiro inserimos o nome da fonte que queremos utilizar, e depois o tamanho desejado.
Mas cuidado. Para que o SwiftUI consiga exibir corretamente um fonte customizada você precisa realizar dois passos importantes:
- Importar Arquivo
- Arraste o arquivo da fonte para dentro do projeto. (Ao fazer isso, certifique-se que o checkbox de "Add to Target" esteja selecionado).
- Identificar Fonte
- Selecione o Target do seu projeto, e na aba de "info" adicione uma nova chave com o nome "Fonts provided by application". Nessa chave, adicione um item contendo o nome do arquivo que foi importado.
O processo é bem simples, mas caso você tenha alguma dificuldade esse link pode te ajudar!
