La documentation GridLayout
API est très difficile à apprendre ......
y a-t-il quelqu'un qui peut m'apprendre à paramétrer l'enfant View
s 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 ImageView
wrap_content
......... il ne peut pas fonctionner normalement, ai-je oublié un réglage?!?
Note: Les informations sous la ligne horizontale ne sont plus exactes avec l'introduction d'Android 'Lollipop' 5, car GridLayout
ne 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):
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.
<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>
À 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" />
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
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.
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>
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>