Android实现双层ViewPager嵌套

2019-10-22 18:13:05

字体：大中小

来源：转载

供稿：网友

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

viewpager,双层嵌套,嵌套,Android

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其中一个切换时不影响到另一个。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VEVB武林网。

注：相关教程知识阅读请移步到Android开发频道。

上一篇：Android自定义View实现仿网易音乐唱片播放效果

下一篇：Mac下完全卸载干净Android Studio的方法