这篇文章主要介绍如何使用Android实现双层ViewPager嵌套，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都企业网站建设,高端网页制作,对成都石凉亭等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业营销推广优化,H5建站,响应式网站。
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
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布局文件中引入：
4. 设置tab位置(在图片上方还是下方)
db_vpager.setBarPosition(DbVPager.BarPositon.BOTTOM);
5. 设置图片数据源及分组名称
List imgList1 = new ArrayList<>();
imgList1.add(url1);
imgList1.add(url2);
ImgGroups group1 = new ImgGroups(groupName1, imgList1);
List imgList2 = new ArrayList<>();
imgList2.add(url3);
imgList2.add(url4);
ImgGroups group2 = new ImgGroups(groupName2, imgList2);
List 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. 控件布局
因为tab的位置可能在上也可能在下，所以我在上下各放置了一个TabLayout，根据设置显示哪个，通过下面代码获取tab，不必在逻辑代码中关心显示的是哪个。
private TabLayout getTab() {
return tab1.getVisibility() == VISIBLE ? tab1 : tab2;2. 数据解析
在使用方法的第5步可以看到，控件的数据源是这样的一个list：
List mDataSource;
ImgGroups类型：
public class ImgGroups {
public String groupName; //要显示的图片分组名称
public List imgList; //图片数组
public ImgGroups(String name, List 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 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= 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其中一个切换时不影响到另一个。
以上是“如何使用Android实现双层ViewPager嵌套”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文名称：如何使用Android实现双层ViewPager嵌套
浏览地址：
http://cdxtjz.cn/article/pjcjhe.html
