Android UI 设计（14）：GridView 控件

GridView

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

GridView的使用步骤：

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

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

<RelativeLayout xmlns: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。创建数据，这里还是以水果为例。

public class Fruit {

private boolean mCheckBoxchecked;

private int mImage;

private String mFruitName;

private int mImageTint;

public int getmImageTint() {

return mImageTint;

}

public void setmImageTint(int mImageTint) {

this.mImageTint = mImageTint;

}

public Fruit(int mImage, String mFruitName) {

this.mImage = mImage;

this.mFruitName = mFruitName;

}

public boolean ismCheckBoxchecked() {

return mCheckBoxchecked;

}

public void setmCheckBoxchecked(boolean mCheckBoxchecked) {

this.mCheckBoxchecked = mCheckBoxchecked;

}

public int getmImage() {

return mImage;

}

public void setmImage(int mImage) {

this.mImage = mImage;

}

public String getmFruitName() {

return mFruitName;

}

public void setmFruitName(String mFruitName) {

this.mFruitName = mFruitName;

}

}

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

<RelativeLayout xmlns: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中。

public class MyGridAdapter extends BaseAdapter{

private List<Fruit> mFruits;

private LayoutInflater mInfalter;

private ViewHolder viewHolder;

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

private boolean[] mManagerCheckBox;

private int[] mImageViewTint={View.INVISIBLE};

/*

生成构造器

*/

public MyGridAdapter(List<Fruit> mFruits, LayoutInflater mInfalter) {

this.mFruits = mFruits;

this.mInfalter = mInfalter;

mManagerCheckBox = new boolean[mFruits.size()];

}

@Override

public int getCount() {

return mFruits.size();

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(final int position, View convertView, ViewGroup viewGroup) {

if(convertView==null){

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

viewHolder = new ViewHolder();

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(new CompoundButton.OnCheckedChangeListener() {

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)

@Override

public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {

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);

}

return convertView;

}

/*

创建ViewHolder的内部类

*/

class ViewHolder{

CheckBox checkBox;

ImageView imageViewTint;

ImageView imageViewFruit;

TextView textViewFruitName;

}

}

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

public class MainActivity extends Activity {

private GridView mGridView;

private List<Fruit> mFruits;

private LayoutInflater mInflater;

private MyGridAdapter mMyGridAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

mInflater = getLayoutInflater();

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

initData();

mMyGridAdapter = new MyGridAdapter(mFruits,mInflater);

mGridView.setAdapter(mMyGridAdapter);

}

//数据初始化啦……

private void initData() {

mFruits =new ArrayList<Fruit>();

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

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

mFruits.add(apple);

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

mFruits.add(banana);

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

mFruits.add(grape);

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

mFruits.add(watermelon);

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

mFruits.add(pineapple);

}

}

}

结果：

总体效果：