如何使 GridLayout 适合屏幕大小 [英] How to make a GridLayout fit screen size

问题描述

GridLayout API 文档很难学......
有没有人可以教我如何将子 Views 设置为有类似 LinearLayout 的权重"吗?

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 ?

现在好像全部都放在左边了，
我试了很多次还是不能让每个都像屏幕的一半宽度.

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.

已当孩子都是 wrap_content 时，我不知道该怎么办......即使我想设置一些特定尺寸的图像，这个类也可以帮助我制作 ImageView wrap_content .........它不能正常运行，我是不是错过了一些设置?！?

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

推荐答案

注意:随着 Android 'Lollipop' 5 的引入，横线下方的信息不再准确，如 GridLayout 确实适应 API 级别 21 以来的权重原则.

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.

引用自 Javadoc:

剩余空间分布

从 API 21 开始，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.

同一行或列组中的多个组件被认为是并行行动.只有当所有的其中的组件是灵活的.坐的行和列组相反，共同边界的任何一侧都被视为在系列.由这两个元素组成的复合群是灵活的，如果它的元素之一是灵活的.

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.

当灵活性原则不提供完整时消除歧义，GridLayout 的算法有利于行和列更靠近其右边缘和下边缘.更准确地说，GridLayout 将其每个布局参数视为一组定义沿给定轴的网格线的变量.布局时，GridLayout 解决约束，返回对所有变量都适用的那些约束的唯一解小于或等于任何其他有效值中的相应值解决方案.

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.

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

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.

为安全起见，请务必导入最新版本的 gridlayout-v7 库.

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

GridLayout 不存在您所描述的权重"原则.文档中明确提到了这个限制；摘录如下.话虽如此，有一些可能性可以使用重力"来分配多余的空间.我建议您通读链接的文档.

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不提供对weight原理的支持，如以重量定义.一般来说，因此不可能配置一个 GridLayout 以分配多余的空间多行或多列之间的比例.一些常见的用例尽管如此，仍可按如下方式容纳.放置等量的单元组中组件周围的空间；使用 CENTER 对齐(或重力).用于完全控制连续多余的空间分布或列；使用 LinearLayout 子视图将组件保存在关联的细胞群.在使用这些技术中的任何一种时，请注意请注意，单元组可能被定义为重叠.

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 小部件.

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

我认为没有一种基于 xml 的方法可以像在 Google Play 应用程序中那样将图块缩放为这些正方形长度的两倍的正方形"或矩形".但是，如果您以编程方式构建布局，这当然是可能的.您真正需要知道的只是设备的屏幕尺寸.

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.

低于(非常！)Google Play 应用中平铺布局的快速近似值.

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

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

结果看起来有点像这样(在我的 Galaxy Nexus 上):

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

这篇关于如何使 GridLayout 适合屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！