Android GridLayout 实现

Question

我正在尝试开发一个新项目。我的客户希望我设计类似于当前的GooglePlay设计 (如附图所示)。这就是为什么我很困惑是否可以使用 <android.support.v7.widget.GridLayout> 实现这样的块状设计特性。如果不行，请告诉我该怎么做？

- PPShein

Answer 1

您可能想查看http://developer.android.com/design/building-blocks/grid-lists.html。不太确定您要做什么，但希望这可以帮助您。它使用GridView而不是GridLayout。关于这个问题，可以在Android应用程序中的GridView VS GridLayout找到一个好的帖子。

编辑：这是我的示例

注意：大部分内容来自http://developer.android.com/guide/topics/ui/layout/gridview.html。在GridViewExample中使用的ImageAdapter和图片都直接从那里获取。

这是我的布局

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:textSize="50sp"
        android:gravity="center_horizontal"
        android:text="Page Title" />

    <!-- Insert some sort of scrolling if desired -->

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            android:gravity="center_horizontal"
            android:text="Grid 1 Title" />

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:columnWidth="50dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="5dp"
            android:horizontalSpacing="5dp"
            android:stretchMode="columnWidth"
            android:gravity="center" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            android:gravity="center_horizontal"
            android:text="Grid 2 Title" />

        <GridView
            android:id="@+id/gridView2"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:columnWidth="50dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="5dp"
            android:horizontalSpacing="5dp"
            android:stretchMode="columnWidth"
            android:gravity="center" />         
    </LinearLayout>
</LinearLayout>

这是我的主Activity：

package com.example.gridviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

public class GridViewExample extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.gridview_example);

        GridView gridView1 = (GridView) findViewById(R.id.gridView1);
        gridView1.setAdapter(new ImageAdapter(this));

        gridView1.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(GridViewExample.this, "1: " + position, Toast.LENGTH_SHORT).show();
            }
        });

        GridView gridView2 = (GridView)findViewById(R.id.gridView2);
        gridView2.setAdapter(new ImageAdapter(this));

        gridView2.setOnItemClickListener(new OnItemClickListener(){
            public void onItemClick(AdapterView<?> parent, View v, int position, long id){
                Toast.makeText(GridViewExample.this, "2: " + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

输出结果： 在平板电脑上，布局似乎有些偏差，但经过一些调整，我相信可以解决。

- kalelien

---

我已经查过了，但是还没有想到如何实现。 - PPShein

如果您的目标是使其看起来像屏幕截图，那么在LinearLayout中使用GridView和TextView的组合不是可能吗？ - kalelien

你能提供更多的例子吗？顺便说一句，点个赞。 - PPShein

我会尝试翻译，但可能需要一点时间 - 谢谢。 - kalelien

刚刚发布了编辑内容。我认为这就是你要找的。你可以在GridView中垂直滚动并逐个选择每张图片。 - kalelien