Android UI设计：GridView

GriView

GriView组件的实现效果与ListView的区别是GriView的以列的形式进行显示的。

使用方式与ListView大致相同。

布局（不同添加的组件是GridView，并设置列数）：

<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" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">   <GridView       android:id="@+id/gridview"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:numColumns="3"       >   </GridView></RelativeLayout>

列数的设置：android:numColumns=”3”

item_grid_fruit(添加了图片和名字)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center">    <ImageView        android:id="@+id/img"        android:layout_width="100dp"        android:layout_height="100dp"        android:src="@mipmap/apple"/>    <TextView        android:id="@+id/name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="苹果"/></LinearLayout>

FruitAdapter（与之前代码相同）：

package adapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.grid.administrator.mygridview.Fruit;import com.grid.administrator.mygridview.R;import java.util.List;/** * Created by Administrator on 2015/8/26. */public class FruitApapter extends BaseAdapter {    private LayoutInflater minflater;    private List<Fruit> mfruits;    public FruitApapter(LayoutInflater minflater, List<Fruit> mfruits) {        this.minflater = minflater;        this.mfruits = mfruits;    }    @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(int position, View convertView, ViewGroup parent) {        ViewHolder vh;        if(convertView==null) {            convertView = minflater.inflate(R.layout.item_grid_fruit, null);            vh=new ViewHolder();            vh.textView= (TextView) convertView.findViewById(R.id.name);            vh.img= (ImageView) convertView.findViewById(R.id.img);            convertView.setTag(vh);        }else{          vh= (ViewHolder) convertView.getTag();        }       Fruit fruit= mfruits.get(position);        vh.textView.setText(fruit.getName());        vh.img.setImageResource(fruit.getImg());        return convertView;    }    class  ViewHolder{        TextView textView;        ImageView img;    }}

MainActivity（自定义Baseadapter）：

package com.grid.administrator.mygridview;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.widget.GridView;import java.util.ArrayList;import java.util.List;import adapter.FruitApapter;public class MainActivity extends Activity {   private GridView mgridView;    private LayoutInflater minflater;    private List<Fruit> mfruits;    private FruitApapter adapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mgridView= (GridView) findViewById(R.id.gridview);        minflater=getLayoutInflater();        initfruits();        adapter=new FruitApapter(minflater,mfruits);        mgridView.setAdapter(adapter);    }    private void initfruits() {       mfruits=new ArrayList<>();        for (int i = 0; i <6 ; i++) {            Fruit apple=new Fruit("苹果",R.mipmap.apple);            Fruit banana=new Fruit("香蕉",R.mipmap.banana);            Fruit putao=new Fruit("葡萄",R.mipmap.putao);            Fruit pineapple=new Fruit("菠萝",R.mipmap.pineaapple);            Fruit watermelon=new Fruit("西瓜",R.mipmap.watermelon);            mfruits.add(apple);            mfruits.add(banana);            mfruits.add(putao);            mfruits.add(pineapple);            mfruits.add(watermelon);        }    }}

Fruit（与之前代码相同）

package com.grid.administrator.mygridview;/** * Created by Administrator on 2015/8/26. */public class Fruit {    private String name;    private  int img;    public Fruit(String name, int img) {        this.name = name;        this.img = img;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public int getImg() {        return img;    }    public void setImg(int img) {        this.img = img;    }}

GridView添加蒙版

1、在item_fruit中添加imageView用来添加蒙版，用于覆盖

2、注：src与backgroud区别：src属性是ImageView所特有的，把background属性是所有的view所共有的

3、在FruitAdapter中添加boolean[] manager来获得所有的checkbox的状态，检测checkbox的状态的改变。

①layout

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center">    <ImageView        android:id="@+id/img"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_centerInParent="true"        android:layout_margin="10dp"        android:src="@mipmap/apple"/>    <TextView        android:id="@+id/name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/img"        android:layout_centerHorizontal="true"        android:gravity="center"        android:text="苹果"/>    <ImageView        android:id="@+id/imgview_tint"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_centerInParent="true"        android:layout_margin="10dp"        android:visibility="invisible"        android:background="#444400f0"/>     <CheckBox         android:id="@+id/box"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerVertical="true"         android:layout_toRightOf="@id/img"         android:layout_alignTop="@id/img"         android:checked="false"        /></RelativeLayout>

②FruitAdapter

package adapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.CheckBox;import android.widget.CompoundButton;import android.widget.ImageView;import android.widget.TextView;import com.grid.administrator.mygridview.Fruit;import com.grid.administrator.mygridview.R;import java.util.List;/** * Created by Administrator on 2015/8/26. */public class FruitApapter extends BaseAdapter {    private LayoutInflater minflater;    private List<Fruit> mfruits;    private boolean[] manager;    public FruitApapter(LayoutInflater minflater, List<Fruit> mfruits ) {        this.minflater = minflater;        this.mfruits = mfruits;        manager=new boolean[this.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 parent) {        ViewHolder vh;        if(convertView==null) {            convertView = minflater.inflate(R.layout.item_grid_fruit, null);            vh=new ViewHolder();            vh.textView= (TextView) convertView.findViewById(R.id.name);            vh.img= (ImageView) convertView.findViewById(R.id.img);            vh.imgtint= (ImageView) convertView.findViewById(R.id.imgview_tint);            vh.box= (CheckBox) convertView.findViewById(R.id.box);            convertView.setTag(vh);        }else{          vh= (ViewHolder) convertView.getTag();        }         vh.box.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {             @Override             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {                 manager[position]=isChecked;                 notifyDataSetChanged();             }         });       Fruit fruit= mfruits.get(position);        vh.textView.setText(fruit.getName());        vh.img.setImageResource(fruit.getImg());        vh.box.setChecked(manager[position]);        if(manager[position]){            vh.imgtint.setVisibility(View.VISIBLE);        }else{            vh.imgtint.setVisibility(View.INVISIBLE);        }        return convertView;    }    class  ViewHolder{        TextView textView;        ImageView img;        CheckBox box;        ImageView imgtint;    }}

GridView添加蒙版

1、在item_fruit界面中添加ImageView控件，用作蒙版调用，以及CheckBox控件，用于选择图片。

2、在FruitAdapter中添加manager，用于存储所有checkbox的状态，在checkbox状态改变时，设置ImgeView的visibility属性。

3、src与background的区别：src是imageview特有的属性，background是所有View的公有属性。

item_fruit界面

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center">    <ImageView        android:id="@+id/img"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_centerInParent="true"        android:layout_margin="10dp"        android:src="@mipmap/apple"/>    <TextView        android:id="@+id/name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/img"        android:layout_centerHorizontal="true"        android:gravity="center"        android:text="苹果"/>    <ImageView        android:id="@+id/imgview_tint"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_centerInParent="true"        android:layout_margin="10dp"        android:visibility="invisible"        android:background="#444400f0"/>     <CheckBox         android:id="@+id/box"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerVertical="true"         android:layout_toRightOf="@id/img"         android:layout_alignTop="@id/img"         android:checked="false"        /></RelativeLayout>

注：在imgview_tint中必须设置宽和高，不然不显示，这是由于RelativeLayout的特殊性决定的。

FruitAdapter：

package adapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.CheckBox;import android.widget.CompoundButton;import android.widget.ImageView;import android.widget.TextView;import com.grid.administrator.mygridview.Fruit;import com.grid.administrator.mygridview.R;import java.util.List;/** * Created by Administrator on 2015/8/26. */public class FruitApapter extends BaseAdapter {    private LayoutInflater minflater;    private List<Fruit> mfruits;    private boolean[] manager;    public FruitApapter(LayoutInflater minflater, List<Fruit> mfruits ) {        this.minflater = minflater;        this.mfruits = mfruits;        //manager初始化，默认为false        manager=new boolean[this.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 parent) {        ViewHolder vh;        if(convertView==null) {            convertView = minflater.inflate(R.layout.item_grid_fruit, null);            vh=new ViewHolder();            vh.textView= (TextView) convertView.findViewById(R.id.name);            vh.img= (ImageView) convertView.findViewById(R.id.img);            vh.imgtint= (ImageView) convertView.findViewById(R.id.imgview_tint);            vh.box= (CheckBox) convertView.findViewById(R.id.box);            convertView.setTag(vh);        }else{          vh= (ViewHolder) convertView.getTag();        }        //检测checkbox状态的变化         vh.box.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {             @Override             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {             //获得是否勾选的状态                 manager[position]=isChecked;                 //刷新界面                 notifyDataSetChanged();             }         });       Fruit fruit= mfruits.get(position);        vh.textView.setText(fruit.getName());        vh.img.setImageResource(fruit.getImg());         //设置勾选状态        vh.box.setChecked(manager[position]);        //如果勾选就设置蒙版可见，否则蒙版不可见        if(manager[position]){            vh.imgtint.setVisibility(View.VISIBLE);        }else{            vh.imgtint.setVisibility(View.INVISIBLE);        }        return convertView;    }    class  ViewHolder{        TextView textView;        ImageView img;        CheckBox box;        ImageView imgtint;    }}

蒙版效果图