iOS cómo hacer ancho / autolayout dynamic de UIView según UILabel dentro de él

Estoy luchando con tal vez un problema de novato. Tengo una UIView dentro de la cual UIView un poco de precio. Quiero que la UIView tenga un ancho dynamic según el precio, si es 1 Euro, entonces será, por ejemplo, 20pt , si es 2300 Euro, entonces tendrá un ancho de 50pt .

Intentaba usar las restricciones del guión gráfico pero sin suerte. ¿Es posible hacerlo dentro de storyboard o tengo que calcular el ancho de UILabel y luego establecer el ancho de UIView progtwigción?

Gracias de antemano.

Sí, puedes hacer esto en el guión gráfico. Agregue una label a su vista y péguela al borde izquierdo y derecho (arriba y abajo si así lo desea). Dé las restricciones de vista a su supervisión en las direcciones x e y, pero no le dé una restricción de ancho (necesitará una restricción de altura si no fijó la parte superior e inferior de la label). La vista debería expandirse con la label según su contenido.

En general, el layout automático se realiza de arriba hacia abajo. En otras palabras, primero se realiza un layout de vista principal y luego se realizan los layouts de vista secundarios. Entonces, pedirle al sistema que dimensione el padre basado en el niño es como nadar río arriba, es más difícil de hacer, pero aún así es posible con un poco de trabajo.

Una solución es usar el tamaño intrínseco de una vista.

Por ejemplo, un UILabel tiene un tamaño intrínseco basado en el text de la label. Si una UILabel tiene una restricción principal y una restricción superior, pero no tiene otras restricciones, entonces su ancho y altura están determinadas por su tamaño intrínseco.

Puede hacer lo mismo con una class de vista personalizada que encierre un UILabel. Al establecer el tamaño intrínseco de la class de vista personalizada en function del tamaño intrínseco de la UILabel, obtendrá una vista que cambiará de tamaño automáticamente según el text de la label.

Aquí se muestra cómo se ve el código para la class personalizada. El file .h define un solo text propiedad. El file .m tiene una IBOutlet para la label secundaria. Establecer y get la propiedad de text simplemente establece o obtiene el text de la label. Pero hay un giro muy importante, al configurar el text se invalida el tamaño intrínseco del padre. Eso es lo que hace que el sistema ajuste el tamaño de la vista principal. En el código de ejemplo siguiente, el elemento principal tiene el tamaño de un margen de 8 píxeles en todo el UILabel.

SurroundView.h

 @interface SurroundView : UIView @property (strong, nonatomic) NSString *text; @end 

SurroundView.m

 @interface SurroundView() @property (weak, nonatomic) IBOutlet UILabel *childLabel; @end @implementation SurroundView - (void)setText:(NSString *)text { self.childLabel.text = text; [self invalidateIntrinsicContentSize]; } - (NSString *)text { return( self.childLabel.text ); } - (CGSize)intrinsicContentSize { CGSize size = self.childLabel.intrinsicContentSize; size.height += 16; size.width += 16; return( size ); } @end 

Crear el IBOutlet para el childLabel puede ser un poco complicado, así que aquí está el procedimiento

  • arrastra una vista UIV al guión gráfico
  • use el inspector de identidad para cambiar la class a SurroundView
  • arrastre un UILabel y agréguelo como una subvista del SurroundView
  • select la label y abra el editor auxiliar
  • muestre SurroundView.m en el asistente
  • arrastre del círculo abierto a la label como se muestra a continuación

introduzca la descripción de la imagen aquí

Todo lo que queda es corregir las restricciones. Las restricciones para la label deberían verse así

introduzca la descripción de la imagen aquí

Las restricciones para el SurroundView deberían ser como se muestra a continuación. El punto key es que el tamaño intrínseco debe establecerse en marcador de position para evitar las advertencias sobre las restricciones faltantes.

introduzca la descripción de la imagen aquí

Coloque la label dentro de la vista y fije sus bordes TOP, BOTTOM, TRAILING y LIDING a la vista supervisa de las tags. Tenga en count que no especifica la restricción de ancho. Ahora agregue una restricción de altura y ancho a la vista. Haga una salida a la restricción de ancho y cuando los cambios de precio establezcan la constante de la restricción de ancho de la vista a su valor deseado. Como la label está fijada a la vista, también se expandirá.