Android App中的GridView網(wǎng)格布局使用指南

更新時(shí)間：2016年06月08日 17:10:49 作者：天涯斷腸人

GridView布局所實(shí)現(xiàn)的就是類(lèi)似于九宮格的矩陣界面效果,下面整理了Android App中的GridView網(wǎng)格布局使用指南,包括分割線(xiàn)的添加與自定義GridView的實(shí)現(xiàn)等技巧,需要的朋友可以參考下

零、常用屬性
首先我們來(lái)看看GridView的一些常用的屬性吧

1.android:numColumns=”auto_fit” //GridView的列數(shù)設(shè)置為自動(dòng)
2.android:columnWidth=”90dp ” //每列的寬度，也就是Item的寬度
3.android:stretchMode=”columnWidth”//縮放與列寬大小同步
4.android:verticalSpacing=”10dp” //兩行之間的邊距
5.android:horizontalSpacing=”10dp” //兩列之間的邊距
6.android:cacheColorHint=”#00000000” //去除拖動(dòng)時(shí)默認(rèn)的黑色背景
7.android:listSelector=”#00000000” //去除選中時(shí)的黃色底色
8.android:scrollbars=”none” //隱藏GridView的滾動(dòng)條
9.android:fadeScrollbars=”true” //設(shè)置為true就可以實(shí)現(xiàn)滾動(dòng)條的自動(dòng)隱藏和顯示
10.android:fastScrollEnabled=”true” //GridView出現(xiàn)快速滾動(dòng)的按鈕(至少滾動(dòng)4頁(yè)才會(huì)顯示)
11.android:fadingEdge=”none” //GridView衰落(褪去)邊緣顏色為空，缺省值是vertical。(可以理解為上下邊緣的提示色)
12.android:fadingEdgeLength=”10dip” //定義的衰落(褪去)邊緣的長(zhǎng)度
13.android:stackFromBottom=”true” //設(shè)置為true時(shí)，你做好的列表就會(huì)顯示你列表的最下面
14.android:transcriptMode=”alwaysScroll” //當(dāng)你動(dòng)態(tài)添加數(shù)據(jù)時(shí)，列表將自動(dòng)往下滾動(dòng)最新的條目可以自動(dòng)滾動(dòng)到可視范圍內(nèi)
15.android:drawSelectorOnTop=”false” //點(diǎn)擊某條記錄不放，顏色會(huì)在記錄的后面成為背景色,內(nèi)容的文字可見(jiàn)(缺省為false)

至于GridView的用法就不多說(shuō)了，和ListView的用法一樣。下面小編給打加分享一下GridView的一些比較特殊的情況吧。

一、GridView按鈕圖片點(diǎn)擊效果

我們先來(lái)看看GridView按鈕圖片的點(diǎn)擊效果吧，不是說(shuō)每一個(gè)item的點(diǎn)擊背景顏色的改變，那個(gè)很簡(jiǎn)單實(shí)現(xiàn)，自定義一個(gè)selector就可以實(shí)現(xiàn)，接下來(lái)小編要說(shuō)的是每一個(gè)item上的imageview的點(diǎn)擊效果….
要想實(shí)現(xiàn)這種功能我們要設(shè)置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.然后我們?cè)谧远xadapter中定義一個(gè)改變按鈕圖片的顏色方法，通過(guò)初始化adapter的時(shí)候，將九宮格的圖片傳過(guò)來(lái)，通過(guò)onTouch事件來(lái)改變顏色值

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.我們還需要定義一個(gè)接口實(shí)現(xiàn)gridview的onItem點(diǎn)擊事件

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);
      }
    });

大體思路和主要代碼都跟大家介紹的很詳細(xì)了，需要的小伙伴可以去下載源碼….

二、GridView九宮格分割線(xiàn)效果實(shí)現(xiàn)(仿支付寶)

最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)仿支付寶九宮格分割線(xiàn)的功能，因?yàn)轫?xiàng)目比較急在網(wǎng)上找了找，發(fā)現(xiàn)都是設(shè)置一些背景來(lái)實(shí)現(xiàn)，閑的時(shí)候想了想，可以自定義一個(gè)GridView來(lái)實(shí)現(xiàn)，下面小編來(lái)分享一下實(shí)現(xiàn)方法

設(shè)置背景來(lái)實(shí)現(xiàn)九宮格分割線(xiàn)效果：

定義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>

給布局設(shè)置這個(gè)背景就可以了，一點(diǎn)小瑕疵就是每一行重疊的線(xiàn)會(huì)比不重疊的粗，不認(rèn)真看看不出來(lái)的，還可以湊合用，但是小編比較追求完美，下面看一下自定義GridView的實(shí)現(xiàn)方法吧。

三、自定義GridView實(shí)現(xiàn)：

思路：

1.通過(guò)反射獲取GridView的列數(shù)

2.獲取GridView的childview

3.根據(jù)childview的情況畫(huà)線(xiàn)

代碼：

@Override
  protected void dispatchDraw(Canvas canvas)
  {
    super.dispatchDraw(canvas)

    int column = 1
    try
    {
      //通過(guò)反射拿到列數(shù)
      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){
        //頂部線(xiàn)，坐標(biāo)+1是為了畫(huà)在cellView上
        canvas.drawLine(cellView.getLeft(), cellView.getTop() + 1, cellView.getRight(), cellView.getTop() + 1, paint)
      }

      //左邊線(xiàn)
      canvas.drawLine(cellView.getLeft() + 1, cellView.getTop(), cellView.getLeft() + 1, cellView.getBottom(), paint)

      if ((i + 1) % column == 0)   //最右邊一列單元格畫(huà)上右邊線(xiàn)
      {
        canvas.drawLine(cellView.getRight(), cellView.getTop() + 1, cellView.getRight(), cellView.getBottom() + 1, paint)
      }
      if ((i + column) >= childCount) //最后column個(gè)單元格畫(huà)上底邊線(xiàn)
      {
        canvas.drawLine(cellView.getLeft(), cellView.getBottom() + 1, cellView.getRight(), cellView.getBottom() + 1, paint)
      }
      if (childCount % column != 0 && i == childCount - 1)  //如果最后一個(gè)單元格不在最右一列，單獨(dú)為它畫(huà)上右邊線(xiàn)
      {
        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)
      }
    }
  }

四、給每行添加上分割線(xiàn)

大概思想就是：既然在GridView里沒(méi)有設(shè)置的方法，那就直接加在item里，在通過(guò)別的方法改變item的顯示效果，從而達(dá)到設(shè)置分割線(xiàn)的方法~廢話(huà)不多說(shuō)~下面詳細(xì)的介紹：首先是GridView的布局，android:numColumns=”3″ 每行三列

<GridView
    android:id="@+id/content"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:numColumns="3" >
</GridView>

接下來(lái)是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>

接下來(lái)是最重要的數(shù)據(jù)顯示了，自定義一個(gè)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:
        //每列第一個(gè)item不包括分割線(xiàn)的layout右內(nèi)邊距20
        layout.setPadding(0, 0, 20, 0);
        break;
      case 1:
        //每列第二個(gè)item不包括分割線(xiàn)的layout左、右內(nèi)邊距各10
        layout.setPadding(10, 0, 10, 0);
        break;
      case 2:
        //每列第三個(gè)item不包括分割線(xiàn)的layout左內(nèi)邊距20；必須使三個(gè)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()){
      //最后一行分割線(xiàn)隱藏
      view.setVisibility(View.GONE);
    }
  }

您可能感興趣的文章: