Saltar al contenido

Alineación de vistas de texto de varias líneas a su línea de base (ConstraintLayout Android Studio)

Por fin luego de tanto trabajar ya encontramos el resultado de este asunto que tantos usuarios de nuestro sitio web han presentado. Si tienes algo que compartir puedes dejar tu comentario.

Solución:

Segunda actualización: esta es otra forma de ver la primera solución tomada de esta respuesta de Stack Overflow que también funcionará con ConstraintLayout. Esta solución utiliza un personalizado Vista de texto. La costumbre Vista de texto devuelve la línea de base de la última línea de texto en el Vista de texto desde el getBaseline() función en lugar de la línea de base de la primera línea, que es la acción predeterminada. Esta es una solución agradable y limpia (IMO) que tiene en cuenta las TextViews pero también gravedad, etc.

Versión de Kotlin de BaselineLastLineTextView

class BaselineLastLineTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) 

    override fun getBaseline(): Int 
        val layout = layout ?: return super.getBaseline()
        val baselineOffset = super.getBaseline() - layout.getLineBaseline(0)
        return baselineOffset + layout.getLineBaseline(layout.lineCount - 1)
    


Primera actualización: esta es una actualización de mi respuesta a continuación, que sigue siendo una solución válida (IMO). Este es un enfoque alternativo que no involucra ningún código Java / Kotlin y se puede lograr simplemente usando XML.

Crea un invisible wrap_contentVista de texto que tiene el mismo tamaño de fuente que “¡Hola mundo!” Vista de texto. (Es posible que también deba considerar el relleno y los márgenes según el diseño real). Restrinja esta nueva vista a la parte inferior de “¡Hola mundo!”, Hágalo invisible y establezca el contenido en algo corto que esté garantizado para ocupar solo una línea. Esto le dará una vista de destino que tiene la misma línea base que la última línea de “¡Hola mundo!” vista.

Restrinja las líneas base de “hola” y “x” a la nueva invisible vista. Todas las vistas compartirán ahora la misma línea base y sin codificación.

ingrese la descripción de la imagen aquí



    

    

    

    

    


Primera respuesta: Como se señaló en otra respuesta, no hay forma de hacer esto simplemente usando ConstraintLayout limitaciones. Deberá recurrir a una solución programática.

Dentro de cada Vista de texto es un StaticLayout que puede revelar un poco sobre la tipografía del texto. Al referirse a la static diseño, se puede agregar relleno a las vistas apropiadas para alinear las líneas base.

En esta demostración, los tres TextViews simplemente alinee sus partes superiores. Inicialmente, las vistas se ven así:

ingrese la descripción de la imagen aquí

Cuando se hace clic en el botón, se calculan las ubicaciones de la línea base y se agrega relleno a la parte superior de la “hola” y la “x” TextViews.

ingrese la descripción de la imagen aquí

Los detalles variarán con la implementación, pero esta es la técnica general.

MainActivity.kt

class MainActivity : AppCompatActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    

    fun onClick(view: View) 
        button.isEnabled = false
        // Get the StaticLayout from the TextView
        val layout = helloView.layout

        // Get the base line location for last line of Hello World! TextView, "hi" and "x"
        val helloBaseLIne = layout.getLineBaseline(layout.lineCount - 1)
        val hiBaseLine = hiView.layout.getLineBaseline(0)
        val xBaseLine = xView.layout.getLineBaseline(0)
        
        // Shift "hi" and "x" down so base lines match that of hello world!
        hiView.updatePadding(top = helloBaseLIne - hiBaseLine)
        xView.updatePadding(top = helloBaseLIne - xBaseLine)
    

activity_main.xml



    

    

    

    

AFAIK, no hay forma de realizar esta tarea usando ConstraintLayout a partir de hoy.

Si conoce el contenido de “helloWorldTextView” de antemano, es posible que desee dividir las líneas en varios textViews y luego usar app:layout_constraintBaselineToBaselineOf.

Sé que es una solución complicada, pero es la única que me viene a la mente.

Al final de la post puedes encontrar las críticas de otros sys admins, tú además tienes la opción de dejar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *