Android GridView Example 示例

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

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

1. Create Adapter

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

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(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

布局如下：

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