Alinear vistas de texto en los bordes izquierdo y derecho en el diseño de Android

158

Estoy empezando con Android. Tengo problemas para lograr un diseño simple.

Me gustaría usar a LinearLayoutpara colocar dos TextViewsen una sola fila. Uno TextViewen el lado izquierdo, el otro en el lado derecho (análogo a float: left, float: right en CSS).

¿Es eso posible, o necesito usar un ViewGroupdiseño diferente o más anidado para lograrlo?

Esto es lo que tengo hasta ahora:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="horizontal" android:padding="10sp">
<TextView android:id="@+id/mytextview1" android:layout_height="wrap_content" android:text="somestringontheleftSomestring" android:layout_width="wrap_content"/>
<TextView android:id="@+id/mytextview2" android:layout_height="wrap_content" android:ellipsize="end"
    android:text="somestringontheright" android:layout_width="wrap_content"/>
</LinearLayout>
Ricardo
fuente

Respuestas:

290

Use un RelativeLayoutcon layout_alignParentLefty layout_alignParentRight:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:padding="10dp">

    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:id="@+id/mytextview1"/>

    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentRight="true" 
        android:id="@+id/mytextview2"/>

</RelativeLayout>

Además, probablemente debería usar dip(o dp) en lugar de spen su diseño . spreflejan la configuración del texto, así como la densidad de la pantalla, por lo que generalmente son solo para dimensionar elementos de texto.

Dave Webb
fuente
57
Para evitar que el contenido se superponga, es posible que también desee agregar 'android: layout_toLeftOf = "@ + id / mytextview2"' a la primera vista de texto
Rollin_s
Para las tablas dinámicas, puede hacer: TableRow.LayoutParams col1Params = new TableRow.LayoutParams (); // Finalice el contenido de la fila col1Params.height = LayoutParams.WRAP_CONTENT; col1Params.width = LayoutParams.WRAP_CONTENT; // Establece la gravedad para centrar la gravedad de la columna col1Params.gravity = Gravity.LEFT;
siddhusingh
3
Para una mejor compatibilidad y soporte para diferentes pantallas de dispositivos, use "android: layout_alignParentEnd =" true "" (cuando usa layout_alignParentRight) y "android: layout_alignParentStart =" true "" (cuando usa layout_alignParentLeft).
ivanleoncz
@Rollin_s, te amo.
Vegas
89

Puede usar la propiedad de gravedad para "flotar" vistas.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center_vertical|center_horizontal"
            android:orientation="horizontal">

        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:gravity="left"
            android:layout_weight="1"
            android:text="Left Aligned"
            />

        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_weight="1"
            android:text="Right Aligned"
            />
    </LinearLayout>

</LinearLayout>
JeremyFromEarth
fuente
1
Desafortunadamente, parece que esto no hace que ambos elementos estén en la misma línea
Webnet
1
¿La gravedad no solo afecta la "alineación del texto"?
Joshua Pinter el
3
Lo siento, está funcionando. Olvidé agregar android: layout_weight = "1". Después de agregar que está bien.
Abdullah Umer
13

Se puede hacer con LinearLayout(menos gastos generales y más control que la opción Diseño relativo). Dele a la segunda vista el espacio restante para que gravitypueda funcionar. Probado de nuevo a API 16.

Prueba

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aligned left" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:text="Aligned right" />
</LinearLayout> 

Si desea limitar el tamaño de la primera vista de texto, haga lo siguiente:

Ajuste los pesos según sea necesario. El diseño relativo no le permitirá establecer un peso porcentual como este, solo un dp fijo de una de las vistas

Prueba 2

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Aligned left but too long and would squash the other view" />

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:text="Aligned right" />
</LinearLayout>
Carson Holzheimer
fuente
8

Incluso con el consejo de Rollin, la respuesta de Dave Webb no funcionó para mí. El texto de la derecha TextViewtodavía se superponía con el texto de la izquierda TextView.

Finalmente obtuve el comportamiento que quería con algo como esto:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout01" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:padding="10dp">

<TextView 
    android:id="@+id/mytextview1"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true" />

<TextView 
    android:id="@+id/mytextview2"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_toRightOf="@id/mytextview1"
    android:gravity="right"/>

</RelativeLayout>

Tenga en cuenta que mytextview2 se ha "android:layout_width"configurado como "match_parent".

¡Espero que esto ayude a alguien!

pumpkinpie65
fuente
4

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Hello world" />

<View
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Gud bye" />

Taj Mb
fuente
1

En caso de que desee que los elementos izquierdo y derecho envuelvan contenido pero tengan el espacio intermedio

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</LinearLayout>
funct7
fuente
0

Hay muchas otras formas de lograr esto, haría algo como esto.

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="30dp"
        android:text="YOUR TEXT ON THE RIGHT"
        android:textSize="16sp"
        android:textStyle="italic" />


    <TextView
        android:id="@+id/textLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="30dp"
        android:text="YOUR TEXT ON THE LEFT"
        android:textSize="16sp" />
</RelativeLayout>
NelsonRoberts
fuente
0

La respuesta de Dave Webb funcionó para mí. ¡Gracias! Aquí mi código, ¡espero que esto ayude a alguien!

<RelativeLayout
    android:background="#FFFFFF"
    android:layout_width="match_parent"
    android:minHeight="30dp"
    android:layout_height="wrap_content">
    <TextView
        android:height="25dp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="ABA Type"
        android:padding="3dip"
        android:layout_gravity="center_vertical"
        android:gravity="left|center_vertical"
        android:layout_height="match_parent" />
    <TextView
        android:background="@color/blue"
        android:minWidth="30px"
        android:minHeight="30px"
        android:layout_column="1"
        android:id="@+id/txtABAType"
        android:singleLine="false"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content" />
</RelativeLayout>

Imagen: Imagen

GinCanhViet
fuente
0

ingrese la descripción de la imagen aquí

Este Código dividirá el control en dos lados iguales.

    <LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/linearLayout">
    <TextView
        android:text = "Left Side"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight = "1"
        android:id = "@+id/txtLeft"/>

    <TextView android:text = "Right Side"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight = "1"
        android:id = "@+id/txtRight"/>
    </LinearLayout>
Sayed Muhammad Idrees
fuente