Android UI 设计（14）：GridView 控件

GridView

GridView的用法与ListView的用法相同，都需要使用Adapter适配器。GridView与ListView控件唯一的不同便是显示形式不同，GridView是以行*列的形式展现的，使多条数据在一行。我们手机上的相册一个很好的例子。

GridView的使用步骤：

（在下面这个例子中，添加了一个小功能：这个功能在我们平常发送图片的时候会看到，就是当我们点击选择框选择图片时，图片会变白半透明，也就是添加了一层蒙版。这里我们也实现一下这个小功能。）

• 首先在Activity的布局文件中添加一个GridView。注意一个属性：”numCulumns“，定义列数。

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<GridView

android:id="@+id/gridview_fruit"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:numColumns="3">

</GridView>

</RelativeLayout>

结果：

• M， 即Model。创建数据，这里还是以水果为例。

publicclassFruit{

privatebooleanmCheckBoxchecked;

privateintmImage;

privateStringmFruitName;

privateintmImageTint;

publicintgetmImageTint(){

returnmImageTint;

}

publicvoidsetmImageTint(intmImageTint){

this.mImageTint=mImageTint;

}

publicFruit(intmImage,StringmFruitName){

this.mImage=mImage;

this.mFruitName=mFruitName;

}

publicbooleanismCheckBoxchecked(){

returnmCheckBoxchecked;

}

publicvoidsetmCheckBoxchecked(booleanmCheckBoxchecked){

this.mCheckBoxchecked=mCheckBoxchecked;

}

publicintgetmImage(){

returnmImage;

}

publicvoidsetmImage(intmImage){

this.mImage=mImage;

}

publicStringgetmFruitName(){

returnmFruitName;

}

publicvoidsetmFruitName(StringmFruitName){

this.mFruitName=mFruitName;

}

}

• V, 即View。创建一个View，每个水果的显示形式

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/imageview_fruit"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:layout_margin="15dp"

android:src="@mipmap/apple" />

<TextView

android:id="@+id/textview_fruit_name"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/imageview_fruit"

android:gravity="center"

android:text="名称" />

<ImageView

android:id="@+id/imageview_tint"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignBottom="@+id/textview_fruit_name"

android:layout_alignRight="@+id/textview_fruit_name"

android:layout_alignTop="@+id/checkbox_picture_checked"

android:background="@color/tint"

android:visibility="invisible" />

<CheckBox

android:id="@+id/checkbox_picture_checked"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:focusable="false" />

</RelativeLayout>

• 创建一个Adapter。将数据添加到View中。

publicclassMyGridAdapterextendsBaseAdapter{

privateList<Fruit>mFruits;

privateLayoutInflater mInfalter;

privateViewHolder viewHolder;

//定义一个CheckBox的管理器。

privateboolean[]mManagerCheckBox;

privateint[]mImageViewTint={View.INVISIBLE};

/*

生成构造器

*/

publicMyGridAdapter(List<Fruit>mFruits,LayoutInflater mInfalter){

this.mFruits=mFruits;

this.mInfalter=mInfalter;

mManagerCheckBox=newboolean[mFruits.size()];

}

@Override

publicintgetCount(){

returnmFruits.size();

}

@Override

publicObjectgetItem(intposition){

returnposition;

}

@Override

publiclonggetItemId(intposition){

returnposition;

}

@Override

publicView getView(finalintposition,View convertView,ViewGroup viewGroup){

if(convertView==null){

convertView=mInfalter.inflate(R.layout.item_fruits,null);

viewHolder=newViewHolder();

viewHolder.imageViewFruit=(ImageView)convertView.findViewById(R.id.imageview_fruit);

viewHolder.textViewFruitName=(TextView)convertView.findViewById(R.id.textview_fruit_name);

viewHolder.checkBox=(CheckBox)convertView.findViewById(R.id.checkbox_picture_checked);

viewHolder.imageViewTint=(ImageView)convertView.findViewById(R.id.imageview_tint);

convertView.setTag(viewHolder);

}else{

viewHolder=(ViewHolder)convertView.getTag();

}

Fruit fruit=mFruits.get(position);

viewHolder.imageViewFruit.setImageResource(fruit.getmImage());

viewHolder.textViewFruitName.setText(fruit.getmFruitName());

viewHolder.imageViewTint.setImageResource(fruit.getmImageTint());

viewHolder.checkBox.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener(){

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)

@Override

publicvoidonCheckedChanged(CompoundButton compoundButton,booleanisChecked){

mManagerCheckBox[position]=isChecked;

notifyDataSetChanged();

}

});

viewHolder.checkBox.setChecked(mManagerCheckBox[position]);

//设置蒙版

if(mManagerCheckBox[position]==true){

Log.d("data",""+position+"设置蒙版 ");

viewHolder.imageViewTint.setVisibility(View.VISIBLE);

Log.d("data",""+viewHolder.imageViewTint.getId());

}else{

viewHolder.imageViewTint.setVisibility(View.INVISIBLE);

}

returnconvertView;

}

/*

创建ViewHolder的内部类

*/

classViewHolder{

CheckBox checkBox;

ImageView imageViewTint;

ImageView imageViewFruit;

TextView textViewFruitName;

}

}

• C，即Control。在Activity中调用自定义的Adapter，将View添加到GridView的每一个Item中。（最近真的是用Adapter用吐了哇，可是还是有很多不会的，嘤嘤，，纠结　~@@~ 纠结……）

publicclassMainActivityextendsActivity{

privateGridView mGridView;

privateList<Fruit>mFruits;

privateLayoutInflater mInflater;

privateMyGridAdapter mMyGridAdapter;

@Override

protectedvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mGridView=(GridView)findViewById(R.id.gridview_fruit);

mInflater=getLayoutInflater();

//调用数据初始化方法。

initData();

mMyGridAdapter=newMyGridAdapter(mFruits,mInflater);

mGridView.setAdapter(mMyGridAdapter);

}

//数据初始化啦……

privatevoidinitData(){

mFruits=newArrayList<Fruit>();

for(inti=0;i<10;i++){

Fruit apple=newFruit(R.mipmap.apple,"苹果");

mFruits.add(apple);

Fruit banana=newFruit(R.mipmap.banana,"香蕉");

mFruits.add(banana);

Fruit grape=newFruit(R.mipmap.grape,"葡萄");

mFruits.add(grape);

Fruit watermelon=newFruit(R.mipmap.watermelon,"西瓜");

mFruits.add(watermelon);

Fruit pineapple=newFruit(R.mipmap.pineapple,"菠萝");

mFruits.add(pineapple);

}

}

}

结果：

总体效果：