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