¿Cómo organizar las etiquetas de una manera flowlayout?

Question

¿Cómo organizo algunos UILabels y/o UIButtons de longitud variable? Solo quiero agregarlos a UITableViewCell y deben organizarse en un flujo de izquierda a derecha, al igual que las líneas de texto en un párrafo.

Solo encontré la posibilidad de crear etiquetas con un tamaño y posición fijos usando "initWithFrame: ...". Lo mismo parece ser cierto para Interface Builder, hasta donde yo sé. Cualquier solución es apreciada sin importar si está hecha en código o si usa un archivo XIB de celda personalizado.

Answer 1

UITableViewCell, UILabel y UIButton son todas las subclases de UIView y la documentación de UIView dice:

Diseño y gestión subvista

• Una vista puede contener cero o más subvistas.
• Cada vista define su propio comportamiento de cambio de tamaño predeterminado en relación con su vista principal.
• Una vista puede cambiar manualmente el tamaño y la posición de sus subvistas según sea necesario.

Por lo tanto, es ciertamente posible de hacer.

Usted puede crear sus etiquetas y botones usando initWithFrame: con el argumento CGRectZero y luego cambiar su tamaño (basado en el texto o lo que sea) usando setBounds: o setFrame: (porque en este momento sólo vamos a establecer el tamaño de la vista) . A continuación, agregue estas vistas como subvistas de la celda contentView.

Luego, en una subclase personalizada de UITableViewCell puede implementar su solución reemplazando el comportamiento por defecto (que no hace nada) de layoutSubviews: para establecer el campo origen de los marcos de la subvista (es decir, CGRect) que posicionará los subvistas en el vista de contenido de la celda (el tamaño ya se ha configurado). Es posible que deba llamar al setNeedsLayout: o al layoutIfNeeded:.

Esto es realmente un bosquejo de cómo es posible implementar una solución porque quedan muchos detalles por hacer. Por ejemplo, si cambia el tamaño de un botón en función del texto del titleLabel, es probable que desee rellenar algunos con el ancho y alto, de lo contrario, el botón tendrá el tamaño de la etiqueta y se verá extraño. En el método layoutSubviews: podría haber una buena cantidad de lógica para distribuir las etiquetas y botones de la forma que desee (por ejemplo, sería más simple si todas las subvistas de una celda fueran del mismo tipo, como todas las etiquetas) esp. si las subvistas pueden ajustarse a una nueva línea.

Answer 2

Quiero hacer lo mismo para permitir a los usuarios ingresar etiquetas en un campo de texto, un poco como cuando ingresas una dirección de correo electrónico, la dirección se convierte en una etiqueta azul (el nombre de los usuarios cuando eso la dirección de correo electrónico de los usuarios ya está en su lista de contactos). Todavía no lo he escrito, pero estaré encantado de compartirlo contigo una vez que lo haga. No puedo comprometerme con el tiempo que tardaré en escribir esto, lamentablemente. Sin embargo, si nadie más tiene código que puedan compartir y usted necesita hacer el trabajo rápidamente: solo como un consejo, considere esto:

Cree objetos de vista de etiquetas donde cada objeto conoce el tamaño del campo de texto/contenedor de etiquetas principal ver y donde cada objeto de etiqueta tiene un método de utilidad que un objeto de etiqueta adicional puede usar para insertarse en la posición correcta. Este enfoque facilita la administración de las etiquetas de visualización y retransmisión mediante un flujo de iteración simple.

Answer 3

Hola Si aún necesita una respuesta ... para obtener el tamaño de texto (y a continuación, calcular el marco de la UILabel/UIButton etc) utilizar el sizeWithFont: NSString función que le dará la anchura/altura de una cadena de texto usando una fuente especificada.

Hay un poco de matemáticas que tendrá que hacer para encontrar el mejor ajuste, dónde colocar los UILabels y el espaciado, pero tendrá los datos que necesita para hacerlo.

Espero que esto ayude!

Answer 4

Para UILabels multilínea para obtener el ancho y la altura, debe usar el método NSString sizeWithFont: constrainedToSize: lineBreakMode: puede utilizar los tamaños para distribuir todo donde debe estar.