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

前端技术 2023/09/02 Android

零、常用属性
首先我们来看看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);
    }
  }

本文地址：https://www.stayed.cn/item/3846

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案