Android App中的GridView网格布局使用指南

概述零、常用属性首先我们来看看GridView的一些常用的属性吧1.android:numColumns=”auto_fit”//GridView的列数设置为自动

零、常用属性
首先我们来看看GrIDVIEw的一些常用的属性吧

1.androID:numColumns=”auto_fit” //GrIDVIEw的列数设置为自动
2.androID:columnWIDth=”90dp ” //每列的宽度，也就是Item的宽度
3.androID:stretchMode=”columnWIDth”//缩放与列宽大小同步
4.androID:verticalSpacing=”10dp” //两行之间的边距
5.androID:horizontalSpacing=”10dp” //两列之间的边距
6.androID:cachecolorHint=”#00000000” //去除拖动时默认的黑色背景
7.androID:ListSelector=”#00000000” //去除选中时的黄色底色
8.androID:scrollbars=”none” //隐藏GrIDVIEw的滚动条
9.androID:fadeScrollbars=”true” //设置为true就可以实现滚动条的自动隐藏和显示
10.androID:fastScrollEnabled=”true” //GrIDVIEw出现快速滚动的按钮(至少滚动4页才会显示)
11.androID:fadingEdge=”none” //GrIDVIEw衰落(褪去)边缘颜色为空，缺省值是vertical。(可以理解为上下边缘的提示色)
12.androID:fadingEdgeLength=”10dip” //定义的衰落(褪去)边缘的长度
13.androID:stackFromBottom=”true” //设置为true时，你做好的列表就会显示你列表的最下面
14.androID:transcriptMode=”alwaysScroll” //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内
15.androID:drawSelectorOntop=”false” //点击某条记录不放，颜色会在记录的后面成为背景色,内容的文字可见(缺省为false)

至于GrIDVIEw的用法就不多说了，和ListVIEw的用法一样。下面小编给打加分享一下GrIDVIEw的一些比较特殊的情况吧。

一、GrIDVIEw按钮图片点击效果

我们先来看看GrIDVIEw按钮图片的点击效果吧，不是说每一个item的点击背景颜色的改变，那个很简单实现，自定义一个selector就可以实现，接下来小编要说的是每一个item上的imagevIEw的点击效果….
要想实现这种功能我们要设置imagevIEw的 androID:clickable=”true”，看一下布局文件：

<imagevIEw androID:ID="@+ID/ItemImage" androID:layout_height="50dp" androID:layout_wIDth="50dp" androID:scaletype="fitXY" androID:adjustvIEwbounds="true" androID:clickable="true" androID:layout_margintop="@dimen/smaller_space" androID:layout_centerhorizontal="true"></imagevIEw>

2.然后我们在自定义adapter中定义一个改变按钮图片的颜色方法，通过初始化adapter的时候，将九宫格的图片传过来，通过ontouch事件来改变颜色值

public VIEw.OntouchListener ontouchListener = new VIEw.OntouchListener() {    @OverrIDe    public boolean ontouch(VIEw vIEw,MotionEvent event) {      switch (event.getAction()) {        case MotionEvent.ACTION_UP:          changelight((ImageVIEw) vIEw,0);                    break;        case MotionEvent.ACTION_DOWN:          changelight((ImageVIEw) vIEw,-80);          break;        case MotionEvent.ACTION_MOVE:                    break;        case MotionEvent.ACTION_CANCEL:          changelight((ImageVIEw) vIEw,0);          break;        default:          changelight((ImageVIEw) vIEw,0);          break;      }      return false;    }  };  /**  *改变grIDvIEw图片的颜色值  **/  private voID changelight(ImageVIEw imagevIEw,int brightness) {    colorMatrix matrix = new colorMatrix();    matrix.set(new float[] { 1,brightness,1,0 });    imagevIEw.setcolorFilter(new colorMatrixcolorFilter(matrix));  }

3.我们还需要定义一个接口实现grIDvIEw的onItem点击事件

public interface OnCustomItemClickListener{  public int getPostion();  public voID onCustomItemClk(int i);  }  holder.itemImage.setontouchListener(ontouchListener);    holder.itemImage.setonClickListener(new VIEw.OnClickListener() {      @OverrIDe      public voID onClick(VIEw vIEw) {        clickPos = i;        Listener.onCustomItemClk(clickPos);      }    });

大体思路和主要代码都跟大家介绍的很详细了，需要的小伙伴可以去下载源码….

二、GrIDVIEw九宫格分割线效果实现(仿支付宝)

最近项目中要实现一个仿支付宝九宫格分割线的功能，因为项目比较急在网上找了找，发现都是设置一些背景来实现，闲的时候想了想，可以自定义一个GrIDVIEw来实现，下面小编来分享一下实现方法

设置背景来实现九宫格分割线效果：

定义selector背景

<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID"></selector>  <item androID:state_pressed="true"></item><shape androID:shape="rectangle"></shape>    <stroke androID:wIDth="1.0px" androID:color="@color/line"></stroke>    <gradIEnt androID:angle="270.0" androID:endcolor="#ffe8ecef" androID:startcolor="#ffe8ecef"></gradIEnt>    <item androID:state_focused="true"></item><shape androID:shape="rectangle"></shape>    <gradIEnt androID:angle="270.0" androID:endcolor="#ffe8ecef" androID:startcolor="#ffe8ecef"></gradIEnt>    <stroke androID:wIDth="1.0px" androID:color="@color/line"></stroke>    <item></item><shape androID:shape="rectangle"></shape>    <gradIEnt androID:angle="270.0" androID:endcolor="@color/gray" androID:startcolor="@color/gray"></gradIEnt>    <stroke androID:wIDth="0.5px" androID:color="@color/line"></stroke>

给布局设置这个背景就可以了，一点小瑕疵就是每一行重叠的线会比不重叠的粗，不认真看看不出来的，还可以凑合用，但是小编比较追求完美，下面看一下自定义GrIDVIEw的实现方法吧。

三、自定义GrIDVIEw实现：

思路：

1.通过反射获取GrIDVIEw的列数

2.获取GrIDVIEw的childvIEw

3.根据childvIEw的情况画线

代码：

@OverrIDe  protected voID dispatchDraw(Canvas canvas)  {    super.dispatchDraw(canvas)    int column = 1    try    {      //通过反射拿到列数      FIEld fIEld = GrIDVIEw.class.getDeclaredFIEld("mNumColumns")      fIEld.setAccessible(true)      column = fIEld.getInt(this)    }    catch (NoSuchFIEldException e)    {      e.printstacktrace()    }    catch (illegalaccessexception e)    {      e.printstacktrace()    }    int childCount = getChildCount()    Paint paint = new Paint()    paint.setStyle(Paint.Style.stroke)    paint.setcolor(getContext().getResources().getcolor(R.color.line))    for (int i = 0    {      VIEw cellVIEw = getChildAt(i)      Log.e(">>>>>>>>>>>>>>>","i="+i+"||||||||||"+"top"+cellVIEw.gettop()+"bottom"+cellVIEw.getBottom()+"left"+cellVIEw.getleft()+"right"+cellVIEw.getRight())      if (cellVIEw.gettop()!=0){        //顶部线，坐标+1是为了画在cellVIEw上        canvas.drawline(cellVIEw.getleft(),cellVIEw.gettop() + 1,cellVIEw.getRight(),paint)      }      //左边线      canvas.drawline(cellVIEw.getleft() + 1,cellVIEw.gettop(),cellVIEw.getleft() + 1,cellVIEw.getBottom(),paint)      if ((i + 1) % column == 0)   //最右边一列单元格画上右边线      {        canvas.drawline(cellVIEw.getRight(),cellVIEw.getBottom() + 1,paint)      }      if ((i + column) >= childCount) //最后column个单元格画上底边线      {        canvas.drawline(cellVIEw.getleft(),paint)      }      if (childCount % column != 0 && i == childCount - 1)  //如果最后一个单元格不在最右一列，单独为它画上右边线      {        canvas.drawline(cellVIEw.getRight() + 1,cellVIEw.getRight() + 1,paint)        canvas.drawline(cellVIEw.getRight()+1,cellVIEw.getleft(),paint)      }    }  }

四、给每行添加上分割线

大概思想就是：既然在GrIDVIEw里没有设置的方法，那就直接加在item里，在通过别的方法改变item的显示效果，从而达到设置分割线的方法~废话不多说~下面详细的介绍：首先是GrIDVIEw的布局，androID:numColumns=”3″ 每行三列

<GrIDVIEw    androID:ID="@+ID/content"    androID:layout_wIDth="fill_parent"    androID:layout_height="match_parent"    androID:numColumns="3" ></GrIDVIEw>

接下来是item的布局

<?xml version="1.0" enCoding="UTF-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="fill_parent"  androID:layout_height="fill_parent"  androID:orIEntation="vertical" >  <FrameLayout    androID:ID="@+ID/layout"    androID:layout_wIDth="fill_parent"    androID:layout_height="105dp"    androID:layout_marginBottom="13dp"    androID:layout_margintop="13dp"    androID:orIEntation="vertical" >    <ImageVIEw      androID:ID="@+ID/imageVIEw"      androID:layout_wIDth="fill_parent"      androID:layout_height="105dp"      androID:scaleType="centerCrop" />    <relativeLayout      androID:layout_wIDth="fill_parent"      androID:layout_height="40dp"      androID:layout_gravity="bottom"      androID:background="#50000000" >      <TextVIEw        androID:ID="@+ID/textVIEw"        androID:layout_wIDth="wrap_content"        androID:layout_height="wrap_content"        androID:layout_centerInParent="true"        androID:gravity="center"        androID:maxlines="2"        androID:paddingleft="10dp"        androID:paddingRight="10dp"        androID:textcolor="@color/text_color"        androID:textSize="16sp" />    </relativeLayout>  </FrameLayout>  <VIEw    androID:ID="@+ID/line"    androID:layout_wIDth="fill_parent"    androID:layout_height="1px"    androID:background="@color/line_color" /></linearLayout>

接下来是最重要的数据显示了，自定义一个GrIDVIEwAdapter继承

public class GrIDVIEwAdapter extends BaseAdapter {  private LayoutInflater inflater;  private Context context;  private List<Map<String,Object>> List = new ArrayList<Map<String,Object>>();  public GrIDVIEwAdapter(Context context,List<Map<String,Object>> List) {    super();    this.context = context;    this.List = List;    inflater = LayoutInflater.from(context);  }  @OverrIDe  public int getCount() {    return List.size();  }  @OverrIDe  public Object getItem(int position) {    return List.get(position);  }  @OverrIDe  public long getItemID(int position) {    return position;  }  @OverrIDe  public VIEw getVIEw(int position,VIEw convertVIEw,VIEwGroup arg2) {    VIEwholder vIEwholder = null;    if (convertVIEw == null) {      convertVIEw = inflater.inflate(R.layout.grIDvIEw_item,null);      vIEwholder = new VIEwholder(convertVIEw);      convertVIEw.setTag(vIEwholder);    } else {      vIEwholder = (VIEwholder) convertVIEw.getTag();    }    vIEwholder.update(List.get(position),position);    return convertVIEw;  }  public class VIEwholder {    private ImageVIEw imageVIEw;    private TextVIEw textVIEw;    private FrameLayout layout;    private VIEw vIEw;    public VIEwholder(VIEw convertVIEw) {      imageVIEw=(ImageVIEw) convertVIEw.findVIEwByID(R.ID.imageVIEw);      textVIEw=(TextVIEw) convertVIEw.findVIEwByID(R.ID.textVIEw);      layout=(FrameLayout) convertVIEw.findVIEwByID(R.ID.layout);      vIEw=convertVIEw.findVIEwByID(R.ID.line);    }    public voID update(Map<String,Object> map,int position) {      textVIEw.setText(map.get("name").toString());      int i=0;      i=position%3;      switch (i) {      case 0:        //每列第一个item不包括分割线的layout右内边距20        layout.setpadding(0,20,0);        break;      case 1:        //每列第二个item不包括分割线的layout左、右内边距各10        layout.setpadding(10,10,0);        break;      case 2:        //每列第三个item不包括分割线的layout左内边距20；必须使三个item的宽度一致        layout.setpadding(20,0);        break;      default:        break;      }      String ID=map.get("ID").toString();      setimage(ID,imageVIEw);      setline(position,vIEw);    }  }  private voID setimage(String ID,ImageVIEw imageVIEw){    if(ID.equals("1")){      imageVIEw.setimageResource(R.drawable.img1);    }else if(ID.equals("2")){      imageVIEw.setimageResource(R.drawable.img2);    }else if(ID.equals("3")){      imageVIEw.setimageResource(R.drawable.img3);    }else if(ID.equals("4")){      imageVIEw.setimageResource(R.drawable.img4);    }else if(ID.equals("5")){      imageVIEw.setimageResource(R.drawable.img5);    }  }  private voID setline(int position,VIEw vIEw){    int i=0;    i=List.size()%3;    if(position+i+1>List.size()){      //最后一行分割线隐藏      vIEw.setVisibility(VIEw.GONE);    }  }

总结

以上是内存溢出为你收集整理的Android App中的GridView网格布局使用指南全部内容，希望文章能够帮你解决Android App中的GridView网格布局使用指南所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。