web-dev-qa-db-fra.com

Comment créer une mise en page avec 6 boutons comme des carreaux de fenêtres

J'essaye de créer une disposition avec 6 boutons qui s'adaptent automatiquement à la taille de l'écran comme les tuiles de Windows Phone. Dans le code, je crée dynamiquement le bouton 6, 2 pour la ligne mais le bouton doit correspondre à la taille de l'écran remplissant cette dernière. Comment puis-je procéder?

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

<LinearLayout
    Android:layout_width="match_parent"
        Android:layout_height="0dip"
    Android:orientation="horizontal"
    Android:weightSum="2" >

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up" />

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up"
         />

</LinearLayout>

<LinearLayout
    Android:layout_width="match_parent"
        Android:layout_height="0dip"
    Android:orientation="horizontal"
    Android:weightSum="2" >

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up"
        />

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up"
         />

</LinearLayout>

<LinearLayout
    Android:layout_width="match_parent"
        Android:layout_height="0dip"
    Android:orientation="horizontal"
    Android:weightSum="2" >

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up"
         />

    <Button
        Android:layout_width="0dip"
                Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:background="@drawable/conv_up"
        />

</LinearLayout>

androidandroid-layoutandroid-intentandroid-listview
11
bisemanu

J'utiliserais une variable verticale LinearLayout avec trois rangées du même poids que les enfants, chaque rangée étant une variable horizontale LinearLayout ayant deux enfants du même poids, ce qui garantira que toute la zone est remplie. Pour six boutons, les performances ne devraient pas être un problème.

Si les performances vous préoccupent, vous pouvez définir les lignes sous la forme RelativeLayouts et utiliser une jambe de force pour les diviser en deux et positionner les deux enfants en conséquence.

Quand je dis a strut , je veux dire ceci:

<View Android:id="@+id/strut"
    Android:layout_width="0dp"
    Android:layout_height="0dp" 
    Android:layout_centerHorizontal="true"/>

Mise à jour: Puisque vous essayez les LinearLayouts, voici comment vous pouvez gérer les hauteurs et les largeurs:

Le parent LinearLayout peut avoir:

Android:layout_width="match_parent"
Android:layout_height="match_parent"

Les trois enfants LinearLayout auront:

Android:layout_width="match_parent"
Android:layout_height="0dip"

Les Buttons auront:

Android:layout_width="0dip"
Android:layout_height="match_parent"

Comme vous pouvez le constater, nous avons 0dip pour la propriété sur laquelle le poids est appliqué (soit sur la hauteur si le parent est orienté verticalement, ou sur la largeur si le parent est orienté horizontalement), qui devra s’agrandir pour remplir l’espace.

Voici le code XML complet (les boutons n'incluent pas les éléments dessinables, alors n'hésitez pas à ajouter le vôtre):

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

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dip"
        Android:orientation="horizontal"
        Android:layout_weight="1" >

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dip"
        Android:orientation="horizontal"
        Android:layout_weight="1" >

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dip"
        Android:orientation="horizontal"
        Android:layout_weight="1" >

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />

        <Button
            Android:layout_width="0dip"
            Android:layout_height="match_parent"
            Android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

Et le résultat: enter image description here

17
Voicu

Je pense que vous devriez jeter un oeil à GridView

5
Hein

Utilisez GridLayout! C'est parfait pour cette situation

<GridLayout
    Android:layout_width="match_parent"
    Android:layout_height="350dp"
    Android:layout_margin="0.5dp"
    Android:columnCount="2"
    Android:rowCount="3" >

    <Button
        Android:id="@+id/b_1"
         />

    <Button
        Android:id="@+id/b_2"
         />

    <Button
        Android:id="@+id/b_3"
         />

    <Button
        Android:id="@+id/b_4"
         />

    <Button
        Android:id="@+id/b_5"
         />

    <Button
        Android:id="@+id/b_6"
        />
</GridLayout>
1
user2983212

J'utilise les bibliothèques Android .v7. Ce XML a fonctionné pour moi pour créer la disposition de 2 colonnes, 3 rangées qui remplit la totalité de l'écran:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.GridLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/lib/Android.support.v7.widget.GridLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    xmlns:grid="http://schemas.Android.com/apk/res-auto"
    Android:layout_margin="0.5dp"
    app:columnCount="2"
    app:rowCount="3"
    app:useDefaultMargins="true">

    <Button
        Android:id="@+id/b_1"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="0"
        Android:text="Hellooo"/>

    <Button
        Android:id="@+id/b_2"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="1"
        Android:text="Hellooo"/>

    <Button
        Android:id="@+id/b_3"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="1"
        grid:layout_column="0"
        Android:text="Hellooo"/>

    <Button
        Android:id="@+id/b_4"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="1"
        grid:layout_column="1"
        Android:text="Hellooo"/>

    <Button
        Android:id="@+id/b_5"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="2"
        grid:layout_column="0"
        Android:text="Hellooo"/>

    <Button
        Android:id="@+id/b_6"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="2"
        grid:layout_column="1"
        Android:text="Hellooo"/>

</Android.support.v7.widget.GridLayout>
0
Gene Bo