web-dev-qa-db-fra.com

est-il possible de répartir uniformément les boutons sur toute la largeur d'une application linéaire Android

J'ai une disposition linéaire (orientée horizontalement) qui contient 3 boutons. Je veux que les 3 boutons aient une largeur fixe et soient répartis uniformément sur la largeur de la mise en page linéaire.

Je peux gérer cela en réglant la gravité de la structure linéaire sur le centre, puis en ajustant le rembourrage des boutons, mais cela fonctionne pour une largeur fixe et ne fonctionne pas pour changer de périphérique ou d'orientation.

<LinearLayout Android:id="@+id/LinearLayout01" 
Android:layout_height="wrap_content" 
Android:orientation="horizontal" 
Android:layout_width="fill_parent" 
Android:gravity="center">

<Button 
Android:id="@+id/btnOne"
Android:layout_width="wrap_content" 
Android:layout_height="wrap_content" 
Android:width="120dip"></Button>

<Button 
Android:id="@+id/btnTwo"
Android:layout_width="wrap_content" 
Android:layout_height="wrap_content" 
Android:width="120dip"></Button>


<Button 
Android:id="@+id/btnThree"
Android:layout_width="wrap_content" 
Android:layout_height="wrap_content" 
Android:width="120dip"></Button>

</LinearLayout>
212
yamspog

En développant la réponse de fedj , si vous définissez layout_width sur 0dp et définissez le layout_weight sur chacun des boutons sur 1, la largeur disponible sera partagée de manière égale entre les boutons.

295
Dan Dyer

Si vous ne voulez pas que les boutons soient redimensionnés, mais ajustez l'espacement entre les boutons (espacement égal entre tous les boutons), vous pouvez utiliser des vues avec weight = "1" pour remplir l'espace entre les boutons:

    <Space
        Android:layout_width="0dp"
        Android:layout_height="1dp"
        Android:layout_weight="1" >
    </Space>

    <ImageButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:adjustViewBounds="true"
        Android:background="@null"
        Android:gravity="center_horizontal|center_vertical"
        Android:src="@drawable/tars_active" />

    <Space
        Android:layout_width="0dp"
        Android:layout_height="1dp"
        Android:layout_weight="1" >
    </Space>

    <ImageButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:adjustViewBounds="true"
        Android:background="@null"
        Android:gravity="center_horizontal|center_vertical"
        Android:src="@drawable/videos_active" />

    <Space
        Android:layout_width="0dp"
        Android:layout_height="1dp"
        Android:layout_weight="1" >
    </Space>
194
stoefln

Vous pouvez l'utiliser avec comme suit.

<LinearLayout
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    Android:layout_marginTop="15dp">
    <Space
        Android:layout_weight="1"
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"/>
    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Save"/>
    <Space
        Android:layout_weight="1"
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"/>
    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Reset"/>
    <Space
        Android:layout_weight="1"
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"/>
    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="cancel"/>
    <Space
        Android:layout_weight="1"
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"/>
</LinearLayout>
20
Sandhu

Vous pouvez le faire en donnant à Views un layout_width de 0dp et un layout_weight de 1:

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Button
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"/>

    <TextView
        Android:layout_width="0dp"
        Android:text="example text"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"/>

</LinearLayout>

Le fonctionnement d'Android layout_weight est le suivant:  

  • premièrement, il regarde à la taille qu'une vue prend normalement et réserve cet espace.
  • deuxièmement, si la disposition est match_parent, elle divisera l’espace qui reste dans le rapport entre layout_weights. Ainsi, si vous avez donné les vues layout_weight="2" et layout_weight="1", le rapport résultant sera de 2 à 1, c'est-à-dire que la première vue aura 2/3 de l'espace restant et l'autre vue 1/3.

C’est pourquoi, si vous donnez à layout_width une taille de 0dp, la première étape n’a pas de valeur ajoutée, car aucun espace n’est attribué aux deux vues. Ensuite, seul le second point détermine l'espace que chaque View obtient, donnant ainsi à Views l'espace que vous avez spécifié en fonction du rapport! 

Pour expliquer pourquoi 0dp entraîne une déviation égale de l'espace en fournissant un exemple montrant le contraire: Le code ci-dessous aurait un résultat différent, car example text a maintenant une largeur supérieure à 0dp, car il est remplacé par wrap_content. espace laissé pour diviser moins de 100% parce que le texte prend de l'espace. Le résultat sera qu’ils auront 50% de l’espace libre, mais que le texte a déjà pris de la place, donc TextView aura bien plus de 50% de l’espace total.

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Button
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"/>

    <TextView
        Android:layout_width="wrap_content"
        Android:text="example text"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"/>

</LinearLayout>
18
Joop

Eh bien, si vous avez exactement 3 boutons et s'il est correct (ou même prévu) que les boutons externes soient alignés sur les côtés gauche et droit, vous voudrez peut-être essayer un RelativeLayout qui est moins onéreux (dans de nombreuses situations).

Vous pouvez utiliser layout_alignParentBottom pour aligner tous les boutons sur le bas de la présentation. Utilisez layout_alignParentLeft and Right pour les boutons extérieurs et layout_centerHorizontal pour le bouton du milieu.

Cela fonctionnera bien sur différentes orientations et tailles d'écran.

13
marsbear

Vous devriez jeter un coup d'œil à Android: attribut layout_weight

11
fedj

Je vous suggère d'utiliser l'attribut weightSum de LinearLayout.

L'ajout du tag Android:weightSum="3" à la déclaration xml de votre LinearLayout, puis de Android:layout_weight="1" à vos boutons entraîne la distribution uniforme des 3 boutons.

4
matdev

j'ai créé une vue personnalisée DistributeLayout pour le faire.

4
martyglaubitz

Pour espacer uniformément deux boutons dans une disposition linéaire horizontale, j'ai utilisé 3 objets LinearLayout pour agir comme des espaces à redimensionner automatiquement. J'ai positionné ces objets LinearLayout comme suit:

Bouton [] Bouton1 [] Bouton2 []

([] représente un objet LinearLayout utilisé pour l'espacement)

puis je règle chacun des poids de ces objets [] LinearLayout à 1 et les boutons sont espacés de manière égale.

J'espère que cela t'aides.

4
Muhammad

Ceci peut être réalisé en assignant weight à chaque bouton ajouté à l'intérieur du conteneur, ce qui est très important pour définir l'orientation horizontale:

    int buttons = 5;

    RadioGroup rgp = (RadioGroup) findViewById(R.id.radio_group);

    rgp.setOrientation(LinearLayout.HORIZONTAL);

    for (int i = 1; i <= buttons; i++) {
        RadioButton rbn = new RadioButton(this);         
        rbn.setId(1 + 1000);
        rbn.setText("RadioButton" + i);
        //Adding weight
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f);
        rbn.setLayoutParams(params);
        rgp.addView(rbn);
    }

afin que nous puissions obtenir cela dans notre appareil à la suite:

 enter image description here

même si nous faisons pivoter notre appareil, la weight définie dans chaque bouton peut répartir uniformément les éléments le long du conteneur:

 enter image description here

4
Elenasys

La meilleure approche consiste à utiliser TableLayout avec Android: layout_width = "match_parent" et dans les colonnes, utiliser Android: layout_weight = "1" pour toutes les colonnes.

3
Prashant

Le moyen le plus simple et le plus rapide (mais pas le meilleur) consiste à ajouter un TextView avec un attribut de texte vide, comme ceci

Android:text=""

la couleur d'arrière-plan doit être identique à LinearLayout, vous pouvez alors utiliser la propriété padding, comme ceci 

Android:paddingBottom="250dp"

ou ce que vous avez besoin . Voici un exemple.

2
Cesar Bobadilla

Enfants à pondération égale

Pour créer une disposition linéaire dans laquelle chaque enfant utilise la même quantité de espace sur l'écran, définissez Android: layout_height de chaque vue sur "0dp" (pour une disposition verticale) ou Android: layout_width de chaque vue à "0dp" (pour une mise en page horizontale). Puis définissez Android: layout_weight de chaque vue à "1".

Pour que cela fonctionne dans le groupe de vues LinearLayout, les valeurs d'attribut pour Android:layout_width et Android:layout_height doivent être égales à "match_parent"...

2
Gibran Castillo

Surtout toutes les réponses sont exactes mais dans le cas où vous avez besoin de fonctionnalités visibles et disparues, cette méthode pragmatique fonctionnera bien.

<LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="50dp"
        Android:orientation="horizontal">

        <Button
            Android:id="@+id/btnOne"
            Android:layout_width="120dp"
            Android:layout_height="match_parent"></Button>

        <Button
            Android:id="@+id/btnTwo"
            Android:layout_width="120dp"
            Android:layout_height="match_parent"></Button>


        <Button
            Android:id="@+id/btnThree"
            Android:layout_width="120dp"
            Android:layout_height="match_parent"></Button>
    </LinearLayout>



 float width=CommonUtills.getScreenWidth(activity);
            int cardWidth=(int)CommonUtills.convertDpToPixel (((width)/3),activity);

LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(width,
                        LinearLayout.LayoutParams.MATCH_PARENT);

btnOne.setLayoutParams(params);
btnTwo.setLayoutParams(params);
btnThree.setLayoutParams(params);

public class CommonUtills {
public static float getScreenWidth(Context context) {
        float width = (float) 360.0;
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        width = displayMetrics.widthPixels / displayMetrics.density;
        return width;
    }
}
2
Rajesh Nasit

Les réponses ci-dessus utilisant layout_did ne fonctionnaient pas pour moi, mais les suivantes fonctionnaient.

<LinearLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    Android:layout_weight="0.1"
    Android:layout_gravity="center_horizontal"
    >

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_gravity="center"
       />

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_gravity="center"
        Android:layout_marginLeft="40dp"
        Android:layout_marginStart="40dp"/>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_gravity="center"
        Android:layout_marginLeft="40dp"
        Android:layout_marginStart="40dp"
        />

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_gravity="center"
        Android:layout_marginLeft="40dp"
        Android:layout_marginStart="40dp"/>

</LinearLayout>

Voici à quoi ça ressemble à l'écran,

 enter image description here

2
sean le roy
<LinearLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content">

<TextView
    Android:text="Tom"
    Android:layout_width="wrap_content"
    Android:layout_height="200dp"
    Android:textSize="24sp" />

<TextView
    Android:text="Tim"
    Android:layout_width="wrap_content"
    Android:layout_height="200dp"
    Android:textSize="24sp" />

<TextView
    Android:text="Todd"
    Android:layout_width="wrap_content"
    Android:layout_height="200dp"
    Android:textSize="24sp" />

1
basem
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <TextView
        Android:text="Tom"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:textSize="24sp" 
        Android:layout_weight="3"/>

    <TextView
        Android:text="Tim"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:textSize="24sp"
        Android:layout_weight="3"/>

    <TextView
        Android:text="Todd"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:textSize="24sp" 
        Android:layout_weight="3"/>

</LinearLayout>

En cercle, on suppose que Tom, Tim et Todd mesurent 3 centimètres. Si vous voulez que l'écran tactile soit tactile, mettez-le comme on suppose que Tom et Tim mesurent 1 centimètre, ce qui signifie qu'ils se combinent de manière virtuelle, mais que son plan 2D est en bas. Ceci est affiché à l'écran.

0
Dinesh Gowd