UITableViewCell AutoLayout con tags múltiples

Estoy intentando utilizar AutoLayout en UITableViewCell con varias tags con cálculo porcentual. Quiero un espacio igual entre las tags pero diferentes anchos. Además, el ancho y el espacio serán diferentes en el modo Retrato y paisaje, tal como se muestra en las siguientes imágenes.

Pantalla Protrait

Visualización del paisaje

Quiero que el espacio sea 4 en Retrato y 8 en Paisaje.

En Retrato Etiqueta1 Ancho – 50% Ancho Label2 – 20% Ancho Label3 – 30%

En paisaje Etiqueta1 Ancho – 50% Ancho Label2 – 15% Ancho Label3 – Ancho Label4 20% – 15%

He utilizado el espacio horizontal y las restricciones superiores e inferiores, pero no resulta en la alignment adecuada del ancho y el espacio. También la primera fila es encabezado, por lo que no debería tener indicador de revelación y las filas restantes deberían tenerlo. Cualquier ayuda sería apreciada.

Nota: Es una aplicación universal y estoy usando splitview en iPad. En retrato, debe mostrar 3 tags como en iPhone y en Paisaje debe mostrar 4 tags como se mencionó anteriormente. Además, mi controller de vista maestra siempre está visible.

Como las classs de tamaño no distinguen entre iPad en retrato y iPad en paisaje, no puede usar classs de tamaño. Lo que puede hacer es en su xib, usted define todas las restricciones requeridas de la siguiente manera

  1. Defina la restricción para el espacio entre las tags y cree el IBOutlet para él en su class de vista, déjelo con el nombre "gapConstraint".

  2. Defina la restricción para el ancho de cada label que será proporcional al ancho de la supervisión, p. Ej., Para una restricción de label más grande sería biggerlabel.width = superView.width * 0.5.

  3. Para las tags en las que desee un ancho diferente en la orientación horizontal y vertical, defina dos restricciones para el ancho (una para cada orientación) y establezca la prioridad de una restricción en 750 (alto, digamos para el retrato) y otro en 500 (bajo, digamos para paisaje) Cree los puntos de venta para todas esas restricciones. Necesitamos definir dos restricciones de ancho (una para el retrato y una para el paisaje) para cada label porque la propiedad multiplicadora de NSLayoutConstraint es solo lectura, por lo tanto una vez que se asigna el multiplicador no podemos cambiar su valor. Para solucionarlo, definimos dos restricciones y en el código basado en la orientación, activaremos la restricción más apropiada cambiando las prioridades.

Reemplace el método UpdateConstraints y en este método puede verificar la orientación actual del dispositivo. Si la orientación del dispositivo es vertical, cambie el valor constante de gapConstraint (creado en point1) a 4 mientras que en horizontal cambie el valor constante de gapConstraint (creado en point1) a 8. Para ancho de tags; en orientación vertical, cambie la prioridad de la restricción de ancho de retrato a 750 y baje la prioridad de la restricción de ancho de paisaje a 500 mientras que en orientación horizontal cambie la prioridad de la restricción de ancho de retrato a 500 mientras aumenta la prioridad de la restricción de ancho de paisaje a 750.

Primero llegamos al problema de que desea espacio 4 en retrato y 8 en LandScape.

Si conoce bien las classs de tamaño, úselas. Desde la parte inferior de la tabla de historias, select la class de tamaño que desee (la class de tamaño que se usó en el modo vertical). Puede usar la class de tamaño "Altura regular compacta" para establecer las restricciones todos los teléfonos en modo vertical.

Ahora establece la restricción de espaciado horizontal entre los botones, después de colocar la restricción de Espaciado horizontal, puede deshabilitarla de las classs de tamaño en las que no desea esta restricción, es decir, las classs de tamaño que se usan en el modo horizontal.

Para deshabilitar la restricción específica para cualquier class de tamaño, simplemente select esa restricción y luego, en el inspector de attributes, verá una checkbox denominada "Instalado", lo que significa que esta restricción está habilitada para esta class de tamaño. Por defecto, el "Instalado" es para la class de tamaño "Any Any" que significa que esta restricción se aplica a todas las classs de tamaño, simplemente desmarca esa checkbox.

En el lado izquierdo de esa checkbox "Instalada" hay un ícono "+" que le ayuda a habilitar o deshabilitar la restricción para una class de tamaño específica, así que select la class de tamaño que desee de ese ícono y marque la checkbox de esa class de tamaño. Ver Imagen1 introduzca la descripción de la imagen aquí

Ahora agregue otra restricción de espacio horizontal para paisaje y, deshabilítela de cualquier class de tamaño "Cualquiera" y habilítela para cualquier ancho, altura compacta que representa el iphone en Paisaje, ahora agregó dos restricciones iguales con constantes diferentes que funcionan en diferentes situaciones ( Uno es retrato y otro en paisaje).

Ahora venga hacia su problema real de que quiere que el tamaño de sus tags sea proporcional. Ahora, al igual que las restricciones, puede habilitar o deshabilitar vistas para diferentes classs de tamaño, así que arrastre cuatro tags en el tablero de historias y deshabilite la cuarta para la class de tamaño "Altura regular compacta".

Para habilitar o deshabilitar la vista en una class de tamaño específica, select la label y luego use la misma checkbox "Instalado" en el inspector atribuido y deshabilite la cuarta label para la class de tamaño "Altura regular compacta".

Ahora lo único que queda es que desea establecer el ancho diferente para paisaje y retrato. Para esto, debemos establecer la restricción de dos anchos para cada label (solo la cuarta label tiene una restricción de ancho) una para Portrait y otra para Landscape.

Ahora establezca la restricción de ancho para cada label para retrato como desee y habilite estas restricciones solo para la class de tamaño "Altura regular compacta". Para que solo trabajen en Retrato.

Ahora, desde la parte inferior de la tabla estratificada, cambie la class de tamaño a "Altura compacta del ancho regular" y vuelva a colocar las restricciones de ancho en sus tags esta vez con diferentes constantes. Una cosa que observará es que esta vez puede establecer la restricción para la cuarta label, ya que esta label solo es visible en esta class de tamaño.

Y eso es 🙂 Espero que esto te ayude, dime si eso funciona o no.

puedes lograr tu layout deseado siguiendo las siguientes forms

Método 1: usando VFL

  1. Siempre que se cambie la orientación del dispositivo, la vista de tabla se volverá a cargar automáticamente, de ahí que se llame a la function cellForRowIndexPath.
  2. Verifique la orientación del dispositivo en cellForRowIndexPath 3. Elimine todas las subvistas y sus restricciones 4. Agregue todas las subvistas nuevamente con la especificación requerida usando VFL.

Método 2: Usar diferentes UItableViewCell personalizados.

Puede usar diferentes UItableviewCell personalizados para cada orientación.

El código adjunto es la solución de su problema en el iPhone. funciona exactamente como su problema de mención en el iPhone en modo vertical y horizontal. Puede actualizar esta lógica para su vista dividida en iPad. Si encuentras algún problema, comenta aquí.

Este problema se resuelve con la class de tamaño en iOS 8 según la siguiente lógica.

1) Agregar vista de reference (vista amarilla) con ancho total – espacio total entre la label

Según su problema que menciona arriba, desea agregar tags según el ancho de celda. Entonces, para eso necesitarás. ancho de reference porque no puede usar contentView como ref. así que tenemos que tomar una vista extra para esta vista amarilla en mi código de demostración. se utilizan espacios adicionales para administrar las tags espaciadas b / w.

2) Luego, asigna el mismo ancho con vista de reference por multiplicador

Ahora tu req. 50% de ancho para la 1ª label, por lo que con la lógica multiplicadora lo logramos. por ejemplo, si desea la primera label 100px, configure el ancho "Ref. view" 200. De la misma manera, administro para otras tags a 20% y 30% de la relación de ancho a ref. ver.

3) Para el modo vertical, agregue una restricción más para la class de tamaño de retrato

En el modo vertical, req. solo 3 tags, por lo que al usar la class de tamaño, asigne el ancho de la cuarta label a 0.

todo esto hecho debajo del código

Mira mi código con la class de tamaño

Descargar

para tener un espaciado igual en UITableViewCell, puede agregar vistas de tags b / w y luego establecer constarint en anchura y altura de todas las tags para que sean iguales.

en potraiten el paisaje