Android GridView示例

Android GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. In this tutorial, we will build an image gallery using Android GridView.

Android GridView是一个ViewGroup ，用于在二维可滚动网格中显示项目。 在本教程中，我们将使用Android GridView构建图像库。

Android GridView (Android GridView)

Android GridView layout in one of the most useful layouts in android. GridView is mainly useful when we want show data in grid layout like displaying images or icons. This layout can be used to build applications like image viewer, audio or video players in order to show elements in grid manner.

Android GridView布局是android中最有用的布局之一。 当我们希望以网格布局显示数据（例如显示图像或图标）时，GridView主要有用。 此布局可用于构建诸如图像查看器，音频或视频播放器之类的应用程序，以便以网格方式显示元素。

GridView elements are not generally predefined and the data can be inserted into the layout using Adapters like ListAdapter etc. We can control the number of columns, their width, and relevant spacing.

GridView元素通常不是预定义的，可以使用ListAdapter等适配器将数据插入布局中。我们可以控制列数，列宽和相关间距。

Android GridView属性 (Android GridView Attributes)

• android:id : This is the ID which uniquely identifies the layout
  android：id ：这是唯一标识布局的ID
• android:columnWidth : This specifies the fixed width for each column. This could be in px, dp, sp, in, or mm
  android：columnWidth ：这指定每列的固定宽度。 可以是px，dp，sp，in或mm
• android:gravity : Specifies the gravity within each cell. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.
  android：gravity ：指定每个单元格内的重力。 可能的值是上，下，左，右，中心，center_vertical，center_horizo​​ntal等。
• android:horizontalSpacing : Defines the default horizontal spacing between columns. This could be in px, dp, sp, in, or mm
  android：horizo​​ntalSpacing ：定义列之间的默认水平间距。 可以是px，dp，sp，in或mm
• android:numColumns : Defines how many columns to show. May be an integer value, such as “100” or auto_fit which means display as many columns as possible to fill the available space
  android：numColumns ：定义要显示的列数。 可以是整数值，例如“ 100”或auto_fit，这表示要显示尽可能多的列以填充可用空间
• android:stretchMode : Defines how columns should stretch to fill the available empty space, if any. This must be either of the values :
  android：stretchMode ：定义列应如何拉伸以填充可用的空白空间（如果有）。 这必须是以下两个值之一：
• • none : Stretching is disabled
    none ：禁用拉伸
  • spacingWidth : The spacing between each column is stretched
    intervalWidth ：每列之间的间距被拉伸
  • columnWidth : Each column is stretched equally
    columnWidth ：每列均等地拉伸
  • spacingWidthUniform : The spacing between each column is uniformly stretched
    intervalWidthUniform ：每列之间的间距均匀地拉伸
• android:verticalSpacing : Defines the default vertical spacing between rows. This could be in px, dp, sp, in, or mm
  android：verticalSpacing ：定义行之间的默认垂直间距。 可以是px，dp，sp，in或mm

Android GridView布局 (Android GridView Layout)

The layout for GridView is defined as follows:
layout_grid.xml

GridView的布局定义如下：
layout_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:columnWidth="50dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

</GridView>

Android GridView示例项目结构 (Android GridView Example Project Structure)

This activity consists of two Activities and their layouts, an Adapter class and a list of drawables taken from here.

该活动包括两个Activity及其布局，一个Adapter类和一个从此处获取的可绘制对象列表。

Android GridView示例代码 (Android GridView Example Code)

The Application launches into the GridViewActivity class given below :

该应用程序启动到下面给出的GridViewActivity类中：

package com.journaldev.gridlayout;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class GridViewActivity extends AppCompatActivity {

    GridView gridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_grid);

        gridView = (GridView) findViewById(R.id.gridView);

        gridView.setAdapter(new ImageAdapter(this));

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id){
                // Send intent to SingleViewActivity
                Intent i = new Intent(getApplicationContext(), FullViewActivity.class);

                // Pass image index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }

}

The FullViewActivity is passed the respective positions of the ImageView clicked.

FullViewActivity将传递所单击的ImageView的相应位置。

The ImageAdapter class is used to a implement the functionality of an Adapter to fill the view from the drawable resources as shown below.

ImageAdapter类用于实现适配器的功能，以填充可绘制资源中的视图，如下所示。

package com.journaldev.gridlayout;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Constructor
    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;

        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(100, 100));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        }
        else
        {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.rotation_3d, R.drawable.alarm,
            R.drawable.classed, R.drawable.explore,
            R.drawable.giftcard, R.drawable.http,
            R.drawable.thumbs_up, R.drawable.account, R.drawable.language,
            R.drawable.lock, R.drawable.print,
            R.drawable.redeem, R.drawable.spellcheck,
            R.drawable.settings
    };
}

In the above code the layout of the ImageView is set programmatically using setLayoutParams(). The drawable resource ids are stored in an Integer array which is set to the respective position using setImageResource().

在上面的代码中，使用setLayoutParams()编程方式设置ImageView的布局。 可绘制资源ID存储在一个Integer数组中，该数组使用setImageResource()设置为相应的位置。

package com.journaldev.gridlayout;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class FullViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.full_view);

        // Get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ImageView imageView = (ImageView) findViewById(R.id.SingleView);
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }

}

The layout of FullViewActivity is defined as follows:

FullViewActivity的布局定义如下：

full_view.xml

full_view.xml

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

    <ImageView android:id="@+id/SingleView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

Here is the final app in full action.

这是完整的最终应用程序。

This brings an end to android GridView tutorial. You can download the final android GridView example project from the below link.

这结束了android GridView教程。 您可以从下面的链接下载最终的android GridView示例项目。

翻译自: https://www.journaldev.com/9538/android-gridview-example