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布局文件中引入：
<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其中一個切換時不影響到另一個。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
