Android UI设计：GridView

GriView

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




使用方式与ListView大致相同。

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

[code]<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(添加了图片和名字)

[code]<?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（与之前代码相同）：

[code]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）：

[code]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（与之前代码相同）

[code]

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

[code]<?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

[code]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界面

[code]<?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：

[code]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;
    }
}

蒙版效果图