Android实现双层ViewPager嵌套

时间:2021-05-19

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章