【原】三行代碼實(shí)現(xiàn) TabLayout+ViewPager 的 Tab 滑動效果，從封裝到開源

codingSmart 2021-10-22

展開全文

前言

在學(xué)習(xí) TabLayout 的時(shí)候?yàn)榱思由钭约旱挠洃?，?TabLayout 和ViewPager 進(jìn)行了一些簡單的封裝，可以更加快捷的生成我們想要的滑動頁面，對于新手拿來練手還是不錯的，由于技術(shù)水平有限，大神勿噴！

實(shí)現(xiàn)流程

下面我們來具體說一下實(shí)現(xiàn)流程，首先我們使用 TabLayout 的時(shí)候要在我們的項(xiàng)目中添加依賴，需要在 app 的 gradle 中添加依賴：

compile 'com.android.support:design:24.2.0'

首先我們創(chuàng)建主布局，一個 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="fill"
            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>

然后我們創(chuàng)建對應(yīng)的 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);
    }
}

我這里為了演示只創(chuàng)建兩個 fragment。接下來我們實(shí)現(xiàn)tablayout+viewpager 實(shí)現(xiàn)滑動選項(xiàng)的滑動邏輯，如下代碼。

 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());
       /**
         * 預(yù)加載
         */
        mViewPager.setOffscreenPageLimit(mFragment.size());
        /**
         * 設(shè)置適配器
         */
        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);
    }
    }

如果你學(xué)習(xí)過 TabLayout，相信這些代碼你一定可以看懂，以上代碼中viewpager 設(shè)置適配器是使用 Tablayout 的核心代碼。在我看來，TabLayout+ViewPager 實(shí)現(xiàn) Tab 滑動就是使用 ViewPager 設(shè)置adapter 填充 fragment，然后將 TabLayout 和 ViewPager 關(guān)聯(lián)即可，我們接下來主要講如何實(shí)現(xiàn) TabLayout 和 ViewPager 的封裝，目的就是讓你在創(chuàng)建了最基本的布局和 Fragment 之后可以很輕松的通過三行代碼就能實(shí)現(xiàn)一個滑動 Tab。

首先我們對部分代碼進(jìn)行封裝，我們分三步封裝，第一步封裝如下最主要代碼，也是使用使用 Tablayout 的核心代碼。

/**
         * 設(shè)置適配器
         */
        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 設(shè)置適配器并且實(shí)現(xiàn)與TabLayout 的關(guān)聯(lián)，我們首先創(chuàng)建一個工具類 ItHqAddTab。

public class ItHqAddTab {
    public  static   void addTab(TabLayout tabLayout, ViewPager viewPager, final List<Fragment> fragment, final List<String> title, FragmentManager fragmentManager){
        /**
         * 預(yù)加載
         */
        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關(guān)聯(lián)ViewPager
        tabLayout.setupWithViewPager(viewPager);
    }
}

封裝邏輯如上圖，我們創(chuàng)建了一個公開的 addTab，里面?zhèn)魅胛鍌€參數(shù)，我們尤其要注意最后一個參數(shù)。對封裝好如上代碼時(shí)，我們可以直接使用一行代碼代替復(fù)雜的邏輯。

ItHqAddTab.addTab(mTabLayout,mViewPager,mFragment,mTitle,getSupportFragmentManager());

當(dāng)然我們封裝代碼就是為了以后更好的使用，像如下代碼我們也覺得繁瑣，所以我們再對如下代碼進(jìn)行簡單的封裝。

 mTitle = new ArrayList<>();
        mTitle.add("首頁");
        mTitle.add("中心");
        mFragment = new ArrayList<>();
        mFragment.add(new Fragment1());
        mFragment.add(new Fragment2());

我們再創(chuàng)建一個 ItHqAddTitle 工具類，如下.

public class ItHqAddTitle {
    public static List<String> addTitle(String ... a){
        String[] title = a;
        List<String> list = Arrays.asList(title);
        return list;
    }
}

在封裝這個類的時(shí)候遇到的一個主要的問題就是，當(dāng)你去創(chuàng)建 tab 的頁面名稱時(shí)使用的時(shí) string，但是我們這里需要的是List，這就需要將我們得到的 string 轉(zhuǎn)換成 List，另外一點(diǎn)因?yàn)槲覀儾淮_定你想要創(chuàng)建多少個 title，所以我們傳入的參數(shù)定義為（String ... a）的形式，這樣你就可以隨意的傳參了（個數(shù)）。

同理對于添加 Fragment 的封裝大抵相同，這里貼出代碼.

public class ItHqAddFragment {
    public static List<Fragment> addFragment(Fragment ... fragments){
       Fragment[] m = fragments;
        List<Fragment> fragmentList = Arrays.asList(m);
        return fragmentList;
    }
}

如此一來，我們就將主要的一些方法都單獨(dú)封裝成了一個工具類。

這樣我們就可以通過三行代碼來輕松實(shí)現(xiàn) tab 的滑動了。

mTile = ItHqAddTile.addTile("首頁","中心");
        mFragment = ItHqAddFragment.addFragment(new Fragment(),new Fragment2());
        ItHqAddTab.addTab(mTabLayout,mViewPager,mFragment,mTile,getSupportFragmentManager())

制作自己的開源庫

完成以上功能，我們就可以輕松的實(shí)現(xiàn)tab滑動選項(xiàng)，這么好的事我們應(yīng)該和別人一起分享，因此我們可以將項(xiàng)目制作成開源庫開源出去！

首先在項(xiàng)目的基礎(chǔ)上我們新建一個Module,然后選擇Library.