欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-04 11:56:53
零、常用属性 首先我们来看看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, 0, 0, 0, brightness, 0, 1, 0, 0,
        brightness, 0, 0, 1, 0, brightness, 0, 0, 0, 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(), cellview.gettop() + 1, paint)
      }

      //左边线
      canvas.drawline(cellview.getleft() + 1, cellview.gettop(), cellview.getleft() + 1, cellview.getbottom(), paint)

      if ((i + 1) % column == 0)   //最右边一列单元格画上右边线
      {
        canvas.drawline(cellview.getright(), cellview.gettop() + 1, cellview.getright(), cellview.getbottom() + 1, paint)
      }
      if ((i + column) >= childcount) //最后column个单元格画上底边线
      {
        canvas.drawline(cellview.getleft(), cellview.getbottom() + 1, cellview.getright(), cellview.getbottom() + 1, paint)
      }
      if (childcount % column != 0 && i == childcount - 1)  //如果最后一个单元格不在最右一列,单独为它画上右边线
      {
        canvas.drawline(cellview.getright() + 1, cellview.gettop() + 1, cellview.getright() + 1, cellview.getbottom() + 1, paint)
        canvas.drawline(cellview.getright()+1, cellview.getbottom() + 1, cellview.getleft(), cellview.getbottom() + 1, 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, 0, 20, 0);
        break;
      case 1:
        //每列第二个item不包括分割线的layout左、右内边距各10
        layout.setpadding(10, 0, 10, 0);
        break;
      case 2:
        //每列第三个item不包括分割线的layout左内边距20;必须使三个item的宽度一致
        layout.setpadding(20, 0, 0, 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);
    }
  }