Alignement des vues de texte sur les bords gauche et droit dans la mise en page Android

158

Je commence avec Android. J'ai du mal à créer une mise en page simple.

Je voudrais utiliser un LinearLayoutpour positionner deux TextViewsdans une seule rangée. Un TextViewsur le côté gauche, l'autre sur le côté droit (analogue à float: left, float: right en CSS).

Est-ce possible ou dois-je utiliser une ViewGroupimbrication de disposition différente ou supplémentaire pour y parvenir?

Voici ce que j'ai jusqu'à présent:

<?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>
Richard
la source

Réponses:

290

Utilisez un RelativeLayoutavec layout_alignParentLeftet 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>

De plus, vous devriez probablement utiliser dip(ou dp) plutôt que spdans votre mise en page . spreflètent les paramètres de texte ainsi que la densité de l'écran, de sorte qu'ils ne servent généralement qu'à dimensionner les éléments de texte.

Dave Webb
la source
57
Pour éviter que le contenu ne se chevauche, vous pouvez également ajouter 'android: layout_toLeftOf = "@ + id / mytextview2"' à la première vue de texte
Rollin_s
Pour les tables dynamiques, vous pouvez faire: TableRow.LayoutParams col1Params = new TableRow.LayoutParams (); // Récapitulation du contenu de la ligne col1Params.height = LayoutParams.WRAP_CONTENT; col1Params.width = LayoutParams.WRAP_CONTENT; // Définit la gravité pour centrer la gravité de la colonne col1Params.gravity = Gravity.LEFT;
siddhusingh
3
Pour une meilleure compatibilité et une meilleure prise en charge des différents écrans de périphériques, utilisez "android: layout_alignParentEnd =" true "" (lors de l'utilisation de layout_alignParentRight) et "android: layout_alignParentStart =" true "" (lors de l'utilisation de layout_alignParentLeft).
ivanleoncz
@Rollin_s, je t'aime.
Vegas
89

Vous pouvez utiliser la propriété gravity pour "flotter" les vues.

<?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
la source
1
Malheureusement, il semble que cela ne fasse pas en sorte que les deux éléments soient sur la même ligne
Webnet
1
La gravité n'affecte-t-elle pas uniquement "l'alignement du texte"?
Joshua Pinter
3
désolé, ça marche. J'avais oublié d'ajouter android: layout_weight = "1". Après avoir ajouté que c'est bien.
Abdullah Umer
13

Cela peut être fait avec LinearLayout(moins de frais généraux et plus de contrôle que l'option Disposition relative). Donnez à la deuxième vue l'espace restant pour qu'elle gravitypuisse fonctionner. Testé à nouveau à l'API 16.

Preuve

<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 vous souhaitez limiter la taille de la première vue de texte, procédez comme suit:

Ajustez les poids au besoin. La disposition relative ne vous permettra pas de définir un pourcentage de pondération comme celui-ci, seulement un dp fixe de l'une des vues

Preuve 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
la source
8

Même avec le conseil de Rollin_s, la réponse de Dave Webb n'a pas fonctionné pour moi. Le texte de droite TextViewchevauchait toujours le texte de gaucheTextView .

J'ai finalement obtenu le comportement que je voulais avec quelque chose comme ça:

<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>

Notez que mytextview2 est "android:layout_width"défini comme "match_parent".

J'espère que cela aide quelqu'un!

citrouille65
la source
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
la source
1

Dans le cas où vous souhaitez que les éléments gauche et droit enveloppent le contenu mais ont l'espace du milieu

<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
la source
0

Il existe de nombreuses autres façons d'accomplir cela, je ferais quelque chose comme ça.

<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
la source
0

La réponse de Dave Webb a fonctionné pour moi. Merci! Voici mon code, j'espère que cela aide quelqu'un!

<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>

Image: Image

GinCanhViet
la source
0

entrez la description de l'image ici

Ce code divisera le contrôle en deux côtés égaux.

    <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>
Dit Muhammad Idrees
la source