web-dev-qa-db-fra.com

Comment créer une taille d'écran GridLayout adaptée

La documentation GridLayout API est très difficile à apprendre ...... 
y a-t-il quelqu'un qui peut m'apprendre à paramétrer l'enfant Views pour avoir quelque chose comme le "poids" de LinearLayout?

En ce moment, on dirait que tous sont placés à gauche, 
J'ai essayé à plusieurs reprises et ne peux toujours pas faire comme chacun la demi largeur de l'écran.

Modifié: Je ne sais pas ce que je peux faire lorsque les enfants sont tous wrap_content ...... même si je veux définir une image dans une taille spécifique, cette classe m'aide à faire ImageViewwrap_content ......... il ne peut pas fonctionner normalement, ai-je oublié un réglage?!?

androidwidget
34
rex

Note: Les informations sous la ligne horizontale ne sont plus exactes avec l'introduction d'Android 'Lollipop' 5, car GridLayoutne tient compte du principe de pondération depuis le niveau 21 de l'API. 

Cité du Javadoc :

Distribution d'espace excédentaire

A partir de l’API 21, la distribution d’espace en excès par GridLayout tient compte de le principe du poids. Si aucun poids n'est spécifié, les conventions précédentes sont respectées et les colonnes et les lignes sont prises aussi flexible si leurs vues spécifient une forme d’alignement au sein de leur groupes. La flexibilité d'une vue est donc influencée par son alignement qui, à son tour, est généralement défini en réglant la gravité propriété des paramètres de mise en page de l'enfant. Si c'est un poids ou alignement ont été définis le long d’un axe donné puis la composante est prise aussi flexible dans cette direction. Si aucun poids ou alignement n'a été défini, le le composant est plutôt supposé inflexible.

Plusieurs composants d'une même ligne ou d'un même groupe de colonnes sont considérés comme agir en parallèle. Un tel groupe n'est flexible que si tous les ses composants sont flexibles. Groupes de rangées et de colonnes qui siègent de part et d’autre d’une frontière commune sont plutôt considérés comme agissant en séries. Le groupe composé de ces deux éléments est flexible si l'un de ses éléments est flexible.

Pour étirer une colonne, assurez-vous que tous les composants qu’elle contient sont définir un poids ou une gravité. Pour empêcher une colonne de s’étirer, assurez-vous que l'un des composants de la colonne ne définit pas un poids ou une gravité.

Lorsque le principe de flexibilité ne fournit pas complète homonymie, les algorithmes de GridLayout privilégient les lignes et les colonnes qui sont plus proches de ses bords droit et inférieur. Être plus précis, GridLayout considère chacun de ses paramètres de présentation comme une contrainte dans le fichier un ensemble de variables qui définissent les lignes de la grille le long d'un axe donné . Lors de la mise en page, GridLayout résout les contraintes afin de renvoyer le solution unique aux contraintes pour lesquelles toutes les variables sont inférieur à ou égal à la valeur correspondante dans toute autre valeur valide Solution.

Il convient également de noter que Android.support.v7.widget.GridLayout contient les mêmes informations. Malheureusement, il ne mentionne pas la version de la bibliothèque de support avec laquelle il a été introduit, mais le commit qui ajoute la fonctionnalité peut être suivi jusqu'à juillet 2014. En novembre 2014, des améliorations dans le calcul du poids et un bogue ont été signalées. fixe .

Pour plus de sécurité, veillez à importer la dernière version de la bibliothèque gridlayout-v7.

Le principe de «pondération», comme vous le décrivez, n'existe pas avec GridLayout. Cette limitation est clairement mentionnée dans documentation ; extrait ci-dessous. Cela étant dit, il existe quelques possibilités d'utiliser la «gravité» pour la distribution d'espace en excès. Je suggère que vous ayez lu la documentation liée.

Limitations

GridLayout ne prend pas en charge le principe de poids, comme défini en poids. En général, il n’est donc pas possible de configurez GridLayout pour distribuer l’espace en excès de manière non triviale proportions entre plusieurs lignes ou colonnes. Quelques cas d'utilisation courants peuvent néanmoins être logés comme suit. Placer des quantités égales de espace autour d'un composant dans un groupe de cellules; utilisez l'alignement CENTRE (ou gravité). Pour un contrôle complet de la distribution d’espace en excès dans une rangée ou colonne; utilisez une sous-vue LinearLayout pour contenir les composants dans le fichier groupe de cellules associé. Lorsque vous utilisez l'une de ces techniques, tenez compte de Rappelez-vous que les groupes de cellules peuvent être définis de manière à se chevaucher.

Pour un exemple et des indications pratiques, jetez un coup d'œil à l'article de blog de l'année dernière présentant le widget GridLayout .

Edit: Je ne pense pas qu'il existe une approche basée sur XML pour redimensionner les tuiles, comme dans l'application Google Play, en "carrés" ou en "rectangles" deux fois plus longs que ces carrés. Cependant, il est certainement possible si vous construisez votre mise en page par programme. Tout ce que vous avez vraiment besoin de savoir pour accomplir deux choses, ce sont les dimensions de l'écran de l'appareil.

Ci-dessous, une approximation (très!) Rapide et approximative de la disposition en mosaïque dans l'application Google Play.

Point size = new Point();
getWindowManager().getDefaultDisplay().getSize(size);
int screenWidth = size.x;
int screenHeight = size.y;
int halfScreenWidth = (int)(screenWidth *0.5);
int quarterScreenWidth = (int)(halfScreenWidth * 0.5);

Spec row1 = GridLayout.spec(0, 2);
Spec row2 = GridLayout.spec(2);
Spec row3 = GridLayout.spec(3);
Spec row4 = GridLayout.spec(4, 2);

Spec col0 = GridLayout.spec(0);
Spec col1 = GridLayout.spec(1); 
Spec colspan2 = GridLayout.spec(0, 2);

GridLayout gridLayout = new GridLayout(this);
gridLayout.setColumnCount(2);
gridLayout.setRowCount(15);

TextView twoByTwo1 = new TextView(this);
GridLayout.LayoutParams first = new GridLayout.LayoutParams(row1, colspan2);
first.width = screenWidth;
first.height = quarterScreenWidth * 2;
twoByTwo1.setLayoutParams(first);
twoByTwo1.setGravity(Gravity.CENTER);
twoByTwo1.setBackgroundColor(Color.RED);
twoByTwo1.setText("TOP");
twoByTwo1.setTextAppearance(this, Android.R.style.TextAppearance_Large);
gridLayout.addView(twoByTwo1, first);

TextView twoByOne1 = new TextView(this);
GridLayout.LayoutParams second = new GridLayout.LayoutParams(row2, col0);
second.width = halfScreenWidth;
second.height = quarterScreenWidth;
twoByOne1.setLayoutParams(second);
twoByOne1.setBackgroundColor(Color.BLUE);
twoByOne1.setText("Staff Choices");
twoByOne1.setTextAppearance(this, Android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne1, second);

TextView twoByOne2 = new TextView(this);
GridLayout.LayoutParams third = new GridLayout.LayoutParams(row2, col1);
third.width = halfScreenWidth;
third.height = quarterScreenWidth;
twoByOne2.setLayoutParams(third);
twoByOne2.setBackgroundColor(Color.GREEN);
twoByOne2.setText("Games");
twoByOne2.setTextAppearance(this, Android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne2, third);

TextView twoByOne3 = new TextView(this);
GridLayout.LayoutParams fourth = new GridLayout.LayoutParams(row3, col0);
fourth.width = halfScreenWidth;
fourth.height = quarterScreenWidth;
twoByOne3.setLayoutParams(fourth);
twoByOne3.setBackgroundColor(Color.YELLOW);
twoByOne3.setText("Editor's Choices");
twoByOne3.setTextAppearance(this, Android.R.style.TextAppearance_Large_Inverse);
gridLayout.addView(twoByOne3, fourth);

TextView twoByOne4 = new TextView(this);
GridLayout.LayoutParams fifth = new GridLayout.LayoutParams(row3, col1);
fifth.width = halfScreenWidth;
fifth.height = quarterScreenWidth;
twoByOne4.setLayoutParams(fifth);
twoByOne4.setBackgroundColor(Color.Magenta);
twoByOne4.setText("Something Else");
twoByOne4.setTextAppearance(this, Android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne4, fifth);

TextView twoByTwo2 = new TextView(this);
GridLayout.LayoutParams sixth = new GridLayout.LayoutParams(row4, colspan2);
sixth.width = screenWidth;
sixth.height = quarterScreenWidth * 2;
twoByTwo2.setLayoutParams(sixth);
twoByTwo2.setGravity(Gravity.CENTER);
twoByTwo2.setBackgroundColor(Color.WHITE);
twoByTwo2.setText("BOTOM");
twoByTwo2.setTextAppearance(this, Android.R.style.TextAppearance_Large_Inverse);
gridLayout.addView(twoByTwo2, sixth);

Le résultat ressemblera un peu à ceci (sur mon Galaxy Nexus):

Tiled layout using GridLayout

59
MH.

Après de nombreuses tentatives, j'ai trouvé ce que je cherchais dans cette présentation . Même des LinearLayouts même espacés avec des ImageViews automatiquement ajustées, avec des proportions conservées. Fonctionne avec paysage et portrait avec n'importe quelle résolution d'écran et d'image.

Nexus 7Nexus 5Nexus 10

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#ffcc5d00" >

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:orientation="vertical">


        <LinearLayout
            Android:orientation="vertical"
            Android:layout_width="fill_parent"
            Android:layout_height="fill_parent">

            <LinearLayout
                Android:orientation="horizontal"
                Android:layout_width="fill_parent"
                Android:layout_weight="1"
                Android:layout_height="wrap_content">

                <LinearLayout
                    Android:orientation="vertical"
                    Android:layout_width="0dp"
                    Android:layout_weight="1"
                    Android:padding="10dip"
                    Android:layout_height="fill_parent">

                    <ImageView
                        Android:id="@+id/image1"
                        Android:layout_height="fill_parent"
                        Android:adjustViewBounds="true"
                        Android:scaleType="fitCenter"
                        Android:src="@drawable/stackoverflow"
                        Android:layout_width="fill_parent"
                        Android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    Android:orientation="vertical"
                    Android:layout_width="0dp"
                    Android:layout_weight="1"
                    Android:padding="10dip"
                    Android:layout_height="fill_parent">

                    <ImageView
                        Android:id="@+id/image2"
                        Android:layout_height="fill_parent"
                        Android:adjustViewBounds="true"
                        Android:scaleType="fitCenter"
                        Android:src="@drawable/stackoverflow"
                        Android:layout_width="fill_parent"
                        Android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                Android:orientation="horizontal"
                Android:layout_weight="1"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content">

                <LinearLayout
                    Android:orientation="vertical"
                    Android:layout_width="0dp"
                    Android:layout_weight="1"
                    Android:padding="10dip"
                    Android:layout_height="fill_parent">

                    <ImageView
                        Android:id="@+id/image3"
                        Android:layout_height="fill_parent"
                        Android:adjustViewBounds="true"
                        Android:scaleType="fitCenter"
                        Android:src="@drawable/stackoverflow"
                        Android:layout_width="fill_parent"
                        Android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    Android:orientation="vertical"
                    Android:layout_width="0dp"
                    Android:layout_weight="1"
                    Android:padding="10dip"
                    Android:layout_height="fill_parent">

                    <ImageView
                        Android:id="@+id/image4"
                        Android:layout_height="fill_parent"
                        Android:adjustViewBounds="true"
                        Android:scaleType="fitCenter"
                        Android:src="@drawable/stackoverflow"
                        Android:layout_width="fill_parent"
                        Android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>
13
lubosz

À partir de API 21, la notion de poids a été ajoutée à GridLayout.

Pour prendre en charge les appareils Android plus anciens, vous pouvez utiliser GridLayout à partir de la bibliothèque de support de la v7.

compile 'com.Android.support:gridlayout-v7:22.2.1'

Le code XML suivant donne un exemple d'utilisation des poids pour remplir la largeur de l'écran.

Android:id="@+id/choice_grid"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:layout_centerHorizontal="true"
Android:padding="4dp"

grid:alignmentMode="alignBounds"
grid:columnCount="2"
grid:rowOrderPreserved="false"
grid:useDefaultMargins="true">

<TextView
    Android:layout_width="0dp"
    Android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    Android:gravity="center"
    Android:background="#FF33B5E5"
    Android:text="Tile1" />

<TextView
    Android:layout_width="0dp"
    Android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    Android:gravity="center"
    Android:background="#FF33B5E5"
    Android:text="Tile2" />

<TextView
    Android:layout_width="0dp"
    Android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    Android:gravity="center"
    Android:background="#FF33B5E5"
    Android:text="Tile3" />

<TextView
    Android:layout_width="0dp"
    Android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    Android:gravity="center"
    Android:background="#FF33B5E5"
    Android:text="Tile4" />

10
Adnan Abdollah Zaki

Si vous utilisez des fragments, vous pouvez préparer la mise en page XML et ensuite contrôler les éléments critiques par programme.

int thirdScreenWidth = (int)(screenWidth *0.33);

View view = inflater.inflate(R.layout.fragment_second, null);
View _container = view.findViewById(R.id.rim1container);
_container.getLayoutParams().width = thirdScreenWidth * 2;

_container = view.findViewById(R.id.rim2container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;

_container = view.findViewById(R.id.rim3container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;

Cette disposition pour 3 colonnes égales. Le premier élément prend 2x2 Il en résulte l'image enter image description here

3
Zed

Juste un suivi rapide et notez qu’il est maintenant possible d’utiliser la bibliothèque de support à espacement pondéré dans GridLayout pour obtenir ce que vous voulez, voir:

A partir de l'API 21, la répartition de l'espace disponible par GridLayout respecte le principe de la pondération. Si aucun poids n'est spécifié, les conventions précédentes sont respectées et les colonnes et les lignes sont considérées comme flexibles si leurs vues spécifient une forme d'alignement au sein de leurs groupes . La flexibilité d'une vue est donc influencée par son alignement, qui est généralement défini en définissant la propriété de gravité des paramètres de présentation de l'enfant. Si un poids ou un alignement ont été définis le long d'un axe donné, le composant est considéré comme flexible dans cette direction. Si aucun poids ou alignement n'a été défini, le composant est supposé inflexible.

1
AllDayAmazing

J'archive ceci en utilisant LinearLayout

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

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content">
        <TextView
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:height="166dp"
            Android:text="Tile1"
            Android:gravity="center"
            Android:background="#6f19e5"/>
    </LinearLayout>
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">
        <TextView
            Android:text="Tile2"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:height="126dp"
            Android:gravity="center"
            Android:layout_weight=".50"
            Android:background="#f1d600"/>

        <TextView
            Android:text="Tile3"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:height="126dp"
            Android:gravity="center"
            Android:layout_weight=".50"
            Android:background="#e75548"/>

    </LinearLayout>
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">
        <TextView
            Android:text="Tile4"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:height="126dp"
            Android:gravity="center"
            Android:layout_weight=".50"
            Android:background="#29d217"/>

        <TextView
            Android:text="Tile5"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:height="126dp"
            Android:gravity="center"
            Android:layout_weight=".50"
            Android:background="#e519cb"/>

    </LinearLayout>
    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent">
        <TextView
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:height="176dp"
            Android:text="Tile6"
            Android:gravity="center"
            Android:background="#09eadd"/>
    </LinearLayout>
</LinearLayout>

 Here the modal

0
NaveenDA

Pour les autres utilisateurs: Si vous devez utiliser GridLayout en raison d'exigences du projet, utilisez-le, mais je vous suggère d'essayer TableLayout, car il semble beaucoup plus facile de travailler avec et d'obtenir un résultat similaire.

Docs: https://developer.Android.com/reference/Android/widget/TableLayout.html

Exemple:

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

    <TableRow>

        <Button
            Android:id="@+id/test1"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 1"
            Android:drawableTop="@mipmap/Android_launcher"
            />

        <Button
            Android:id="@+id/test2"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 2"
            Android:drawableTop="@mipmap/Android_launcher"
            />

        <Button
            Android:id="@+id/test3"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 3"
            Android:drawableTop="@mipmap/Android_launcher"
            />

        <Button
            Android:id="@+id/test4"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 4"
            Android:drawableTop="@mipmap/Android_launcher"
            />

    </TableRow>

    <TableRow>

        <Button
            Android:id="@+id/test5"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 5"
            Android:drawableTop="@mipmap/Android_launcher"
            />

        <Button
            Android:id="@+id/test6"
            Android:layout_width="wrap_content"
            Android:layout_height="90dp"
            Android:text="Test 6"
            Android:drawableTop="@mipmap/Android_launcher"
            />

    </TableRow>

</TableLayout>
0
Braden Holt