Android GridView示例

时间:2020-02-23 14:28:58  来源:igfitidea点击:

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

Android GridView

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

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

Android GridView属性

  • android:id:这是唯一标识布局的ID

  • android:columnWidth:这为每列指定固定宽度。
    可以是px,dp,sp,in或者mm

  • android:gravity:指定每个单元格内的重力。
    可能的值是上,下,左,右,中心,center_vertical,center_horizontal等。

  • android:horizontalSpacing:定义列之间的默认水平间距。
    可以是px,dp,sp,in或者mm

  • android:numColumns:定义要显示的列数。
    可以是整数值,例如" 100"或者auto_fit,这表示要显示尽可能多的列以填充可用空间

  • android:stretchMode:定义列应如何拉伸以填充可用的空白空间(如果有)。
    这必须是以下两个值之一:

  • none:禁用拉伸

  • intervalWidth:每列之间的间距被拉伸

  • columnWidth:每列均等地拉伸

  • intervalWidthUniform:每列之间的间距均匀地拉伸

  • android:verticalSpacing:定义行之间的默认垂直间距。
    可以是px,dp,sp,in或者mm

Android GridView布局

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示例项目结构

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

Android GridView示例代码

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

package com.theitroad.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);
          }
      });
  }

}

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

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

package com.theitroad.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
  };
}

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

package com.theitroad.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]);
  }

}

FullViewActivity的布局定义如下:

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>