Android App中的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);
    }
  }