登录
当前位置： 首页 > 编程笔记 >

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

赵驰
2023-03-14
本文向大家介绍Android App中的GridView网格布局使用指南，包括了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);
    }
  }
 类似资料：
  • Android网格布局GridView学习使用

    本文向大家介绍Android网格布局GridView学习使用，包括了Android网格布局GridView学习使用的使用技巧和注意事项，需要的朋友参考一下  应用开发的时候，有时我们需要将一些图片进行预览，例如：相片管理的应用。这个时候用ListView的话就显得不是太合适了，因为ListView的展现形式毕竟不适合这种预览要求，那么通过什么视图组件可 以实现呢？这里就可以使用GridView，a

  • Android网格布局GridView实现漂亮的多选效果

    本文向大家介绍Android网格布局GridView实现漂亮的多选效果，包括了Android网格布局GridView实现漂亮的多选效果的使用技巧和注意事项，需要的朋友参考一下 上一篇文章中主要讲了GridView的简单应用，以网格的形式展示了一些图片，对于图片也有点击监听操作。但是，如果我们在浏览图片的时候需要一些选中操作、甚至是多选操作的时候。这样的功能我们又该如何实现呢？ 可以使用Action

  • Android网格视图GridView的使用

    本文向大家介绍Android网格视图GridView的使用，包括了Android网格视图GridView的使用的使用技巧和注意事项，需要的朋友参考一下 GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，图片等内容，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。 网格视图GridView的排列方式与矩阵类似，当屏幕上有很多元素（文字、

  • 使网格布局更紧凑

    我试图通过GridBagLayout实现以下目标： 框架将接收一组“字段”（JLabel，JTextField对），我想以“网格状”的方式排列它们，其中一行将包含两个这样的对（JLabel1 JField1 JLabel2 JField2）。当一行包含这四个组件时，下一个组件将添加到另一行。 编辑：我希望组件从面板顶部开始 我的代码生成以下布局。我希望组件的布局更紧凑（尤其是垂直距离） 下面是代码

  • 在CSS网格布局中使用CSS过渡

    问题内容： 我正在尝试让我的粘性标头具有过渡效果，因此它不仅易于移动，而且易于释放。 我究竟做错了什么？ 基本上，以下代码将tiny类添加到我的包装器类中，这很好。 这是CSS部分： 所以标题确实会收缩，但是没有动画，我是否错过了某些东西，或者转换根本不适用于网格？ 这是css-grid文档的链接。 问题答案： 根据规范，过渡应该在和上进行。 7.2。 明确的轨道尺寸：和 属性 可动画的： 作为长

  • 2.2.5 GridLayout(网格布局)

    主要内容：本节引言,1.相关属性总结图,2.使用实例:计算器布局的实现:,3.用法归纳:,4.使用GridLayout要注意的地方:,5.低版本sdk如何使用GridLayout:,本节小结本节引言 今天要介绍的布局是Android 4.0以后引入的一个新的布局,和前面所学的TableLayout(表格布局) 有点类似,不过他有很多前者没有的东西,也更加好用, 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于某行某列 可以设置组件横跨几行或者几列 另外,

相关阅读

使用Flexbox网格的Bootstrap 4砌体布局CSS网格布局中的等高行网格区域在CSS网格中的布局不正确边框和网格布局Android中使用GridView进行应用程序UI布局的教程

相关文章

JavaFX TitledPane布局JavaFX ScrollPane布局JavaFX GridPane布局JavaFX BorderPane布局JavaFX FlowPane布局

相关问答

选项卡内的网格布局React Native：如何使用FlexBox创建“网格”布局？Android指南：多窗格布局[关闭]使用CSS网格布局跨越所有列/行的项Java摆动网格布局元素在网格Y中重叠

相关工具

局域网发布共享文件仿网易新闻的滑动视图布局仿QQ聊天布局Swipe-to-Select-GridView局域网或蓝牙连接

相关文档

物联网应用开发 IoT Studio 使用指南Rails 风格指南JavaScript 风格指南Ruby 风格指南SDN 网络指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.