Contexto e breve história sobre este tópico

Como iniciantes no aprendizado do desenvolvimento de aplicativos iOS, devemos saber ou aprender sobre a criação de visualizações usando storyboards e layouts automáticos. A primeira vez que aprendi sobre como criar um aplicativo iOS, aprendi a usar storyboards, incluindo a configuração de layouts para os componentes na exibição. No entanto, você deve saber que o uso de storyboards é muito ineficaz para implementar em projetos muito grandes, especialmente se o trabalho for feito em equipe. Ao usar o storyboard, será difícil mesclar e resolver conflitos ao colaborar, difícil de navegar, difícil de refatorar o código e muito mais.

Finalmente decidi aprender como fazer interface do usuário programaticamente usando o UIKit ao trabalhar em meu projeto e acabou sendo muito mais fácil em termos de colaboração. Por esse motivo, explorei várias coisas, incluindo aprender como declarar um componente, ajustar o componente, colocá-lo em uma exibição conforme necessário e também ajustar o layout de vários componentes em uma exibição.

Pelo que explorei, existem várias lições que aprendi, mas há 2 coisas que parecem simples, mas muito úteis, incluindo aquelas relacionadas às configurações que realmente precisavam criar um rótulo que pode ter novas linhas automaticamente de acordo com o conteúdo e também sobre existem muitas maneiras de definir o layout de um componente na exibição, mas até agora, para mim, a maneira mais fácil que já tentei implementar é usando a biblioteca SnapKit.

Para isso, quero compartilhar aqui a maneira de fazer isso, explicando-o por meio da implementação que fiz no projeto da minha equipe.

Sobre o projeto da minha equipe

Este é o aplicativo que eu e minha equipe fizemos, chamado “Healo”.
Healo é um aplicativo iOS de bate-papo anônimo que conecta pessoas que estão tentando se curar das feridas dos pais (chamado de Seeker) a alguém que pode ouvir as histórias que eles compartilham e lembrá-los de se manterem motivados em fazer auto-reeducação (chamado de Ouvinte ).

Quando queremos ser ouvintes, existem páginas de avaliação que contém explicações sobre alguns tópicos e também as perguntas que devem ser respondidas por eles e devem passar no teste para garantir que podem ser aceitos para usar os aplicativos.

Na verdade, só precisamos criar uma página de avaliação, mas o conteúdo do rótulo nessa página mostrará vários textos e também será diferente de acordo com o número da pergunta. Esta descrição e pergunta em si são retiradas do banco de dados e não diretamente escritas e armazenadas no projeto Xcode. Portanto, é claro, o conteúdo do texto e o número de palavras também variam.

Na verdade, podemos deixar nossa aparência organizada sem precisar fazer certas configurações na exibição. Podemos fazer isso configurando-o nos dados de texto que recuperamos do banco de dados adicionando \n para determinado texto que deve estar em uma nova linha, por exemplo, como “Olá, \nAdoro programar”. Mas isso é muito inconveniente se há muito texto que requer essas adições e sempre temos que fazer isso manualmente.

Para isso, mostrarei como faço as configurações no rótulo de descrição para que, independentemente do comprimento do conteúdo que retiremos do banco de dados, haja uma nova linha adicionada automaticamente se o comprimento do texto exceder as restrições da visualização da etiqueta que foi definida usando o SnapKit.

Implementação no Projeto

Para usar a biblioteca SnapKit, antes de começarmos a trabalhar no projeto, certifique-se de ter instalado o CocoaPods. ( Aqui está um guia para instalar o CocoaPods. )

Depois de já ter instalado o CocoaPod, aqui está o passo a passo de como instalar o SnapKit:
1. Devemos ir até a pasta do nosso projeto Xcode e abrir o terminal de lá (clique com o botão direito do mouse + escolha “Novo terminal na pasta”).
2. Assim que o terminal abrir, digitamos “pod init” e ele criará um novo arquivo pod em nossa pasta.

3. Abra esse Podfile e digite isto:

Em seguida, salve o Podfile

4. Volte ao terminal e digite “pod install”. Se não houver erros, significa que o SnapKit foi instalado com sucesso.

5. Abra o arquivo Xcworkspace e comece a codificar lá.

Você também pode ler mais explicações sobre a instalação do SnapKit aqui .

Presumo que você já conheça a configuração necessária para criar toda a interface do usuário programaticamente. Se assim for, vamos começar imediatamente.

Primeiro , para garantir que você possa usar o SnapKit para fazer o layout posteriormente, você precisa importar essa biblioteca para o arquivo que deseja usar.

Em segundo lugar , só precisamos declarar nosso rótulo dentro da classe de nosso controlador de visualização (para este projeto, ainda estou criando visualizações dentro de controladores de visualização e não em arquivos separados especificamente dedicados a cada visualização). Durante a declaração do rótulo, a coisa mais importante que você não deve esquecer é adicionar label.numberOfLines = 0 e label.lineBreakMode = .byWordWrapping.

Para que servem essas coisas?

Com base no que li na documentação da Apple, posso compartilhar:

O número de linhas é realmente usado para controlar o número máximo de linhas a serem usadas para ajustar o texto do rótulo em seu retângulo delimitador. Se definirmos o valor como 0, significa que não há limite de linhas e podemos usar quantas linhas forem necessárias dependendo do conteúdo do texto.

O modo de quebra de linha é realmente usado para quebrar e truncar o texto do rótulo. Existem alguns modos disponíveis, mas o modo usado com mais frequência é NSLineBreakMode.byWordWrapping. Se usarmos este modo, ele fará com que a próxima palavra seja cortada/movida para uma nova linha caso a palavra não caiba em 1 linha.

Você pode ler mais sobre isso em Documentação do desenvolvedor da Apple: Explicação do número de linhas e Explicação do modo de quebra de linha .

Em seguida, podemos criar 3 funções, como setupData, setupView e setupLayout. Aqui está o que há dentro de cada função (não estou mostrando completamente, apenas mostrando o que é relevante):

1. função setupData:

2. função setupView:

Dentro desta função, podemos definir a cor de fundo da visualização e também adicionar nosso rótulo de descrição à visualização para garantir que ela apareça em nossa visualização.

3. função setupLayout:

Dentro desta função, podemos definir o layout da etiqueta para que ela fique na posição correta (conforme queremos).

Veja como definir o layout usando o SnapKit:
1. Digite o nome do componente para o qual desejamos definir o layout. Neste caso, quero dar layout no meu rótulo topicDesc. Aqui está o código:

}

2. Anote todas as restrições que desejamos. Neste caso, quero fazer com que a posição do rótulo topicDesc fique abaixo do topicTitle (com uma distância de 21 pixels do título do tópico inferior). Aqui está o código:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Também quero fazer com que a posição do rótulo topicDesc tenha uma distância de 27 pixels à esquerda e à direita da superview. Aqui está o código:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Algumas dicas adicionais de uso do SnapKit:

O valor de deslocamento deve > 0 para preenchimento superior e esquerdo/à esquerda.
O valor de deslocamento deve ser < 0 para preenchimento inferior e direito/final.

Podemos usar inserção para código em uma linha se a distância for igual, por exemplo:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Por último , devemos chamar todas as funções que já criamos na view para carregar e rodar o projeto para verificar se tudo está rodando bem e como desejado.

Incrível! Finalmente aprendemos como inserir automaticamente novas linhas para um rótulo de acordo com o conteúdo do texto e definir o layout usando o SnapKit em aplicativos iOS. Usar o próprio SnapKit realmente me ajudou no layout enquanto trabalhava no meu projeto e você também pode experimentá-lo. Se você está curioso e quer saber mais sobre o SnapKit, pode ler mais sobre ele aqui ).

Além disso, se você está curioso e quer saber mais sobre o projeto da minha equipe (Healo), você pode testar nosso aplicativo no Testflight ( Clique aqui para testar nosso aplicativo ).

Espero que este artigo possa ser útil para você e, em caso afirmativo, ajude a compartilhar esta postagem com seus amigos ou colegas que também podem achá-la útil para eles e sinta-se à vontade para dar qualquer feedback ou comentário. Obrigado .

© 2022 Elvina Jacia. Todos os direitos reservados.