Como Personalizar Textos e Fontes no SwiftUI 🇧🇷

• Transcrição

  E aí meu povooo, tudo bem com vocês? Eu sou Michel Lopes e ajudo as pessoas a aprenderem a linguagem Swift de maneira simples. No vídeo de hoje, vamos explorar a exibição e personalização de textos no SwiftUI.

  Espero que gostem, vamos lá. Vou colocar meus óculos aqui porque estou um pouquinho cego. Criei um projeto em SwiftUI e a primeira coisa que o Xcode inseriu dentro da minha view foi um Text. Esse componente, também conhecido como controle visual de texto, é a maneira mais comum de exibir informações no SwiftUI. Assim como em qualquer outro editor de texto, aqui também é possível deixar o conteúdo em negrito, itálico ou sublinhado usando modificadores. Para negrito, utilizamos o modificador bold, e para itálico ou sublinhado, usamos o modificador underline. Podemos inserir uma string curta, resultando em uma única linha de informação, ou uma string mais longa. Quando o Text recebe uma string muito grande, ele se expande e cria múltiplas linhas para exibir toda a informação na interface do usuário. No entanto, nem sempre é possível que o texto se comporte dessa maneira. Se derem uma olhada no nosso preview, vão perceber que no final do texto aparecem três pontos. Isso significa que há informações que não foram totalmente exibidas devido à limitação de linhas imposta pelo modificador.

  Também é possível concatenar e agrupar vários textos usando o operador de soma (+). Com isso, podemos organizar melhor as informações, mesmo que estejam sendo exibidas de maneira unificada na interface. Além disso, podemos aplicar modificadores exclusivos para cada trecho de texto. Se você quiser fazer personalizações específicas para partes específicas do conteúdo, em vez de usar uma string, pode usar uma Text view. E se você quiser exibir o texto em letras maiúsculas, lembre-se de que, ao utilizar uma string, existem métodos próprios para fazer essa modificação. Observem que o método "uppercase" é um método da string, e não um modificador do Text. Da mesma forma, também podemos forçar que o texto esteja em letras minúsculas. Se você precisa alinhar o texto suavemente à direita, existem duas opções. A primeira é usar o modificador frame. Para facilitar o entendimento, defini a largura desse texto igual à largura da tela desse dispositivo. Em situações como essa, em que o componente de texto tem um tamanho maior do que a própria informação, podemos alinhar o conteúdo conforme necessário, dentro do frame, usando a opção alignment. Existem várias opções de alinhamento, mas as mais básicas são leading (esquerda), trailing (direita) e center (centro do frame).

  Nesse exemplo, a string exibida aqui é pequena, mas vejam o que acontece quando voltamos a exibir um texto muito grande. A informação é alinhada à esquerda, mesmo que a opção de alinhamento no frame esteja selecionada como central. Quando usamos o frame para alinhar um texto, estamos literalmente alinhando o componente visual e não a informação. Por isso, existe a segunda opção de alinhamento, que é o modificador de alinhamento de texto com várias linhas. Agora, em vez de alinhar o componente visual, estamos alinhando a informação do texto. Uma das características mais interessantes desse componente visual de texto é que ele é capaz de exibir seu conteúdo usando uma fonte que se adapta às características da plataforma atual. Você tem a opção de fazer com que o estilo da fonte de todos os seus textos se ajuste automaticamente ao dispositivo e à plataforma em que você está desenvolvendo, seja um iPhone, iPad ou Apple Watch. Para aproveitar esse comportamento, é preciso usar uma das opções de fonte predefinidas no SwiftUI, e fazemos isso com o modificador font. Talvez você não saiba, mas para cada plataforma da Apple existe um guia de design de interface. Lá você encontrará uma série de recomendações sobre o que fazer e o que não fazer na sua própria interface. Há uma equipe altamente qualificada que analisou minuciosamente cada etapa do desenvolvimento de um aplicativo. No guia, você encontrará recomendações específicas para um título, um subtítulo e assim por diante. Portanto, ao usar uma fonte predefinida no SwiftUI, você também está se protegendo contra todos os problemas identificados por essa equipe especializada. Para criar um título, usamos a opção .title. Se precisarmos de um título ainda maior, usamos a opção .largeTitle. Usamos .headline para criar um título no estilo manchete e .subheadline para um subtítulo. Para textos explicativos ou legendas, usamos a fonte .callout. Por fim, para textos de rodapé, usamos a fonte .footnote.

  Quando não definimos um estilo de fonte em um texto, o SwiftUI automaticamente seleciona a opção padrão, que é a fonte .body. Usar essas fontes embutidas no SwiftUI é, sem dúvida, a opção mais segura e rápida para criar uma interface sem maiores problemas. No entanto, eu sei que nem sempre é possível ficar dentro dessas opções e às vezes precisamos de personalizações mais avançadas. No SwiftUI, é possível personalizar seu próprio estilo de fonte com base na fonte nativa do sistema. Usamos a fonte .system. Mesmo que ocorra uma atualização na plataforma, todos os seus textos serão compatíveis com as características do dispositivo. Ao contrário das opções mencionadas anteriormente, podemos criar uma fonte com tamanho completamente personalizado. Também podemos personalizar a espessura da fonte. Existem várias opções de espessura: .black para uma fonte mais negritada, .heavy para uma espessura equivalente ao negrito, .regular para uma espessura média da fonte, .light para uma espessura mais leve e .ultraLight para uma opção mais estreita de todas. Lembre-se de que, mesmo fazendo essas modificações, ainda estamos usando a fonte nativa do sistema. Além do tamanho e da espessura, também é possível modificar o estilo dessa fonte.

  Existem algumas opções, como o estilo padrão (.default), o estilo monoespaçado (.monospaced), que distribui um tamanho igual para cada letra na horizontal, o estilo arredondado (.rounded), que arredonda as extremidades das letras, e o estilo esticado (.serif), que alonga as extremidades das letras. O resultado desse processo será uma personalização que engloba essas três áreas: tamanho, espessura e estilo. No entanto, é importante ressaltar que, ao optar por um caminho diferente das opções pré-definidas pelo SwiftUI e usar uma fonte nativa do sistema, é necessário garantir que todas as diretrizes de interface da plataforma estejam sendo seguidas. A última etapa na personalização de um texto é realizar uma transformação completa, ou seja, usar uma fonte diferente da fonte nativa do sistema. Em vez de usar .system, usamos .custom. Para que o SwiftUI possa localizar corretamente a fonte selecionada, é necessário incorporar o arquivo da fonte no projeto Xcode e identificá-lo. Se você estiver usando uma fonte personalizada e não seguir essas etapas, o SwiftUI não encontrará o arquivo e, consequentemente, a fonte exibida não será a que você selecionou. Com o arquivo da fonte em mãos, você arrasta-o para dentro do Xcode. Ao fazer isso, é importante selecionar a opção do target na caixa de diálogo. O segundo passo é concluir a instalação da fonte, identificando-a no projeto. Dentro das configurações do projeto, você insere a configuração "Fonts provided by application" (Fontes fornecidas pela aplicação). Você expande esse item e, na coluna à direita, digita o nome do arquivo que foi importado para o projeto. Depois de concluir corretamente o processo de importação e identificação da fonte no projeto, basta usar o nome dela com o modificador .font. Neste vídeo, exploramos os principais conceitos de textos e fontes no SwiftUI. Espero que tenham gostado. Nos vemos no próximo vídeo. Um grande abraço a todos, estamos juntos!