Android UI设计——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);
        }
    }
}

结果：



总体效果：