如何使GridLayout适合屏幕大小

Question

该GridLayoutAPI文档是非常难学......
有谁可以教我如何设置儿童的任何一个Views到有类似的"权重" LinearLayout？

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

编辑:我不知道什么时候我可以为孩子做什么wrap_content......即使我想设置一些特定大小的图像,这个班有助于我做ImageView wrap_content.........它不能正常运行,我错过了一些设置吗？!？

Answer 1

注意:在水平线以下的信息不再准确,引进Android的棒棒糖'5,因为GridLayout 确实容纳自API级21的权重的原理.

引自Javadoc:

超额空间分布

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

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

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

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

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

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

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

限制

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

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

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

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

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

Answer 2

经过多次尝试,我在这个布局中找到了我想要的东西.均匀间隔的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/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>

Answer 3

从API 21开始,GridLayout中添加了权重概念.

要支持较旧的Android设备,可以使用v7支持库中的GridLayout.

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

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:grid="http://schemas.android.com/apk/res-auto"

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

</android.support.v7.widget.GridLayout>