Restricción de celda en iOS: use Xib para realizar la restricción automática de varias etiquetas: la altura se adapta al contenido

El
texto original está escrito en oc, el proyecto de ingeniería de código de mi proyecto swift.

hecho en imagen del burrito

       Hablando del desarrollo de iOS, la impresión de muchas personas es: obtener un tableView y agregar todos los datos. Suena tosco, pero cuando lo piensas detenidamente, tableView es el más utilizado para mostrar el contenido de datos. En este punto, el El macho número uno-tableViewCell está a punto de debutar.

      El tema de este artículo es la adaptación de altura de tableViewCell. De hecho, hay varias formas de calcular la altura de la celda. Al hacer la celda, siempre extraigo el xib directamente para una interfaz más simple. Es más fácil conectar las restricciones manualmente, así que iré hoy. Explora una ola, una forma sencilla de usar xib para lograr una celda altamente adaptativa;

Configurar manualmente la fuente de datos, visualización inicial

Como se muestra en la figura, esta es la vista de tabla más simple. Solo hay dos etiquetas y ningún otro control. Sin ningún procesamiento, encontramos que el contenido estará fuera de los límites (fuera de la pantalla en ejecución). En primer lugar, paso, tenemos para resolver este problema primero, al menos deje que el contenido se muestre en la pantalla;

Intentando encontrar contenido fuera de límites

-> Exploración: ¿Es porque la altura de tableView no es suficiente, por ejemplo, cuando la altura es solo 44, el contenido solo se puede mostrar así? 

Primero: cambie la altura de tableViewCell 

Segundo: establezca el número de contenido lines_valueLabel.numberOfLines = 0;

Como se muestra en la figura, el contenido aún está fuera de los límites.

Duda: ¿el ancho de la etiqueta de contenido = infinito? Entonces no envolverá

visualización de restricciones xib

Como se muestra en la figura, sabemos que siempre que se establezcan dos restricciones para la etiqueta, tanto el ancho como el alto pueden realizar automáticamente la autoadaptación del contenido. Sin embargo, si el ancho no se establece aquí (agregue la restricción correcta = = confirmar el ancho), el ancho de la etiqueta será infinito, ilimitado Salir del contenido


Agregar restricción derecha


Error de restricción

Como se muestra en la figura, después de agregar la restricción a la derecha, encontramos que la restricción era incorrecta. La razón: el ancho de las dos etiquetas no está establecido, y se establecen automáticamente de acuerdo con el contenido. Esto conducirá a la falla al determinar los dos marcos, y todas las restricciones informan errores.


-> Pequeños consejos: aquí solo hay dos etiquetas y no se establece ninguna restricción de ancho (si el método vertical es la restricción de altura), se informará un error cuando se muestren de acuerdo con el contenido, si, por ejemplo, el el contenido de la etiqueta izquierda es fijo (por ejemplo, todos son "nombres"), se puede resolver agregando directamente una restricción de ancho, o el lado izquierdo no es una etiqueta, sino otros espacios que pueden determinar el marco, como ¡Btn, imageView, no tendrá los problemas anteriores! Porque: cuando no establecemos el marco de la etiqueta, el marco predeterminado es adaptable según el contenido, por lo que los dos no pueden aparecer juntos que necesitan ser adaptables;

-> No creer en el mal: Prueba bajo la condición de error de restricción:

Mostrar bajo dos restricciones de etiqueta

Como se muestra en la figura, descubrimos que el contenido se ajusta automáticamente y se muestran todos, lo que demuestra que nuestra idea de establecer la restricción de ancho es correcta.

¡pero! -> El keyLabel se ha ido, porque las dos etiquetas que hicimos son adaptables, ¡así que no podemos determinar su ubicación exacta!


Solución: calcule manualmente la altura de valueLabel, pero establezca la altura de la vista principal (valueView) -> modifíquela mediante restricciones de altura.

Establecer la restricción de altura de valueView

Como se muestra en la figura, agregue una restricción de altura de Vista, planeamos implementar: valueLabel se muestra directamente en valueView, y luego establece directamente el marco de valueView

Configuración de restricción de altura completada

-> Siguiente: Calcule la altura de la etiqueta -> La fórmula de cálculo de la altura del contenido: CGRect rect = [str boundingRectWithSize: CGSizeMake (BottomW, CGFLOAT_MAX) opciones: optionsattributes: attrDiccontext: nil];

Paso 1: ¡Obtenga primero el ancho de la Vista actual!

Paso 2: ¡Establece el ancho de valueLabel!

Paso 3: ¡Calcula la altura del contenido!

Paso 4: ¡Establezca la altura de valueView!


La operación se completa y se encuentra el ajuste de valor
Aunque el contenido tiene saltos de línea, el ancho de valueLabel todavía está fuera de rango
Como se muestra en la figura: Aunque el contenido tiene los datos, el ancho de la etiqueta no ha cambiado en este momento.

Solución -> ¡Calcule el ancho de keyLabelLabel manualmente!

Ideas: 1. Establezca la restricción de ancho de keyLabel;

           2. De acuerdo con el contenido real de keyLabel, calcule el ancho específico y modifique la restricción de ancho;

           3. La restricción de ancho no se establece para valueLabel a la derecha, y la restricción a la derecha = 0 se establece y se calcula el ancho de valueLabel;

Diagrama de configuración de restricciones

Como se muestra en la figura, porque si la misma línea, dos etiquetas no establecen restricciones de ancho, debido a que la etiqueta se adaptará al contenido por defecto, dos restricciones inciertas -> causan restricciones para informar un error. Entonces, tentativamente, establezca la restricción de ancho a la izquierda y luego modifique el ancho a la izquierda de acuerdo con el contenido real, y el ancho a la derecha = ancho de pantalla-ancho izquierdo.

Establecer la restricción de ancho de keyLabel
Establecer la restricción correcta de valueLabel

En este punto, encontramos que debido a que la etiqueta de la izquierda tiene una restricción de ancho, la etiqueta de la derecha no se informará de errores en este momento (agregue la restricción derecha = 0).

Calcule el ancho en función del contenido de keyLabel

A través del contenido, calcule el ancho de keyLabel, configúrelo en la restricción de ancho de keyLabel y actualice la restricción;

Posteriormente, debido a la autoadaptación de valueView, su ancho será automáticamente = ancho de pantalla-el ancho de keyLabel, por lo que no es necesario volver a configurarlo;

El contenido que se muestra es el anterior

En este punto, descubrimos que parte del contenido todavía está cubierto y la etiqueta no muestra completamente todo el contenido.

Modificación: aumentar ligeramente el ancho de la etiqueta.

Esto sucede porque después de Xcode8.0, el cálculo de la longitud de la fuente se ha cambiado ligeramente. Podemos resolver este problema agregando un poco al configurar el ancho.

Pantalla revisada

En este punto, se resuelve el conflicto de restricciones entre las etiquetas ~


El siguiente paso es establecer el problema altamente adaptativo de tableViewCell;

El método de configuración rápida de xib: 1. En xib, después de establecer las restricciones superior e inferior;

                                  2. Calcule manualmente el valor de la restricción de altura.

                                  3. Utilice Xcode para adaptarse automáticamente a la altura de la celda

Cálculo de la altura del valor
Cálculo automático de altura


Resultados finales

Como se muestra en la figura, encontramos que el ancho de keyLabel se adapta al contenido, el ancho de vauleLabel se adapta al ancho de keyLabel, la altura de valueLabel se adapta al contenido y la altura de la celda se adapta al contenido ~

Pequeños consejos -> Si encuentra que la altura aún está fija después de configurar _tableView.rowHeight = UITableViewAutomaticDimension, verifique si hay un método de proxy de altura para tableView -> (CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath :( NSIndexPath * ) indexPath, coméntelo si lo tiene ~

Demo simple: Demo

Supongo que te gusta

Origin blog.csdn.net/Draven__/article/details/93380979
Recomendado
Clasificación