Android实现双层ViewPager嵌套

作者:不吃土豆 时间:2021-12-23 02:35:52 

1. 需求描述

有这样一个需求,用ViewPager实现图片滑动,其下方有一个tab,每一个tab的标签对应一组图片,在ViewPager中的图片切换到下一组时,tab的标签也要随之切换。

2. 解决思路

看到上面的需求我首先想到使用两层ViewPager实现,每组图片使用一个ViewPager,最外层再使用一个ViewPager + TabLayout实现联动切换,在内层的ViewPager做好事件拦截即可。

然而按照这样的思路做出来后发现快速滑动时总会跳过内层的ViewPager。后来一想直接使用一个ViewPager,当当前组的图片展示完后手动将TabLayout的标签切换到下一个不就好了。按照这样的思路,完美实现需求。并将代码封装,供有需要的同学直接拿来使用。源码地址:https://github.com/talonerain/db-viewpager-image

3. 效果展示

apk下载地址 https://github.com/talonerain/db-viewpager-image/blob/master/demo/demo-release.apk

Android实现双层ViewPager嵌套 

4. 使用方法

1. 在project的gradle中添加:


allprojects {
repositories {
maven { url 'https://www.jitpack.io' }
}
}

2. 在moudle的gradle中添加:


compile 'com.github.talonerain:db-viewpager-image:v1.0.0'

3. 在xml布局文件中引入:


<com.lsy.view.DbVPager
 android:id="@+id/db_vpager"
 android:layout_width="match_parent"
 android:layout_height="400dp" />

4. 设置tab位置(在图片上方还是下方)


db_vpager.setBarPosition(DbVPager.BarPositon.BOTTOM);

5. 设置图片数据源及分组名称


List<String> imgList1 = new ArrayList<>();
imgList1.add(url1);
imgList1.add(url2);
ImgGroups group1 = new ImgGroups(groupName1, imgList1);

List<String> imgList2 = new ArrayList<>();
imgList2.add(url3);
imgList2.add(url4);
ImgGroups group2 = new ImgGroups(groupName2, imgList2);

List<ImgGroups> data = new ArrayList<>();
data.add(group1);
data.add(group2);

db_vpager.setSource(data);

6. 切换回调

会回调当前TabLayout标签的位置和显示文字。


db_vpager.addTabChangeListenr(new DbVPager.DbCallbackListener() {
  @Override
  public void callback(int index, String text) {
   tv_showText.setText("当前分类:" + text);
  }
 });

7. 显示控件


db_vpager.show();

5. 代码解析

1. 控件布局


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">

<android.support.design.widget.TabLayout
 android:id="@+id/tab1"
 android:layout_width="match_parent"
 android:layout_height="35dp"
 app:tabMode="fixed"
 app:tabGravity="fill"
 android:layout_alignParentTop="true"/>

<android.support.design.widget.TabLayout
 android:id="@+id/tab2"
 android:layout_width="match_parent"
 android:layout_height="35dp"
 app:tabMode="fixed"
 app:tabGravity="fill"
 android:layout_alignParentBottom="true"/>

<android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
 android:layout_above="@+id/tab2"
 android:layout_below="@+id/tab1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>

</RelativeLayout>

因为tab的位置可能在上也可能在下,所以我在上下各放置了一个TabLayout,根据设置显示哪个,通过下面代码获取tab,不必在逻辑代码中关心显示的是哪个。


private TabLayout getTab() {
 return tab1.getVisibility() == VISIBLE ? tab1 : tab2;

2. 数据解析

在使用方法的第5步可以看到,控件的数据源是这样的一个list:


List<ImgGroups> mDataSource;

ImgGroups类型:


public class ImgGroups {
public String groupName; //要显示的图片分组名称
public List<String> imgList; //图片数组

public ImgGroups(String name, List<String> imgList) {
 this.groupName = name;
 this.imgList = imgList;
}
}

对于数据源我们需要解析成两部分,一部分是所有的图片的list,用来显示在ViewPager上,这个list是不关心分类的,另一部分是需要切换tab的位置,即当图片滑到哪个位置时,tab需要切换标签,我们称为index数组。代码如下:


private void initData() {
 indexList = new int[mDataSource.size()]; //index数组
 imgList = new ArrayList<>(); //图片list
 Iterator<ImgGroups> iterator = mDataSource.iterator();
 int i = 0;
 while (iterator.hasNext()) {
  //遍历数据源list
  ImgGroups item = iterator.next();
  TabLayout.Tab tab = getTab().newTab(); //每组图片对应一个tab
  if (null != item && null != item.imgList && item.imgList.size() > 0) {
   //当前组图片滑动完时即需要切换tab的位置
   if (i > 0) {
    int temp = indexList[i - 1];
    indexList[i++] = temp + item.imgList.size();
   } else {
    indexList[i++] = item.imgList.size();
   }
   String text = TextUtils.isEmpty(item.groupName) ? "null" : item.groupName;

tab.setText(text); //设置当前tab文本
   getTab().addTab(tab);

imgList.addAll(item.imgList);
  }
 }
}

3. ViewPager代码

在ViewPager中我们需要判断在滑动到哪个图片时需要切换tab标签,要得到这个位置,还需要判断ViewPager的滑动方向,因为左滑和右滑时目标位置是不同的,具体区别是当左滑时当前图片是该组的最后一张时切换tab,当右滑时当前图片是该组的第一张时切换tab。这部分代码不大好描述,大家可以自己分析下:


viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  }

@Override
  public void onPageSelected(int position) {
   if (vpPosition > position) {
    isToLeft = true; //左滑
   } else if(vpPosition<position) {
    isToLeft = false; //右滑
   }
   vpPosition = position;

if (!tabScrolling) {
    if (isToLeft) {
     int index = Arrays.binarySearch(indexList, position + 1);
     if (index >= 0) {
      TabLayout.Tab tab = getTab().getTabAt(index);
      if (tab != null) {
       if (mListener != null) {
        mListener.callback(tab.getPosition(), tab.getText().toString());
       }
       vpScrolling = true; //阻止TabLayout切换时切换ViewPager的代码
       tab.select();
       vpScrolling = false;
      }
     }
    } else {
     int index = Arrays.binarySearch(indexList, position);
     if (index >= 0) {
      TabLayout.Tab tab = getTab().getTabAt(index + 1);
      if (tab != null) {
       if (mListener != null) {
        mListener.callback(tab.getPosition(), tab.getText().toString());
       }
       vpScrolling = true;
       tab.select();
       vpScrolling = false;
      }
     }
    }
   }
   vpScrolling = false;
  }
  @Override
  public void onPageScrollStateChanged(int state) {

}
 });

4. TabLayout代码

在TabLayout中我们需要确定当切换标签时ViewPager显示该组的第一张图片,代码如下:


getTab().addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
   if (mListener != null) {
    mListener.callback(tab.getPosition(), tab.getText().toString());
   }
   if (!vpScrolling) {
    int index = tab.getPosition();
    int pos;
    if (index == 0) {
     pos = 0;
    } else {
     //获取前面图片数量即目的position
     pos = indexList[tab.getPosition() - 1];
    }
    tabScrolling = true; //阻止ViewPager滑动时切换tab的代码
    viewPager.setCurrentItem(pos);
    tabScrolling = false;
   }
  }

@Override
  public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
  public void onTabReselected(TabLayout.Tab tab) {

}
 });

5. 容错处理

上面代码中会发现有两个标记变量,vpScrolling和tabScrolling,这两个是做什么的呢?如果只是单独地设置ViewPager和TabLayout你会发现一个问题,就是在ViewPager中设置TabLayout切换标签时,TabLayout中的代码反过来又会使ViewPager滑动,造成显示不准,同理在TabLayout中滑动ViewPager也一样,为此我们设置两个标记变量,保证TabLayout和ViewPager其中一个切换时不影响到另一个。

来源:https://juejin.im/post/5acac051f265da23a3358384

标签:viewpager,双层,嵌套
0
投稿

猜你喜欢

  • jvm crash的崩溃日志详细分析及注意点

    2022-12-18 07:49:00
  • C# DES加密算法中向量的作用详细解析

    2022-07-13 07:49:48
  • c#如何用好垃圾回收机制GC

    2023-03-21 08:48:22
  • SpringBoot Security前后端分离登录验证的实现

    2023-03-09 10:30:07
  • springmvc之获取参数的方法(必看)

    2023-12-20 09:25:59
  • IntelliJ IDEA 2021.1 推出语音、视频功能,边写代码边聊天(功能超级强大)

    2023-09-13 23:30:37
  • 全面分析Java文件上传

    2021-12-09 13:22:52
  • Java线程同步、同步方法实例详解

    2023-10-16 07:10:53
  • android中NFC读写功能的实现方法

    2023-10-19 12:30:07
  • intellij idea创建第一个动态web项目的步骤方法

    2023-04-16 15:47:20
  • Android中通过样式来去除app的头及界面全屏(备忘)的实现方法

    2023-07-30 00:03:23
  • 基于Android XML解析与保存的实现

    2023-05-25 18:54:32
  • java实现在性能测试中进行业务验证实例

    2022-10-15 09:50:11
  • android实现文件下载功能

    2022-07-29 18:03:10
  • redis实现队列的阻塞、延时、发布和订阅

    2021-07-02 10:56:19
  • Java实现简单的扫雷小程序

    2022-11-18 02:14:07
  • Spring ApplicationListener源码解析

    2021-08-10 08:11:12
  • IDEA SpringBoot项目配置热更新的步骤详解(无需每次手动重启服务器)

    2023-11-12 00:22:41
  • Java套接字(Socket)网络编程入门

    2022-09-22 16:19:56
  • C#处理猜拳问题的简单实例(非窗体)

    2021-08-01 18:58:22
  • asp之家 软件编程 m.aspxhome.com