Disposition linéaire et poids dans Android


262

Je lis toujours sur cette drôle de valeur de poids dans les documentations Android. Maintenant, je veux l'essayer pour la première fois mais cela ne fonctionne pas du tout.

Si je comprends bien des documentations cette mise en page:

  <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

  </LinearLayout>

devrait créer deux boutons qui sont alignés horizontalement et partagent l'espace également. Le problème est que les deux boutons ne se développent pas pour remplir l'espace.

J'aimerais que les boutons grandissent et remplissent toute la ligne. Si les deux boutons sont définis pour correspondre au parent, seul le premier bouton est affiché et remplit toute la ligne.


mise à jour: le support pour cent Android peut également très bien le faire. code2concept.blogspot.in/2015/08/…
nitesh

Réponses:


160

Vous ne définissez pas la layout_weightpropriété. Votre code lit weight="1"et devrait lire android:layout_weight="1".


684

3 choses à retenir:

  • définissez l' androïde: layout_width des enfants sur "0dp"
  • définissez l' androïde: weightSum du parent ( modifier: comme Jason Moore l'a remarqué, cet attribut est facultatif, car par défaut, il est défini sur la somme layout_weight des enfants)
  • définissez l' androïde: layout_weight de chaque enfant proportionnellement (par exemple weightSum = "5", trois enfants: layout_weight = "1", layout_weight = "3", layout_weight = "1")

Exemple:

    <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    </LinearLayout>

Et le résultat:

Exemple de poids de disposition


66
Merci pour le conseil sur la définition de la largeur à zéro. J'ai également constaté que la définition de weightSum sur le parent n'était pas nécessaire.
Jason Moore

30
Bon à savoir, merci. Si c'est le cas, la définition de weightSum peut toujours être utile lorsque vous ne voulez pas que les enfants remplissent 100% du parent.
Anke

13
Ceci est correct pour les dispositions XML statiques. Si vous ajoutez des vues dynamiquement au moment de l'exécution, vous devrez utiliser addView avec des paramètres de mise en page tels que addView(button, new LinearLayout.LayoutParams(0, height, 1));Cela est vrai même si vous gonflez des mises en page avec les valeurs de largeur et de poids correctes.
Sittelle du

Vous dites définir l'androïde: weightSum du parent - définissez-le sur une valeur ou mettez-le simplement, comment cela devrait-il être défini?
theJerm

1
@batbrat est correct, je générais dynamiquement l'interface utilisateur. Je traite parfois des fragments XML comme des modèles, puis je modifie ou remplis au moment de l'exécution. Cette astuce n'a pas fonctionné pour moi dans ce cas, j'ai dû redéfinir la largeur et le poids explicites pour le faire fonctionner.
Sittelle

52

Ça l'est android:layout_weight. Le poids ne peut être utilisé qu'en LinearLayout. Si l'orientation de la présentation linéaire est verticale, utilisez-la android:layout_height="0dp"et si l'orientation est horizontale, utilisez-la android:layout_width = "0dp". Cela fonctionnera parfaitement.



16

Essayez de régler les layout_widthdeux boutons sur "0dip" et les weightdeux boutons sur0.5


Maintenant, les deux boutons ont disparu de l'écran
Janusz

d'accord, puis définissez la largeur de mise en page sur fill_parent et les poids sur 0,5
jqpubliq

jetez un oeil à ceci et cela . Je suis un peu confus quant à la raison pour laquelle cela ne fonctionne toujours pas, mais cela vous donnera peut-être des idées.
jqpubliq

7

LinearLayout prend en charge l'attribution d'un poids à chaque enfant. Cet attribut attribue une valeur "d' importance " à une vue et lui permet de se développer pour remplir tout espace restant dans la vue parent. Le poids par défaut est zéro

calcul pour attribuer tout espace restant / supplémentaire entre l'enfant. (pas l'espace total)

espace attribué à l'enfant = (poids individuel de l'enfant) / (somme du poids de chaque enfant dans la disposition linéaire)

Exemple (1): s'il y a trois zones de texte et deux d'entre elles déclarent un poids de 1, tandis que la troisième n'a pas de poids (0), alors l' espace restant / supplémentaire est attribué à

1st text box = 1/(1+1+0) 
2nd text box = 1/(1+1+0) 
3rd text box = 0/(1+1+0) 

Exemple (2) : disons que nous avons une étiquette de texte et deux éléments d'édition de texte sur une ligne horizontale. L'étiquette n'a pas de poids de disposition spécifié, elle occupe donc l'espace minimum requis pour le rendu. Si la mise en page_poids de chacun des deux éléments d'édition de texte est définie sur 1, la largeur restante dans la mise en page parent sera répartie également entre eux (car nous prétendons qu'ils sont également importants).

calculation : 
1st label = 0/(0+1+1) 
2nd text box = 1/(0+1+1) 
3rd text box = 1/(0+1+1)

Si la première zone de texte a un poids de mise en page de 1 et la deuxième zone de texte a un poids de mise en page de 2, alors un tiers de l'espace restant sera donné au premier et deux tiers au second (car nous prétendons que le second est plus important).

calculation : 
1st label = 0/(0+1+2) 
2nd text box = 1/(0+1+2) 
3rd text box = 2/(0+1+2) 

7

Dans le champ largeur du bouton, remplacez wrap-contentpar 0dp.
Utilisez l'attribut layout_weight d'une vue.

android:layout_width="0dp"  

Voici à quoi ressemblera votre code:

<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">

 <Button
    android:text="Register"
    android:id="@+id/register"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />

 <Button
    android:text="Not this time"
    android:id="@+id/cancel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />    

</LinearLayout>

layout_weight est utilisé pour distribuer l'espace laissé en proportions. Dans ce cas, les deux boutons prennent une largeur de "0dp". Ainsi, l'espace restant sera divisé en proportion 1: 1 entre eux, c'est-à-dire que l'espace sera divisé également entre les vues de bouton.


6

Comme réponse de @Manoj Seelan

Remplacez android:layout_weightpar android:weight.

Lorsque vous utilisez Weight avec LinearLayout. vous devez ajouter weightSumdans LinearLayoutet selon l'orientation de votre , LinearLayoutvous devez fixer 0dppour la largeur / hauteur à tous LinearLayouts `vue enfants

Exemple :

Si l'orientation de Linearlayoutest Vertical, définissez la largeur de toutes les LinearLayoutvues enfants de0dp

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

Si l'orientation Linearlayoutde est horizontal, définissez la hauteur de toutes les LinearLayoutvues Enfants avec 0dp.

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

5

Peut-être que définir les deux propriétés des boutons layout_width sur "fill_parent" fera l'affaire.

Je viens de tester ce code et cela fonctionne dans l'émulateur:

<LinearLayout android:layout_width="fill_parent"
          android:layout_height="wrap_content">

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="hello world"/>

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="goodbye world"/>

</LinearLayout>

Assurez-vous de définir layout_width sur "fill_parent" sur les deux boutons.


1
cela ne fait que pousser le bouton droit hors de l'écran et n'affiche que le premier bouton.
Janusz

4
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/logonFormButtons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="true"       
        android:orientation="horizontal">

        <Button
            android:id="@+id/logonFormBTLogon"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/logon"
            android:layout_weight="0.5" />

        <Button
            android:id="@+id/logonFormBTCancel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/cancel"
            android:layout_weight="0.5" />
    </LinearLayout>

Je préfère maintenant utiliser layout_weight = "50" et layout_width = "0px"
Yar

2

Dans le code XML ci-dessus, définissez la android:layout_weightdisposition linéaire comme suit 2: android:layout_weight="2"


3
Pourquoi est-ce nécessaire? Pourquoi le poids de mise en page de 2 est-il important? Pourquoi pas 20 ou 200?
Conrad Frix

2

De plus, vous devez l'ajouter android:layout_width="0dp"pour les vues enfants [Vues boutons] deLinerLayout


2

Vous devez écrire comme ça son travail pour moi

<LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
            android:weightSum="2">

         <Button
            android:text="Register"
            android:id="@+id/register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

         <Button
            android:text="Not this time"
            android:id="@+id/cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

2

Voici les modifications (marquées en GRAS ) dans votre code:

<LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

  </LinearLayout>

Étant donné que votre LinearLayout a une orientation horizontale, vous devrez donc conserver votre largeur uniquement à 0dp. pour utiliser des poids dans cette direction. (Si votre orientation était verticale, vous n'auriez gardé votre hauteur que 0 dp) .

Puisqu'il y a 2 vues et que vous avez placé android:layout_weight="1"pour les deux vues, cela signifie qu'il divisera les deux vues également dans le sens horizontal (ou en largeur).


1
 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button 2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 3" />

    </LinearLayout>

0

C'est la réponse parfaite à votre problème

  <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:orientation="horizontal"  >   
     <Button 
        android:text="Register" android:id="@+id/register"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
     <Button 
        android:text="Not this time" android:id="@+id/cancel"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
  </LinearLayout>

3
Est-ce donc "poids" ou "poids_disposition" ??
IgorGanapolsky

C'est android: layout_weight
Mahendra Gunawardena


0
 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="#008">

            <RelativeLayout
                android:id="@+id/paneltamrin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"

                >
                <Button
                    android:id="@+id/BtnT1"
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                    android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/paneltamrin2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                >
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                     android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />

            </RelativeLayout>
        </LinearLayout>

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.