Android实现双层ViewPager嵌套

时间 2019-11-24

标签 android 实现双层 viewpager 嵌套栏目 Android 繁體版

原文原文链接

1. 需求描述

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

2. 解决思路

看到上面的需求我首先想到使用两层ViewPager实现，每组图片使用一个ViewPager，最外层再使用一个ViewPager + TabLayout实现联动切换，在内层的ViewPager作好事件拦截便可。
然而按照这样的思路作出来后发现快速滑动时总会跳过内层的ViewPager。后来一想直接使用一个ViewPager，当当前组的图片展现完后手动将TabLayout的标签切换到下一个不就行了。按照这样的思路，完美实现需求。并将代码封装，供有须要的同窗直接拿来使用。源码地址：
github.com/talonerain/…java

3. 效果展现

apk下载地址 github.com/talonerain/…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标签的位置和显示文字。git

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，没必要在逻辑代码中关心显示的是哪一个。github

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

2. 数据解析

在使用方法的第5步能够看到，控件的数据源是这样的一个list：数组

List<ImgGroups> mDataSource;
复制代码

ImgGroups类型：bash

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数组。代码以下：app

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。这部分代码不大好描述，你们能够本身分析下：maven

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显示该组的第一张图片，代码以下：ide

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