Android UI设计——GridView控件

来源：互联网发布：新淘宝店如何破零知乎编辑：程序博客网时间：2024/05/21 00:55

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

结果：

这里写图片描述

总体效果：

这里写图片描述

3 0