详解Android使GridView横向水平滚动的实现方式

Android为我们提供了竖直方向的滚动控件GridView,但如果我们想让它水平滚动起来,就需要自己实现了。

以下使用的测试数据datas集合都为List<ResolveInfo>类型,用来存储手机中的所有App

  public static List<ResolveInfo> getAppData(Context context) {
    PackageManager packageManager = context.getPackageManager();
    Intent mainIntent = new Intent(Intent.ACTION_MAIN, null);
    mainIntent.addCategory(Intent.CATEGORY_LAUNCHER);
    return packageManager.queryIntentActivities(mainIntent, 0);
  }

一、单行横向显示

实现思路

  1. 在代码中动态设置GridView的NumColumns,使其等于GridView要显示的数据集合大小。
  2. 动态设置item项宽度,结合数据集合大小来设置GridView的总宽度。
  3. 使用HorizontalScrollView包裹GridView

具体实现

关键代码

  /**
   * 将GridView改成单行横向布局
   */
  private void changeGridView() {
    // item宽度
    int itemWidth = DensityUtil.dip2px(this, 100);
    // item之间的间隔
    int itemPaddingH = DensityUtil.dip2px(this, 1);
    int size = datas.size();
    // 计算GridView宽度
    int gridviewWidth = size * (itemWidth + itemPaddingH);

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        gridviewWidth, LinearLayout.LayoutParams.MATCH_PARENT);
    mContentGv.setLayoutParams(params);
    mContentGv.setColumnWidth(itemWidth);
    mContentGv.setHorizontalSpacing(itemPaddingH);
    mContentGv.setStretchMode(GridView.NO_STRETCH);
    mContentGv.setNumColumns(size);
  }

这里用到的dip2px方法是根据手机的分辨率从 dp 的单位 转成为 px(像素)

  /**
   * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
   * @param context  上下文
   * @param dpValue  dp值
   * @return px值
   */
  public static int dip2px(Context context, float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
  }

在布局文件中,使用HorizontalScrollView包裹GridView

  <HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <GridView
        android:id="@+id/gv_horizontal_gridview_line"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"/>
    </LinearLayout>
  </HorizontalScrollView>

通过以上设置,再加上Adapter适配器就能实现单行横向滚动了,适配器使用常规的实现方式就行,这里就不贴了

二、多行横向分页显示

实现思路

  1. 使用ViewPager实现左右翻页效果。
  2. 根据数据集合大小,计算出要显示的页数,并生成相应数量的GridView。
  3. 在GridView的Adapter适配器中,动态分配GridView需要显示的数据集合。
  4. 使用List保存多个GridView实例并传入ViewPager适配器中,一页ViewPager对应一个GridView实例。

具体实现

数据量很多时,需要进行分页,计算方式

需要页数 = 总数量 ÷ 每页显示数量

有些整除不了的,就需要使用Math.ceil()函数,向上取整

关键代码

  /**
   * 获取系统所有的应用程序,根据每页需要显示的item数量,生成相应数量的GridView页面
   */
  private void initViews(List<ResolveInfo> datas) {
    int dataSize = datas.size();

    // (需要页数 = 总数量 ÷ 每页显示数量)向上取整数
    int PageCount = (int) Math.ceil(dataSize / APP_SIZE);
    mGridViewList = new ArrayList<>();
    for (int i = 0; i <= PageCount; i++) {
      GridView appPage = new GridView(this);
      appPage.setAdapter(new HorizontalGvAdapter(this, datas, i));
      appPage.setNumColumns(4);
      appPage.setVerticalSpacing(1);
      appPage.setHorizontalSpacing(1);
      appPage.setHorizontalScrollBarEnabled(false);
      appPage.setVerticalScrollBarEnabled(false);
      mGridViewList.add(appPage);
    }

    if(dataSize % APP_SIZE == 0){
      mGridViewList.remove(mGridViewList.size()-1);
      PageCount--;
    }

    mGvPagerAdapter = new HorizontalGvPagerAdapter(mGridViewList);
    viewPager.setAdapter(mGvPagerAdapter);
    viewPager.addOnPageChangeListener(new MyPageChangeListener());

    addDot(PageCount);
  }

当总数量 ÷ 每页显示数量刚好被整除时,会出现一页空白页的情况,这个时候需要去掉多出来的那一页

    if(dataSize % APP_SIZE == 0){
      mGridViewList.remove(mGridViewList.size()-1);
      PageCount--;
    }

Adapter在创建初期就要对显示的数据进行控制,因为这里每个GridView都有一个单独的Adapter,所以需要对其显示的datas进行动态计算

通过传入构造方法的数据进行动态计算,可以得出数据开始加载的位置、结束加载的位置

HorizontalGvAdapter的构造方法:

  /**
   * 所有应用数据
   */
  private List<ResolveInfo> mAppDatas = new ArrayList<ResolveInfo>();

  public HorizontalGvAdapter(Context context, List<ResolveInfo> list, int page) {
    this.mContext = context;

    // 开始加载的位置
    int pageStart = page * HorizontalGridViewAct.APP_SIZE;
    // 结束加载的位置
    int pageEnd = pageStart + HorizontalGridViewAct.APP_SIZE;

    while ((pageStart < list.size()) && (pageStart < pageEnd)) {
      mAppDatas.add(list.get(pageStart));
      pageStart++;
    }
  }

如果需要加小圆点的话,可以先在布局中用一个空LinearLayout当小圆点的容器

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#ffffff"
       android:orientation="vertical">
  <android.support.v4.view.ViewPager
    android:id="@+id/vp_horizontal_gridview"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:background="#c5c5c5"
    android:scaleType="fitXY"/>

  <!-- 底部小圆点 -->
  <LinearLayout
    android:id="@+id/ll_dot_container"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#4b4b4b"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:orientation="horizontal"/>
</LinearLayout>

然后在代码中用List<View>来保存创建的小圆点

  // 放圆点的list
  private List<View> dotViewsList;

  /**
   * 创建指定数量的圆点
   * @param dotNumber viewPager的数量
   */
  private void addDot(int dotNumber) {
    if (null == dotViewsList) {
      dotViewsList = new ArrayList<View>();
    }
    LinearLayout dotLayout = (LinearLayout) findViewById(R.id.ll_dot_container);
    for (int i = 0; i <= dotNumber; i++) {
      ImageView dotView = new ImageView(this);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          FrameLayout.LayoutParams.WRAP_CONTENT,
          FrameLayout.LayoutParams.WRAP_CONTENT);

      // 圆点与圆点之间的距离
      params.leftMargin = 10;
      params.rightMargin = 10;

      // 圆点的大小
      params.height = 15;
      params.width = 15;

      dotLayout.addView(dotView, params);
      dotViewsList.add(dotView);
    }
    // 设置圆点默认选中第一个
    setDotShow(0);
  }
动态添加完小圆点后,就可以设置它们的选中状态了,这里只需要更改对应小圆点的图片显示就行

  /**
   * 显示底部圆点导航
   * @param position 选中哪个圆点
   */
  private void setDotShow(int position){
    if (dotViewsList == null){
      return;
    }
    for (int i = 0; i < dotViewsList.size(); i++) {
      if (i == position) {
        dotViewsList.get(position).setBackgroundResource(R.drawable.ic_dot_on);
      } else {
        dotViewsList.get(i).setBackgroundResource(R.drawable.ic_dot_off);
      }
    }
  }

三、总结

以上就是让GridView横向滚动的实现方式,其实我们完全可以不必这么麻烦,Google在support-v7包中为我们提供了RecyclerView控件,切换横向和竖直滚动只需要让布局管理器使用setOrientation方法设置一下就好,非常便捷,如果项目允许,建议使用RecyclerView来实现此类需求。

希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用RecyclerView实现水平滚动控件

    前言 相信大家都知道Android滚动控件的实现方式有很多, 使用RecyclerView也比较简单. 做了一个简单的年龄滚动控件, 让我们来看看RecyclerView的使用方式, 主要有以下几点: (1) 对齐控件中心位置. (2) 计算滚动距离. (3) 高亮中心视图. (4) 实时显示中心数据. (5) 停止时自动对齐. (6) 滚动时, 设置按钮状态开关. 效果 1. 框架 主要关注RecyclerView部分逻辑. /** * 初始化年龄滑动条 */ private void ini

  • Android自定义ViewGroup实现标签流容器FlowLayout

    本篇文章讲的是Android 自定义ViewGroup之实现标签流式布局-FlowLayout,开发中我们会经常需要实现类似于热门标签等自动换行的流式布局的功能,网上也有很多这样的FlowLayout,但不影响我对其的学习.和往常一样,主要还是想总结一下自定义ViewGroup的开发过程以及一些需要注意的地方. 按照惯例,我们先来看看效果图 一.写代码之前,有几个是问题是我们先要弄清楚的: 1.什么是ViewGroup:从名字上来看,它可以被翻译为控件组,言外之意是ViewGroup内部包含了许

  • Android使用Recyclerview实现图片水平自动循环滚动效果

    简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图:  思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Interge.MAXVALUE)item,第n个item显示第n%m张图片 3.使用recyclerview.scrollBy  每个一段时间水平滚动一段距离 4.通过layoutManager.findFirstVisibleItemPosition()获取当前显示的第一个View是第几个item,上面

  • Android开发实现自定义水平滚动的容器示例

    本文实例讲述了Android开发实现自定义水平滚动的容器.分享给大家供大家参考,具体如下: public class HorizontalScrollView extends ViewGroup { //手势 private GestureDetector mGestureDetector; private HorizontalScroller mScroller; private int curID; //快速滑动 private boolean isFlying; //--回调函数-----

  • Android实现Activity水平和垂直滚动条的方法

    本文实例讲述了Android实现Activity水平和垂直滚动条的方法.分享给大家供大家参考,具体如下: <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="

  • Android中标签容器控件的实例详解

    前言 在一些APP中我们可以看到一些存放标签的容器控件,和我们平时使用的一些布局方式有些不同,它们一般都可以自动适应屏幕的宽度进行布局,根据对自定义控件的一些理解,今天写一个简单的标签容器控件,给大家参考学习. 下面这个是我在手机上截取的一个实例,是在MIUI8系统上截取的 这个是我实现的效果图 原理介绍 根据对整个控件的效果分析,大致可以将控件分别从以下这几个角度进行分析: 1.首先涉及到自定义的ViewGroup,因为现有的控件没法满足我们的布局效果,就涉及到要重写onMeasure和onL

  • 从源码解析Android中View的容器ViewGroup

    这回我们是深入到ViewGroup内部\,了解ViewGroup的工作,同时会阐述更多有关于View的相关知识.以便为以后能灵活的使用自定义空间打更近一步的基础.希望有志同道合的朋友一起来探讨,深入Android内部,深入理解Android. 一.ViewGroup是什么?        一个ViewGroup是一个可以包含子View的容器,是布局文件和View容器的基类.在这个类里定义了ViewGroup.LayoutParams类,这个类是布局参数的子类. 其实ViewGroup也就是Vie

  • Android中实现多行、水平滚动的分页的Gridview实例源码

    功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现. (2)水平滚动翻页,下面有显示当前页的icon. 1.实现自定义的HorizontalScrollView(HorizontalScrollView.java): 因为要翻页时需要传当前页给调用者,所以fling函数中自己

  • Android应用开发中自定义ViewGroup视图容器的教程

    一.概述 在写代码之前,我必须得问几个问题: 1.ViewGroup的职责是啥? ViewGroup相当于一个放置View的容器,并且我们在写布局xml的时候,会告诉容器(凡是以layout为开头的属性,都是为用于告诉容器的),我们的宽度(layout_width).高度(layout_height).对齐方式(layout_gravity)等:当然还有margin等:于是乎,ViewGroup的职能为:给childView计算出建议的宽和高和测量模式 :决定childView的位置:为什么只是

  • android listview 水平滚动和垂直滚动的小例子

    网上有很多解决 android listview 水平和垂直滚动的代码,我没有按照他们说的做(以前没搜到 O(∩_∩)O~) 我采用的是添加HorizontalScrollViewJava代码 复制代码 代码如下: < ScrollView android:id="@+id/ScrollView01" android:layout_height="300px" android:layout_x="16px" android:layout_y

  • Android自定义控件之继承ViewGroup创建新容器

    欢迎大家来学习本节内容,前几节我们已经学习了其他几种自定义控件,分别是Andriod 自定义控件之音频条及 Andriod 自定义控件之创建可以复用的组合控件还没有学习的同学请先去学习下,因为本节将使用到上几节所讲述的内容. 在学习新内容之前,我们先来弄清楚两个问题: 1 . 什么是ViewGroup? ViewGroup是一种容器.它包含零个或以上的View及子View. 2 . ViewGroup有什么作用? ViewGroup内部可以用来存放多个View控件,并且根据自身的测量模式,来测量

随机推荐