Android實現雙層ViewPager嵌套

1. 需求描述

有這樣一個需求，用ViewPager實現圖片滑動，其下方有一個tab，每個tab的標籤對應一組圖片，在ViewPager中的圖片切換到下一組時，tab的標籤也要隨之切換。

2. 解決思路

看到上面的需求我首先想到使用兩層ViewPager實現，每組圖片使用一個ViewPager，最外層再使用一個ViewPager + TabLayout實現聯動切換，在內層的ViewPager作好事件攔截便可。
然而按照這樣的思路作出來後發現快速滑動時總會跳過內層的ViewPager。後來一想直接使用一個ViewPager，噹噹前組的圖片展現完後手動將TabLayout的標籤切換到下一個不就行了。按照這樣的思路，完美實現需求。並將代碼封裝，供有須要的同窗直接拿來使用。源碼地址：
github.com/talonerain/…

3. 效果展現

apk下載地址 github.com/talonerain/…

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其中一個切換時不影響到另外一個。