如何使GridLayout适合屏幕大小

The GridLayout API docs is very difficult to learn ......
is there any one who can teach me how to set child Views to have something like "weight" of LinearLayout ?

GridLayout API文档很难学习......有没有人可以教我如何设置子视图以获得类似LinearLayout的“权重”？

Right now it looks like all are placed on the left hand side,
I have tried many times and still can not make it like each one the half width of the screen.

现在看起来所有都放在左侧，我已经尝试了很多次，但仍然不能像屏幕的半宽一样。

Edited : I don't know what can I do for when the childen are all wrap_content ...... even if I want to set some image in specific size , this class helps me to make ImageView wrap_content .........it cannot operate normal , did I miss some setting ?!?

编辑：我不知道当childen都是wrap_content时我能做什么......即使我想设置一些特定大小的图像，这个类帮我制作ImageView wrap_content ...... ...它无法正常运行，我是否错过了一些设置？！？

8 个解决方案

#1

Note: The information below the horizontal line is no longer accurate with the introduction of Android 'Lollipop' 5, as GridLayout does accommodate the principle of weights since API level 21.

注意：随着AndroidLollipop 5的引入，水平线以下的信息不再准确，因为GridLayout确实适应自API级别21以来的权重原则。

Quoted from the Javadoc:

引自Javadoc：

Excess Space Distribution

过剩的空间分布

As of API 21, GridLayout's distribution of excess space accomodates the principle of weight. In the event that no weights are specified, the previous conventions are respected and columns and rows are taken as flexible if their views specify some form of alignment within their groups. The flexibility of a view is therefore influenced by its alignment which is, in turn, typically defined by setting the gravity property of the child's layout parameters. If either a weight or alignment were defined along a given axis then the component is taken as flexible in that direction. If no weight or alignment was set, the component is instead assumed to be inflexible.

从API 21开始，GridLayout的多余空间分布适应了权重原则。如果未指定权重，则遵循先前的约定，并且如果列和行的视图在其组中指定某种形式的对齐，则将列和行视为灵活的。因此，视图的灵活性受其对齐的影响，而对齐通常通过设置孩子的布局参数的重力属性来定义。如果沿给定轴定义了重量或对齐，则该组件在该方向上被视为柔性。如果没有设置重量或对齐，则假定该组件不灵活。

Multiple components in the same row or column group are considered to act in parallel. Such a group is flexible only if all of the components within it are flexible. Row and column groups that sit either side of a common boundary are instead considered to act in series. The composite group made of these two elements is flexible if one of its elements is flexible.

同一行或列组中的多个组件被视为并行操作。只有当其中的所有组件都是灵活的时，这样的组才是灵活的。位于公共边界两侧的行和列组被认为是串行操作。如果其中一个元件是柔性的，则由这两个元件组成的复合组是柔性的。

To make a column stretch, make sure all of the components inside it define a weight or a gravity. To prevent a column from stretching, ensure that one of the components in the column does not define a weight or a gravity.

要使柱伸展，请确保其中的所有组件都定义了重量或重力。要防止色谱柱拉伸，请确保色谱柱中的某个组分未定义重量或重力。

When the principle of flexibility does not provide complete disambiguation, GridLayout's algorithms favour rows and columns that are closer to its right and bottom edges. To be more precise, GridLayout treats each of its layout parameters as a constraint in the a set of variables that define the grid-lines along a given axis. During layout, GridLayout solves the constraints so as to return the unique solution to those constraints for which all variables are less-than-or-equal-to the corresponding value in any other valid solution.

当灵活性原则不能提供完全消歧时，GridLayout的算法更倾向于更接近其右边和底边的行和列。更确切地说，GridLayout将其每个布局参数视为一组变量中的约束，这些变量定义沿给定轴的网格线。在布局期间，GridLayout解决约束，以便将唯一解决方案返回到那些约束，对于这些约束，所有变量都小于或等于任何其他有效解决方案中的对应值。

It's also worth noting that android.support.v7.widget.GridLayout contains the same information. Unfortunately it doesn't mention which version of the support library it was introduced with, but the commit that adds the functionality can be tracked back to July 2014. In November 2014, improvements in weight calculation and a bug was fixed.

值得注意的是android.support.v7.widget.GridLayout包含相同的信息。不幸的是，它没有提到它引入的支持库版本，但添加功能的提交可以追溯到2014年7月。2014年11月，重量计算的改进和错误得到了修复。

To be safe, make sure to import the latest version of the gridlayout-v7 library.

为安全起见，请确保导入最新版本的gridlayout-v7库。

---

The principle of 'weights', as you're describing it, does not exist with GridLayout. This limitation is clearly mentioned in the documentation; excerpt below. That being said, there are some possibilities to use 'gravity' for excess space distribution. I suggest you have read through the linked documentation.

GridLayout不存在'权重'的原则，正如您所描述的那样。文件中明确提到了这一限制;摘录如下。话虽如此，有一些可能性使用“重力”来进行过多的空间分布。我建议你仔细阅读链接文档。

Limitations

限制

GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns. Some common use-cases may nevertheless be accommodated as follows. To place equal amounts of space around a component in a cell group; use CENTER alignment (or gravity). For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group. When using either of these techniques, bear in mind that cell groups may be defined to overlap.

GridLayout不提供权重原则的支持，如权重中所定义。通常，因此无法配置GridLayout以在多个行或列之间以非平凡的比例分配多余的空间。然而，一些常见的用例可以如下容纳。在单元组中的组件周围放置等量的空间;使用CENTER对齐（或重力）。用于完全控制行或列中的多余空间分布;使用LinearLayout子视图来保存关联单元格组中的组件。使用这些技术中的任何一种时，请记住可以将单元组定义为重叠。

For an example and some practical pointers, take a look at last year's blog post introducing the GridLayout widget.

有关示例和一些实用指南，请查看去年介绍GridLayout小部件的博客文章。

---

Edit: I don't think there's an xml-based approach to scaling the tiles like in the Google Play app to 'squares' or 'rectangles' twice the length of those squares. However, it is certainly possible if you build your layout programmatically. All you really need to know in order two accomplish that is the device's screen dimensions.

编辑：我不认为有一种基于xml的方法可以将Google Play应用中的切片缩放为“正方形”或“矩形”两倍于这些正方形的长度。但是，如果以编程方式构建布局，当然可以实现。所有你真正需要知道的是两个完成设备的屏幕尺寸。

Below a (very!) quick 'n dirty approximation of the tiled layout in the Google Play app.

低于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);

The result will look somewhat like this (on my Galaxy Nexus):

结果看起来有点像这样（在我的Galaxy Nexus上）：

#2

After many attempts I found what I was looking for in this layout. Even spaced LinearLayouts with automatically fitted ImageViews, with maintained aspect ratio. Works with landscape and portrait with any screen and image resolution.

经过多次尝试，我在这个布局中找到了我想要的东西。均匀间隔的LinearLayouts具有自动安装的ImageViews，并保持纵横比。使用任何屏幕和图像分辨率的横向和纵向。

<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/*"
                        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/*"
                        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/*"
                        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/*"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

#3

Starting in API 21 the notion of weight was added to GridLayout.

从API 21开始，GridLayout中添加了权重概念。

To support older android devices, you can use the GridLayout from the v7 support library.

要支持较旧的Android设备，您可以使用v7支持库中的GridLayout。

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

The following XML gives an example of how you can use weights to fill the screen width.

以下XML给出了如何使用权重填充屏幕宽度的示例。

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

#4

If you use fragments you can prepare XML layout and than stratch critical elements programmatically

如果使用片段，则可以编写XML布局，而不是以编程方式编写关键元素

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;

This layout for 3 equal columns. First element takes 2x2 Result in the picture

这种布局为3个相等的列。第一个元素在图片中占用2x2结果

#5

Just a quick follow up and note that it is possible now to use the support library with weighted spacing in GridLayout to achieve what you want, see:

只需快速跟进并注意，现在可以在GridLayout中使用带加权间距的支持库来实现您想要的效果，请参阅：

As of API 21, GridLayout's distribution of excess space accomodates the principle of weight. In the event that no weights are specified, the previous conventions are respected and columns and rows are taken as flexible if their views specify some form of alignment within their groups. The flexibility of a view is therefore influenced by its alignment which is, in turn, typically defined by setting the gravity property of the child's layout parameters. If either a weight or alignment were defined along a given axis then the component is taken as flexible in that direction. If no weight or alignment was set, the component is instead assumed to be inflexible.

从API 21开始，GridLayout的多余空间分布适应了权重原则。如果未指定权重，则遵循先前的约定，并且如果列和行的视图在其组中指定某种形式的对齐，则将列和行视为灵活的。因此，视图的灵活性受其对齐的影响，而对齐通常通过设置孩子的布局参数的重力属性来定义。如果沿给定轴定义了重量或对齐，则该组件在该方向上被视为柔性。如果没有设置重量或对齐，则假定该组件不灵活。

#6

I archive this using LinearLayout

我使用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>

#7

For other peeps: If you have to use GridLayout due to project requirements then use it but I would suggest trying out TableLayout as it seems much easier to work with and achieves a similar result.

对于其他窥视：如果由于项目要求必须使用GridLayout然后使用它，但我建议尝试使用TableLayout，因为它似乎更容易使用并获得类似的结果。

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

文档：https：//developer.android.com/reference/android/widget/TableLayout.html

Example:

例：

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

#8

Do you know View.getViewTreeObserver().addOnGlobalLayoutListener()

你知道View.getViewTreeObserver（）。addOnGlobalLayoutListener（）

By this you can calculate the sizes.

通过这个你可以计算尺寸。

I achieve your UI effect by GridView:

我通过GridView实现了你的UI效果：

GridView g;
g.setNumColumns(2);
g.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);