Antecedentes y breve historia sobre este tema

Como principiantes en el aprendizaje del desarrollo de aplicaciones iOS, debemos haber sabido o aprendido sobre la creación de vistas utilizando guiones gráficos y diseños automáticos. La primera vez que aprendí a crear una aplicación iOS, aprendí a usar guiones gráficos, incluida la configuración de los diseños de los componentes en la vista. Sin embargo, debes saber que el uso de guiones gráficos es muy poco efectivo para implementar en proyectos bastante grandes, especialmente si el trabajo se realiza en equipo. Al usar el guión gráfico, será difícil para nosotros fusionar y resolver conflictos al colaborar, será difícil navegar, será difícil refactorizar el código y muchos más.

Finalmente decidí aprender cómo hacer una interfaz de usuario programáticamente usando UIKit cuando trabajaba en mi proyecto y resultó ser mucho más fácil en términos de colaboración. Por esta razón, exploré varias cosas, incluido aprender a declarar un componente, ajustar el componente, colocarlo en una vista según sea necesario y también ajustar el diseño de varios componentes en una vista.

De lo que he explorado, hay varias lecciones que he aprendido, pero hay 2 cosas que parecen simples pero muy útiles, incluidas las relacionadas con la configuración que realmente necesitaba para crear una etiqueta que puede tener saltos de línea automáticamente de acuerdo con el contenido. y también hay muchas formas de configurar el diseño de un componente en la vista, pero hasta ahora, para mí, la forma más fácil que he intentado implementar es usar la biblioteca SnapKit.

Por eso, aquí quiero compartir la forma de hacerlo explicándolo a través de la implementación que he hecho en el proyecto de mi equipo.

Acerca del proyecto de mi equipo

Así que esta es la aplicación que mi equipo y yo hemos creado, llamada "Healo".
Healo es una aplicación iOS de chat anónimo que conecta a las personas que están tratando de curarse de las heridas de los padres (llamado Buscador) con alguien que puede escuchar las historias que comparten y recordarles que se mantengan motivados para hacer auto-reparenting (llamado Escuchador). ).

Cuando queremos ser un oyente, hay páginas de evaluación que contienen explicaciones sobre algunos temas y también las preguntas que deben responder y deben pasar la prueba para garantizar que puedan ser aceptados para usar las aplicaciones.

En realidad, solo necesitamos crear una página de evaluación, pero el contenido de la etiqueta en esa página mostrará varios textos y también será diferente según el número de pregunta. Esta descripción y pregunta en sí se toma de la base de datos y no se escribe ni almacena directamente en el proyecto Xcode. Por lo tanto, por supuesto, el contenido del texto y el número de palabras también variarán.

De hecho, podemos hacer que nuestra apariencia sea ordenada sin tener que hacer ciertas configuraciones en la vista. Podemos hacer esto configurándolo en los datos de texto que recuperamos de la base de datos agregando \n para cierto texto que debe estar en una nueva línea, por ejemplo, "Hola, \nMe encanta programar". Pero eso es muy inconveniente si hay mucho texto que requiere estas adiciones y siempre tenemos que hacerlo manualmente.

Para eso, le mostraré cómo realizo la configuración en la etiqueta de descripción para que, sin importar la longitud del contenido que tomemos de la base de datos, se agregará una nueva línea automáticamente si la longitud del texto ha excedido las restricciones. de la vista de etiqueta que se ha configurado con SnapKit.

Implementación en el proyecto

Para usar la biblioteca SnapKit, antes de comenzar a trabajar en el proyecto, asegúrese de haber instalado CocoaPods. ( Aquí hay una guía para instalar CocoaPods. )

Después de que ya hayamos instalado CocoaPod, aquí está el paso a paso de cómo instalar SnapKit:
1. Debemos ir a la carpeta de nuestro proyecto Xcode y abrir la terminal desde allí (clic derecho + elegir "Nueva terminal en la carpeta").
2. Una vez que se abre la terminal, escribimos "pod init" y creará un nuevo archivo pod en nuestra carpeta.

3. Abra ese Podfile y escriba esto:

Luego, guarde el Podfile

4. Vuelva a la terminal y escriba "pod install". Si no hay errores, significa que SnapKit se instaló correctamente.

5. Abra el archivo Xcworkspace y comience a codificar allí.

También puede leer más explicaciones sobre la instalación de SnapKit aquí .

Supongo que ya conoce la configuración necesaria para crear la interfaz de usuario completa mediante programación. Si es así, comencemos de inmediato.

Primero , para asegurarse de que puede usar SnapKit para el diseño más adelante, debe importar esa biblioteca al archivo que desea usar.

En segundo lugar , solo necesitamos declarar nuestra etiqueta dentro de la clase de nuestro controlador de vista (para este proyecto, todavía estoy creando vistas dentro de los controladores de vista y no en archivos separados específicamente dedicados a cada vista). Durante la declaración de la etiqueta, lo más importante que no debe olvidar es agregar label.numberOfLines = 0 y label.lineBreakMode = .byWordWrapping.

¿Para qué son estas cosas en realidad?

Según lo que he leído en la documentación de Apple, esto es lo que puedo compartir:

El número de líneas en realidad se usa para controlar el número máximo de líneas que se usarán para ajustar el texto de la etiqueta en su rectángulo delimitador. Si establecemos el valor en 0, significa que no hay límite de líneas y podemos usarlo tantas líneas como sea necesario dependiendo del contenido del texto.

El modo de salto de línea en realidad se usa para ajustar y truncar el texto de la etiqueta. Hay algunos modos disponibles, pero el modo más utilizado es NSLineBreakMode.byWordWrapping. Si usamos este modo, hará que la siguiente palabra se corte o se mueva a una nueva línea si la palabra no cabe en 1 línea.

Puede leer más sobre esto en la Documentación para desarrolladores de Apple: Explicación del número de líneas y explicación del modo de salto de línea .

A continuación, podemos crear 3 funciones como setupData, setupView y setupLayout. Esto es lo que hay dentro de cada función (no lo muestro a fondo, solo muestro lo que es relevante):

1. función de configuración de datos:

2. función vista de configuración:

Dentro de esta función, podemos establecer el color de fondo de la vista y también debemos agregar nuestra etiqueta de descripción a la vista para asegurarnos de que aparecerá en nuestra vista.

3. función setupLayout:

Dentro de esta función, podemos configurar el diseño de la etiqueta para que la etiqueta esté en la posición correcta (como queremos).

Aquí se explica cómo configurar el diseño con SnapKit:
1. Escriba el nombre del componente para el que deseamos configurar el diseño. En este caso, quiero darle un diseño a mi etiqueta topicDesc. Aquí está el código:

}

2. Escribir todas las restricciones que queramos. En este caso, quiero que la posición de la etiqueta topicDesc esté debajo del título del tema (con una distancia de 21 píxeles desde el título del tema inferior). Aquí está el código:

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

También quiero que la posición de la etiqueta topicDesc tenga una distancia de 27 píxeles desde la izquierda y la derecha de la supervista. Aquí está el 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)
}

Algunos consejos adicionales sobre el uso de SnapKit:

El valor de compensación debe ser > 0 para el relleno superior e izquierdo/delantero.
El valor de compensación debe < 0 para el relleno inferior y derecho/posterior.

Podemos usar el recuadro para el código en una fila si la distancia es igual, por ejemplo:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Por último , debemos llamar a todas las funciones que ya hemos creado a la vista para cargar y ejecutar el proyecto para verificar si todo funciona bien y como se desea.

¡Impresionante! Finalmente aprendimos cómo insertar automáticamente nuevas líneas para una etiqueta de acuerdo con el contenido del texto y configurar el diseño usando SnapKit en las aplicaciones de iOS. El uso de SnapKit en sí mismo realmente me ayudó a diseñar mientras trabajaba en mi proyecto y usted también puede probarlo. Si tiene curiosidad y quiere saber más sobre SnapKit, puede leer más sobre él aquí ).

Además, si tienes curiosidad y quieres saber más sobre el proyecto de mi equipo (Healo), puedes probar nuestra aplicación en Testflight (haz clic aquí para probar nuestra aplicación ) .

Espero que este artículo pueda ser útil para usted y, de ser así, ayúdenos a compartir esta publicación con sus amigos o colegas, a quienes también les puede resultar útil, y también siéntase libre de dar su opinión o comentario. Gracias.

© 2022 Elvina Jacia. Reservados todos los derechos.