三行程式碼實現 TabLayout+ViewPager 的 Tab 滑動效果，從封裝到開源
作者 | ithuangqing
宣告 | 本文是 ithuangqing 原創，已獲授權釋出，未經原作者允許請勿轉載
前言
在學習 TabLayout 的時候為了加深自己的記憶，將 TabLayout 和ViewPager 進行了一些簡單的封裝，可以更加快捷的生成我們想要的滑動頁面，對於新手拿來練手還是不錯的，由於技術水平有限，大神勿噴！
實現流程
下面我們來具體說一下實現流程，首先我們使用 TabLayout 的時候要在我們的專案中新增依賴，需要在 app 的 gradle 中新增依賴：
compile 'com.android.support:design:24.2.0'
首先我們建立主佈局，一個 TabLayout 和一個 ViewPager
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:background="@color/colorPrimary"
app:tabGravity
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@android:color/white"
android:id="@+id/mTabLayout"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
然後我們建立對應的 fragment 並且為其添加布局
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.layout1,null);
}
}
我這裡為了演示只建立兩個 fragment。接下來我們實現tablayout+viewpager 實現滑動選項的滑動邏輯，如下程式碼。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout)findViewById(R.id.mTabLayout);
mViewPager = (ViewPager)findViewById(R.id.mViewPager);
mTitle = new ArrayList<>();
mTitle.add("首頁");
mTitle.add("中心");
mFragment = new ArrayList<>();
mFragment.add(new Fragment1());
mFragment.add(new Fragment2());
/**
* 預載入
*/
mViewPager.setOffscreenPageLimit(mFragment.size());
/**
* 設定介面卡
*/
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragment.get(position);
}
@Override
public int getCount() {
return mFragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitle.get(position);
}
});
mTabLayout.setupWithViewPager(mViewPager);
}
}
如果你學習過 TabLayout，相信這些程式碼你一定可以看懂，以上程式碼中viewpager 設定介面卡是使用 Tablayout 的核心程式碼。在我看來，TabLayout+ViewPager 實現 Tab 滑動就是使用 ViewPager 設定adapter 填充 fragment，然後將 TabLayout 和 ViewPager 關聯即可，我們接下來主要講如何實現 TabLayout 和 ViewPager 的封裝，目的就是讓你在建立了最基本的佈局和 Fragment 之後可以很輕鬆的通過三行程式碼就能實現一個滑動 Tab。
首先我們對部分程式碼進行封裝，我們分三步封裝，第一步封裝如下最主要程式碼，也是使用使用 Tablayout 的核心程式碼。
/**
* 設定介面卡
*/
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragment.get(position);
}
@Override
public int getCount() {
return mFragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitle.get(position);
}
});
mTabLayout.setupWithViewPager(mViewPager);
}
這部分程式碼是核心，主要是給 ViewPager 設定介面卡並且實現與TabLayout 的關聯，我們首先建立一個工具類 ItHqAddTab。
public class ItHqAddTab {
public static void addTab(TabLayout tabLayout, ViewPager viewPager, final List<Fragment> fragment, final List<String> title, FragmentManager fragmentManager){
/**
* 預載入
*/
viewPager.setOffscreenPageLimit(fragment.size());
viewPager.setAdapter(new FragmentPagerAdapter(fragmentManager) {
@Override
public Fragment getItem(int position) {
return fragment.get(position);
}
@Override
public int getCount() {
return fragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return title.get(position);
}
});
// TabLayout關聯ViewPager
tabLayout.setupWithViewPager(viewPager);
}
}
封裝邏輯如上圖，我們建立了一個公開的 addTab，裡面傳入五個引數，我們尤其要注意最後一個引數。對封裝好如上程式碼時，我們可以直接使用一行程式碼代替複雜的邏輯。
ItHqAddTab.addTab(mTabLayout,mViewPager,mFragment,mTitle,getSupportFragmentManager());
當然我們封裝程式碼就是為了以後更好的使用，像如下程式碼我們也覺得繁瑣，所以我們再對如下程式碼進行簡單的封裝。
mTitle = new ArrayList<>();
mTitle.add("首頁");
mTitle.add("中心");
mFragment = new ArrayList<>();
mFragment.add(new Fragment1());
mFragment.add(new Fragment2());
我們再建立一個 ItHqAddTitle 工具類，如下.
public class ItHqAddTitle {
public static List<String> addTitle(String ... a){
String[] title = a;
List<String> list = Arrays.asList(title);
return list;
}
}
在封裝這個類的時候遇到的一個主要的問題就是，當你去建立 tab 的頁面名稱時使用的時 string，但是我們這裡需要的是List，這就需要將我們得到的 string 轉換成 List，另外一點因為我們不確定你想要建立多少個 title，所以我們傳入的引數定義為（String ... a）的形式，這樣你就可以隨意的傳參了（個數）。
同理對於新增 Fragment 的封裝大抵相同，這裡貼出程式碼.
public class ItHqAddFragment {
public static List<Fragment> addFragment(Fragment ... fragments){
Fragment[] m = fragments;
List<Fragment> fragmentList = Arrays.asList(m);
return fragmentList;
}
}
如此一來，我們就將主要的一些方法都單獨封裝成了一個工具類。
這樣我們就可以通過三行程式碼來輕鬆實現 tab 的滑動了。
mTile = ItHqAddTile.addTile("首頁","中心");
mFragment = ItHqAddFragment.addFragment(new Fragment(),new Fragment2());
ItHqAddTab.addTab(mTabLayout,mViewPager,mFragment,mTile,getSupportFragmentManager())
製作自己的開源庫
完成以上功能，我們就可以輕鬆的實現tab滑動選項，這麼好的事我們應該和別人一起分享，因此我們可以將專案製作成開源庫開源出去！
首先在專案的基礎上我們新建一個Module,然後選擇Library.
然後開啟剛建立的Library，將之前封裝成的三個類全部複製到裡面.
這裡面需要注意，我們同時需要在新建的Library中的build.gradle中新增TabLayout的依賴，不然會報錯。
完成以上步驟我們就開始開源之旅吧，我們利用jitpack將專案開源到github，第一步我們將專案整體上傳到GitHub。
然後新增一個release.
然後複製我們這個倉庫的地址，比如我的https://github.com/ithuangqing/ItHqSimpleTabLyout然後開啟jitpack，將倉庫連結複製進去，點選look up，點選git it.
然後我們會得到如下依賴程式碼.
將 maven { url 'https://www.jitpack.io' }和 compile 'com.github.ithuangqing:ItHqSimpleTabLyout:v1.3'
依賴到我們的專案中就可以使用這個庫了
解下來我們看看如何使用，首先新建專案，將 maven { url 'https://www.jitpack.io' } 和 compile 'com.github.ithuangqing:ItHqSimpleTabLyout:v1.3' 依賴到我們的專案中
點選同步，依賴完成，然後我們建立簡單的佈局和 fragment，就可以三行程式碼實現通過 TabLayout 和 ViewPager 實現 tab 滑動選項了~！
總結
以上就是對 TabLayot 和 ViewPager 的一些簡單封裝以及如何製作一個自己的開源庫，本身技術點並不難，只是涉及封裝和製作開源庫，對於新手還是能得到點乾貨的。
專案GitHub地址
https://github.com/ithuangqing/ItHqSimpleTabLyout
由於本人目前在校，入門安卓不久，技術水平有限，如果這篇文章能幫到你，我很高興，如果我說的有錯誤之處，還請大神賜教，謝謝！
與之相關