Android GridView Example 示例

GridView 使用相同的模板渲染每个单元格，要使用 GridView，我们要做下面几件事：

1. 扩展 BaseAdapter；
2. 在 getView 中返回每个单元格的 View；
3. 设置 GridView 的 adapter 为扩展类实例。

1. Create Adapter

我们只在单元格中放了一个 ImageView， 你可以根据自己需要随意更改，其布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  android:padding="5dp"
  android:layout_height="wrap_content">

  <ImageView
    android:id="@+id/item"
    android:scaleType="fitXY"
    android:layout_width="205dp"
    android:layout_height="154dp" />

</android.support.constraint.ConstraintLayout>

Adapter 代码如下：

package me.xandeer.examples.gridview

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import me.xandeer.examples.R

class ImageAdapter(val context: Context, private val count: Int): BaseAdapter() {
  // 单元格的 View
  override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
    val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    val gridView: View

    if (convertView == null) {
      gridView = inflater.inflate(R.layout.adapter_grid_view, null)
      val imageView = gridView.findViewById<ImageView>(R.id.item)
      imageView.setImageResource(when (position) {
        0 -> R.drawable.grid_item0
        1 -> R.drawable.grid_item1
        2 -> R.drawable.grid_item2
        else -> R.drawable.grid_item0
      })
    } else {
      gridView = convertView
    }

    return gridView
  }

  // 要渲染的单元格数量
  override fun getCount(): Int {
    return count
  }

  // 在这个示例中不用，Android 要求实现此方法
  override fun getItem(position: Int): Any? {
    return null
  }

  // 在这个示例中不用，Android 要求实现此方法
  override fun getItemId(position: Int): Long {
    return 0
  }
}

2. Create Activity

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="me.xandeer.examples.gridview.GridViewActivity">

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    app:title="@string/grid_view"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:navigationIcon="@drawable/ic_toolbar_back" />

  <GridView
    android:id="@+id/grid_view"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:columnWidth="205dp"
    android:stretchMode="spacingWidthUniform"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

android:stretchMode 属性决定如何分配每行的空余，其可选值如下：

Constant	Description
columnWidth	平均分配给每个单元格
none	禁止拉伸
spacingWidth	平均分配给每个单元格之间
spacingWidthUniform	平均分配给每个单元格左右两边

代码如下：

package me.xandeer.examples.gridview

import android.os.Bundle
import kotlinx.android.synthetic.main.activity_grid_view.*
import me.xandeer.examples.BaseActivity
import me.xandeer.examples.R

class GridViewActivity : BaseActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_grid_view)

    initToolbar()
    initGridView()
  }


  private fun initToolbar() {
    setSupportActionBar(toolbar)

    toolbar.setNavigationOnClickListener {
      this.finish()
    }
  }

  private fun initGridView() {
    grid_view.adapter = ImageAdapter(this, 3)
    // 注册单元格的点击事件
    grid_view.setOnItemClickListener { parent, view, position, id ->
      toolbar.title = position.toString()
    }
  }
}

3. Build, compile and run

grid-view.gif

4. Code Repository

Github: Android Example