Android学习之——GridView

背景知识

    GridView在Android开发中和ListView一样经常被使用。如我们经常使用的快图浏览，里面就有将图片的布局改为网格（即GridView）的选项。还有约X神器——陌陌的搜索界也是用了GridView。

                      

    

定义

   GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter

   网格视图是一个二维的可滚动的网格中展示网格项的视图集合。网格项使用ListAdapter自动插入到布局中。

 

  

Demo

 1.使用SimpleAdapter适配

MainActivity

package com.johntsai.gridviewdemo;

import java.util.ArrayList;
import java.util.HashMap;

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

public class MainActivity extends Activity {
    private int ids[]={
        R.drawable.aaa,
        R.drawable.bbb,
        R.drawable.ccc,
        R.drawable.ddd,
        R.drawable.eee,
        R.drawable.fff,
        R.drawable.ggg,
        R.drawable.hhh,
        R.drawable.aaa
    };
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        gridView = (GridView)findViewById(R.id.gridview);
    
        ArrayList<HashMap<String, Object>> images = new ArrayList<HashMap<String,Object>>();
        for(int i=0;i<ids.length;i++){
            HashMap<String, Object>map = new HashMap<String, Object>();
            map.put("Image", ids[i]);
            map.put("Id", "Android"+i+"号");
            images.add(map);
        }
    
        SimpleAdapter adapter = new SimpleAdapter(this,
                images, R.layout.gridview_item, 
                new String[]{"Image","Id"}, new int[]{R.id.imageItem,R.id.idItem});
        gridView.setAdapter(adapter);
        
        gridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                 Toast.makeText(getApplicationContext(), 
                         "你点击了" + position+"号", Toast.LENGTH_LONG).show();

            }
        });
    }
}

 

 

 主界面布局文件

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>
<!--  
  android:columnWidth="90dp" 列宽设置为90dp
  android:numColumns="auto_fit"列数设置为自动
  android:stretchMode="columnWidth" 缩放与列的宽度同步
  -->

GridView项布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingBottom="4dip">
    
    <ImageView 
        android:id="@+id/imageItem"
        android:layout_height="70dp"
        android:layout_width="70dp"
        android:layout_centerHorizontal="true"
        />
    <TextView 
        android:id="@+id/idItem"
        android:layout_height="wrap_content"
        android:layout_width="70dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/imageItem"
        />
</RelativeLayout>

运行效果：

          

     2.使用继承自BaseAdapter的ImageAdapter适配

   

package com.johntsai.gridviewdemo;

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 {
    public Integer [] ImagesIds = {
        R.drawable.aaa,
        R.drawable.bbb,
        R.drawable.ccc,
        R.drawable.ddd,
        R.drawable.eee,
        R.drawable.fff,
        R.drawable.ggg,
        R.drawable.hhh
    };
    private Context context;
    //构造方法
    public ImageAdapter(Context c) {
          context = c;
    }
    @Override
    public int getCount() {
        return ImagesIds.length;
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;   
        if (convertView == null) {
                  imageView = new ImageView(context);
                  imageView.setLayoutParams(new GridView.LayoutParams(100, 100));
                  imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                  imageView.setPadding(0, 0, 0, 0);
                  } else {
                      imageView = (ImageView) convertView;
                  }

                  imageView.setImageResource(ImagesIds[position]);
                  return imageView;
    }

}

 

 

MainActivity

public class MainActivity extends Activity {
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        gridView = (GridView)findViewById(R.id.gridview);
        gridView.setAdapter(new ImageAdapter(getApplicationContext()));
        
        gridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                 Toast.makeText(getApplicationContext(), 
                         "你点击了" + position+"号", Toast.LENGTH_LONG).show();
            
            }
        });
    }
}