web-dev-qa-db-fra.com

GridLayout hétérogène

MISE À JOUR - ma solution de travail: https://stackoverflow.com/a/21233824/902172


J'essaie d'implémenter la disposition ci-dessous:

Target Layout

Je suppose que GridLayout convient à mes besoins, mais après 2 heures de lutte, je ne pouvais même pas créer une mise en page similaire .. La mise en page est se redimensionner à tort , il dépasse l'écran du téléphone et il ne s'étend pas non plus les lignes et colonnes spécifiées.

Ici, j'ai sélectionné un bouton pour que vous puissiez voir comment il dépasse les limites:

Fail

et voici le code xml associé: https://Gist.github.com/2834492

J'ai atteint une disposition similaire avec des dispositions linéaires imbriquées mais il n'est pas possible de le redimensionner correctement pour différentes tailles d'écran.


UPDATE - mise en œuvre approximative de LinearLayout:

Le code XML: https://Gist.github.com/cdoger/2835887 Cependant, le problème est qu'il ne se redimensionne pas correctement ici quelques captures d'écran avec différentes configurations d'écran:

enter image description here

enter image description here

enter image description here


TLDR: Quelqu'un peut-il me montrer une implémentation de disposition hétérogène avec GridLayout comme dans la première image?

34
C.d.

Voici donc la solution que j'ai promise après un an =) Il utilise essentiellement ViewTreeObserver pour obtenir les dimensions de la disposition parent et créer des vues personnalisées en conséquence. Étant donné que ce code a un an, ViewTreeObserver n'est peut-être pas le meilleur moyen d'obtenir les dimensions de manière dynamique.

Vous pouvez trouver le code source complet ici: https://github.com/cdoger/Android_layout

J'ai divisé l'écran en 8 largeurs égales et 6 hauteurs égales. Voici un aperçu de la façon dont j'ai présenté les vues:

final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        final int oneUnitWidth = mainLayout.getMeasuredWidth() / 8;
        final int oneUnitHeight = mainLayout.getMeasuredHeight() / 6;
        /**
         * 1
         ***************************************************************/
        final RelativeLayout.LayoutParams otelParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        // otelParams.setMargins(0, 0, 2, 0);
        View1.setLayoutParams(otelParams);
        /***************************************************************/

        /**
         * 2
         ***************************************************************/
        final RelativeLayout.LayoutParams otherParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otherParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otherParams.addRule(RelativeLayout.RIGHT_OF, View1.getId());
        otherParams.setMargins(2, 0, 0, 0);
        View2.setLayoutParams(otherParams);
        /***************************************************************/
//... goes on like this

Voici la capture d'écran finale:

enter image description here

5
C.d.

CD.,

Le problème auquel vous êtes confronté est dû à une utilisation inappropriée de GridLayout. Le GridLayout est conçu pour afficher ses enfants dans une grille et vous essayez de remplacer cela sans étendre le GridLayout. Bien que ce que vous voulez puisse être accompli dans le code (en utilisant numcolumns et columnize), il ne sera pas utile pour plusieurs tailles d'écran sans beaucoup de code.

La seule solution adéquate qui ne nécessitera pas une tonne de piratage est une utilisation judicieuse de LinearLayout et RelativeLayout. LinearLayout ne doit pas être utilisé exclusivement car il est conçu pour déposer des éléments sur une ligne (horizontalement ou verticalement uniquement). Cela devient particulièrement apparent lorsque vous essayez de faire les quatre boutons du bas. Alors que les boutons ci-dessus peuvent être réalisés avec LinearLayout avec très peu d'effort, RelativeLayout est ce dont vous avez besoin pour les quatre boutons du bas.

Remarque: RelativeLayout peut être un peu délicat pour ceux qui ont peu d'expérience avec eux. Certains pièges comprennent: les enfants qui se chevauchent, les enfants qui quittent l'écran, le rendu de la hauteur et de la largeur mal appliqués. Si vous souhaitez un exemple, faites-le moi savoir et je modifierai ma réponse.

Note finale: Je suis tout à fait d'accord pour utiliser les objets du framework actuel de manière unique, et je préfère vraiment fournir la solution demandée. La solution n'est cependant pas viable compte tenu des contraintes de la question.

(Révision) Solution 1

Après une réflexion approfondie hier soir, cela peut être accompli avec un pur LinearLayout. Bien que je n'aime pas cette solution, elle devrait être compatible avec plusieurs écrans et ne nécessite aucun outil de ma part. Il faut être prudent avec trop de LinearLayouts, car selon les développeurs de Google, cela peut entraîner un chargement lent des interfaces utilisateur en raison de la propriété layout_weight. Une deuxième solution utilisant RelativeLayout sera fournie à mon retour à la maison. Maintenant testé Ceci fournit les paramètres de mise en page souhaités sur toutes les tailles d'écran et orientations.

<?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="0dp"
        Android:layout_weight="1"
        Android:orientation="vertical">
        <LinearLayout 
            Android:layout_width="match_parent" 
            Android:layout_height="0dp" 
            Android:layout_weight="1" 
            Android:orientation="horizontal"> 
            <Button 
                Android:id="@+id/Button01" 
                Android:layout_width="0" 
                Android:layout_height="match_parent" 
                Android:layout_weight="1" 
                Android:text="Button" />     
            <Button 
                Android:id="@+id/Button02" 
                Android:layout_width="0" 
                Android:layout_height="match_parent" 
                Android:layout_weight="1" 
                Android:text="Button" />     
        </LinearLayout> 
        <Button 
            Android:id="@+id/button3" 
            Android:layout_width="match_parent" 
            Android:layout_height="0dp"
            Android:layout_weight="1" 
            Android:text="Button" />   
        <LinearLayout 
            Android:layout_width="match_parent" 
            Android:layout_height="0dp" 
            Android:layout_weight="1.00"
            Android:orientation="horizontal">  
            <Button 
                Android:id="@+id/button1" 
                Android:layout_width="0dp" 
                Android:layout_height="match_parent" 
                Android:layout_weight="1" 
                Android:text="Button" />   
            <Button 
                Android:id="@+id/button2" 
                Android:layout_width="0dp" 
                Android:layout_height="match_parent" 
                Android:layout_weight="1" 
                Android:text="Button" />     
        </LinearLayout>
    </LinearLayout>    
    <LinearLayout 
        Android:layout_width="match_parent" 
        Android:layout_height="0dp" 
        Android:layout_weight="1" 
        Android:orientation="horizontal">     
        <LinearLayout 
            Android:layout_width="0dp" 
            Android:layout_height="match_parent" 
            Android:layout_weight="1" 
            Android:orientation="vertical" >    
            <Button 
                Android:id="@+id/button4" 
                Android:layout_width="match_parent" 
                Android:layout_height="0dp"
                Android:layout_weight="1" 
                Android:text="Button" />     
            <Button 
                Android:id="@+id/button5" 
                Android:layout_width="match_parent" 
                Android:layout_height="0dp" 
                Android:layout_weight="2" 
                Android:text="Button" />     
        </LinearLayout>     
        <LinearLayout 
            Android:layout_width="0dp" 
            Android:layout_height="match_parent" 
            Android:layout_weight="1" 
            Android:orientation="vertical" > 
            <Button 
                Android:id="@+id/button6" 
                Android:layout_width="match_parent" 
                Android:layout_height="0dp" 
                Android:layout_weight="2" 
                Android:text="Button" /> 
            <Button 
                Android:id="@+id/button7" 
                Android:layout_width="match_parent" 
                Android:layout_height="0dp" 
                Android:layout_weight="1" 
                Android:text="Button" /> 
        </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

Explication de la solution 1

La clé de LinearLayouts est de définir vos impératifs en tant que dispositions distinctes et d'imbriquer les autres en elles. Lorsque vous appliquez des contraintes à davantage de dimensions, davantage de mises en page linéaires doivent être ajoutées pour encapsuler les autres. Pour le vôtre, il était crucial d'avoir deux parents de plus afin de maintenir la proportion. Un bon indicateur du moment où vous devez ajouter un autre niveau est lorsque vous avez pour utiliser layout_weight en utilisant autre chose qu'une valeur entière. Il devient simplement difficile de calculer correctement. De là, il était relativement simple de le diviser en colonnes.

Solution 2 (échec)

Bien que j'aie pu obtenir des résultats souhaitables en utilisant RelativeLayout et "struts", je ne pouvais le faire qu'avec des dispositions qui étaient des multiples de 2 boutons de hauteur. Une telle astuce serait géniale car les niveaux de mise en page sont considérablement réduits, donc je travaillerai sur une solution XML pure et publierai la réponse ici si et quand j'y arriverai. En attendant, le LinearLayout ci-dessus devrait parfaitement répondre à vos besoins.

J'espère que cela t'aides,

FuzzicalLogic

17
Fuzzical Logic

J'ai lu ce fil et j'ai réalisé que je voulais une solution plus plate que celles avec une disposition linéaire. Après quelques recherches, j'ai fini par faire ma propre mise en page. Il est inspiré d'un GridLayout mais diffère un peu.

Veuillez noter que si vous souhaitez copier-coller le code, vous devrez modifier les noms de packages à certains endroits.

Cette disposition a 4 paramètres de disposition que les enfants utilisent pour se positionner. Ce sont layout_left, layout_top, layout_right, layout_bottom. Le ICGridLayout lui-même a deux attributs: layout_spacing et colonnes.

Columns indique à la mise en page combien de colonnes vous voulez qu'elle contienne. Il calculera ensuite la taille d'une cellule de la même hauteur que la largeur. Quelle sera la largeur/colonnes des mises en page.

espacement est la quantité d'espace que vous souhaitez entre chaque enfant.

Les attributs layout_left | top | right | bottom sont les coordonnées de chaque côté. La mise en page ne fait aucun calcul afin d'éviter une collision ou quoi que ce soit. Cela met simplement les enfants là où ils veulent être.

Si vous souhaitez avoir des carrés plus petits, il vous suffit d'augmenter l'attribut des colonnes.

Gardez à l'esprit qu'il s'agit d'un prototype rapide, je continuerai à travailler dessus et lorsque je me sentirai prêt, je le téléchargerai sur Github et mettrai un commentaire ici.

Tout mon code ci-dessous devrait produire le résultat suivant: Layout when using my provided code

***** EDIT ***** Ajout de l'appel sur mesure pour les enfants, oublié que la première fois. FIN DE LA MODIFICATION ICGridLayout.Java:

package com.risch.evertsson.iclib.layout;

import Android.content.Context;
import Android.content.res.TypedArray;
import Android.util.AttributeSet;
import Android.view.View;
import Android.view.ViewGroup;

import com.risch.evertsson.iclib.R;

/**
 * Created by johanrisch on 6/13/13.
 */
public class ICGridLayout extends ViewGroup {
    private int mColumns = 4;
    private float mSpacing;

    public ICGridLayout(Context context) {
        super(context);
    }

    public ICGridLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public ICGridLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        TypedArray a = getContext().obtainStyledAttributes(
                attrs,
                R.styleable.ICGridLayout_Layout);
        this.mColumns = a.getInt(R.styleable.ICGridLayout_Layout_columns, 3);
        this.mSpacing = a.getDimension(R.styleable.ICGridLayout_Layout_layout_spacing, 0);
        a.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            int width = (int) (r - l);
            int side = width / mColumns;
            int children = getChildCount();
            View child = null;
            for (int i = 0; i < children; i++) {
                child = getChildAt(i);
                LayoutParams lp = (LayoutParams) child.getLayoutParams();
                int left = (int) (lp.left * side + mSpacing / 2);
                int right = (int) (lp.right * side - mSpacing / 2);
                int top = (int) (lp.top * side + mSpacing / 2);
                int bottom = (int) (lp.bottom * side - mSpacing / 2);
                child.layout(left, top, right, bottom);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureVertical(widthMeasureSpec, heightMeasureSpec);

    }

    private void measureVertical(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int width = 0;
        int height = 0;


        if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.EXACTLY) {
            width = MeasureSpec.getSize(widthMeasureSpec);
        } else {
            throw new RuntimeException("widthMeasureSpec must be AT_MOST or " +
                    "EXACTLY not UNSPECIFIED when orientation == VERTICAL");
        }


        View child = null;
        int row = 0;
        int side = width / mColumns;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            child = getChildAt(i);

            LayoutParams lp = (LayoutParams) child.getLayoutParams();

            if (lp.bottom > row) {
                row = lp.bottom;
            }



            int childHeight = (lp.bottom - lp.top)*side;
            int childWidth = (lp.right-lp.left)*side;
            int heightSpec = MeasureSpec.makeMeasureSpec(childHeight, LayoutParams.MATCH_PARENT);
            int widthSpec = MeasureSpec.makeMeasureSpec(childWidth, LayoutParams.MATCH_PARENT);

            child.measure(widthSpec, heightSpec);
        }
        height = row * side;
        // TODO: Figure out a good way to use the heightMeasureSpec...

        setMeasuredDimension(width, height);
    }

    @Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new ICGridLayout.LayoutParams(getContext(), attrs);
    }

    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof ICGridLayout.LayoutParams;
    }

    @Override
    protected ViewGroup.LayoutParams
            generateLayoutParams(ViewGroup.LayoutParams p) {
        return new ICGridLayout.LayoutParams(p);
    }

    @Override
    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams();
    }

    public static class LayoutParams extends ViewGroup.MarginLayoutParams {
        int right = 1;
        int bottom = 1;
        int top = 0;
        int left = 0;
        int width = -1;
        int height = -1;

        public LayoutParams() {
            super(MATCH_PARENT, MATCH_PARENT);
            top = 0;
            left = 1;
        }

        public LayoutParams(int width, int height) {
            super(width, height);
            top = 0;
            left = 1;
        }

        public LayoutParams(Context context, AttributeSet attrs) {
            super(context, attrs);
            TypedArray a = context.obtainStyledAttributes(
                    attrs,
                    R.styleable.ICGridLayout_Layout);
            left = a.getInt(R.styleable.ICGridLayout_Layout_layout_left, 0);
            top = a.getInt(R.styleable.ICGridLayout_Layout_layout_top, 0);
            right = a.getInt(R.styleable.ICGridLayout_Layout_layout_right, left + 1);
            bottom = a.getInt(R.styleable.ICGridLayout_Layout_layout_bottom, top + 1);
            height = a.getInt(R.styleable.ICGridLayout_Layout_layout_row_span, -1);
            width = a.getInt(R.styleable.ICGridLayout_Layout_layout_col_span, -1);
            if (height != -1) {
                bottom = top + height;
            }
            if (width != -1) {
                right = left + width;
            }

            a.recycle();
        }

        public LayoutParams(ViewGroup.LayoutParams params) {
            super(params);
        }

    }

}

ICGridLayout.Java est assez simple. Il prend les valeurs fournies par les enfants et les expose. attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ICGridLayout_Layout">
        <attr name="columns" format="integer"/>
        <attr name="layout_left" format="integer"/>
        <attr name="layout_top" format="integer"/>
        <attr name="layout_right" format="integer"/>
        <attr name="layout_bottom" format="integer"/>
        <attr name="layout_col_span" format="integer"/>
        <attr name="layout_row_span" format="integer"/>
        <attr name="layout_spacing" format="dimension"/>
    </declare-styleable>

</resources>

example_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res/com.rischit.projectlogger"
    Android:id="@+id/scroller"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >

    <com.risch.evertsson.iclib.layout.ICGridLayout
        Android:id="@+id/ICGridLayout1"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_spacing="4dp"
        app:columns="4" >


        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="1"
            app:layout_left="0"
            app:layout_right="4"
            app:layout_top="0"
            Android:background="#ff0000"
            Android:text="TextView" />

        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="3"
            app:layout_left="3"
            app:layout_right="4"
            app:layout_top="1"
            Android:background="#00ff00"
            Android:text="TextView" />

        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="4"
            app:layout_left="0"
            app:layout_right="3"
            app:layout_top="1"
            Android:background="#0000ff"
            Android:text="TextView" />

        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="4"
            app:layout_left="3"
            app:layout_right="4"
            app:layout_top="3"
            Android:background="#ffff00"
            Android:text="TextView" />

        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="6"
            app:layout_left="0"
            app:layout_right="1"
            app:layout_top="4"
            Android:background="#ff00ff"
            Android:text="TextView" />

        <TextView
            Android:id="@+id/textView1"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_bottom="6"
            app:layout_left="1"
            app:layout_right="4"
            app:layout_top="4"
            Android:background="#ffffff"
            Android:text="TextView" />
    </com.risch.evertsson.iclib.layout.ICGridLayout>

</ScrollView>

- Johan Risch

P.S Ceci est ma première longue réponse, j'ai essayé de le faire de manière correcte. Si j'ai échoué, dites-le moi sans flamber :) D.S

16
Risch

Comme ça ?

enter image description here

<?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="0dp"
        Android:layout_weight="0.54" >
        <Button
            Android:id="@+id/Button01"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1.00"
            Android:text="Button" />    
        <Button
            Android:id="@+id/Button02"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1.00"
            Android:text="Button" />    
    </LinearLayout>
    <Button
        Android:id="@+id/button3"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="Button" />  
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="99dp" > 
        <Button
            Android:id="@+id/button1"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:text="Button" />  
        <Button
            Android:id="@+id/button2"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:text="Button" />    
    </LinearLayout>   
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1" >    
        <LinearLayout
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:orientation="vertical" >   
            <Button
                Android:id="@+id/button4"
                Android:layout_width="match_parent"
                Android:layout_height="152dp"
                Android:text="Button" />    
            <Button
                Android:id="@+id/button5"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="Button" />    
        </LinearLayout>    
        <LinearLayout
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:orientation="vertical" >
            <Button
                Android:id="@+id/button6"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="Button" />
            <Button
                Android:id="@+id/button7"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>
10
Skies

Comme beaucoup l'ont dit, les dispositions linéaires imbriquées semblent être le seul moyen de gagner ici. Certaines solutions n'ont pas utilisé les paramètres de disposition de la manière la plus flexible. Le code ci-dessous cherche à le faire, et d'une manière robuste avec les changements de rapport d'aspect. Les détails sont dans les commentaires.

enter image description hereLandscape

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

    <!-- First row. -->

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

        <!-- Equal weights cause two columns of equal width. -->

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

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

    <!-- Second row. -->

    <Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="C" />

    <!-- Third row. -->

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

        <!-- Equal weights cause two columns of equal width. -->

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

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

    <!-- Uneven fourth and fifth rows. -->

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        Android:baselineAligned="false" >

        <!-- Left column. Equal weight with right column gives them equal width. -->

        <LinearLayout
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:orientation="vertical" >

            <!--
                 The use of weights below assigns all extra space to G. There
                 are other choices. LinearLayout computes sizes along its
                     axis as given, then divides the remaining extra space using
                 weights.  If a component doesn't have a weight, it keeps
                 the specified size exactly.
            -->


            <!-- Fill width of layout and use wrap height (because there's no weight). -->

            <Button
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="F" />

            <!-- Fill width of layout and put all the extra space here. -->

            <Button
                Android:layout_width="match_parent"
                Android:layout_height="0dp"
                Android:layout_weight="1"
                Android:text="G" />
        </LinearLayout>

        <!-- Right column. Equal weight with left column gives them equal width. -->

        <LinearLayout
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:orientation="vertical" >

            <!-- Same as above except top button gets all the extra space. -->

            <Button
                Android:layout_width="match_parent"
                Android:layout_height="0dp"
                Android:layout_weight="1"
                Android:text="H" />

            <Button
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="I" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>
8
Gene

J'ai essayé ça tuto

Je suis bloqué ici:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:columnCount="2"
    Android:orientation="horizontal" >

    <Button Android:text="1" />

    <Button Android:text="2" />

    <Button
        Android:layout_columnSpan="2"
        Android:layout_gravity="fill"
        Android:text="3" />

    <Button Android:text="4" />

    <Button Android:text="5" />

    <Button
        Android:layout_gravity="fill"
        Android:layout_rowSpan="2"
        Android:text="6" />

    <Button Android:text="7" />

    <Button Android:text="8" />

    <Button Android:text="9" />

</GridLayout>

Impossible pour moi d'étendre le 8ème bouton. : s

J'ai essayé

<Button Android:text="8" Android:layout_gravity="fill" Android:layout_rowSpan="2"/>

Mais c'est inefficace. : s

4
Skies

Intégrez votre GridLayout dans LinearLayout comme ci-dessous et essayez cela a fonctionné pour moi.

enter image description here

<?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="horizontal" >

<GridLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:columnCount="2" >

    <Button
        Android:layout_column="0"
        Android:layout_columnSpan="1"
        Android:layout_gravity="start|end"
        Android:layout_row="0"
        Android:text="ASDFASDF" />

    <Button
        Android:layout_column="1"
        Android:layout_gravity="start|end"
        Android:layout_row="0"
        Android:text="SDAVDFBDFB" />

    <Button
        Android:layout_column="0"
        Android:layout_columnSpan="2"
        Android:layout_gravity="fill|center"
        Android:layout_row="1"
        Android:text="ASDVADFBFDAFEW" />

    <Button
        Android:layout_column="0"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill|center"
        Android:layout_row="2"
        Android:text="FWEA AWFWEA" />

    <Button
        Android:layout_column="1"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill"
        Android:layout_row="2"
        Android:text="BERWEfasf" />

    <Button
        Android:layout_width="94dp"
        Android:layout_column="0"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill|center"
        Android:layout_row="3"
        Android:text="SDFVBFAEVSAD" />

    <Button
        Android:layout_column="0"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill|center"
        Android:layout_row="4"
        Android:layout_rowSpan="2"
        Android:text="GVBAERWEFSD" />

    <Button
        Android:layout_column="1"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill|center"
        Android:layout_row="3"
        Android:layout_rowSpan="2"
        Android:text="VSDFAVE SDFASDWA SDFASD" />

    <Button
        Android:layout_column="1"
        Android:layout_columnSpan="1"
        Android:layout_gravity="fill|center"
        Android:layout_row="5"
        Android:text="FWEWEGAWEFWAE"/>
</GridLayout>

    </LinearLayout>
3
Shankar Agarwal