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

codingSmart 2021-10-22

展開全文

前言

在學習 TabLayout 的時候為了加深自己的記憶，將 TabLayout 和ViewPager 進行了一些簡單的封裝，可以更加快捷的生成我們想要的滑動頁面，對于新手拿來練手還是不錯的，由于技術(shù)水平有限，大神勿噴！

實現(xiàn)流程

下面我們來具體說一下實現(xiàn)流程，首先我們使用 TabLayout 的時候要在我們的項目中添加依賴，需要在 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)建對應的 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。接下來我們實現(xiàn)tablayout+viewpager 實現(xiàn)滑動選項的滑動邏輯，如下代碼。

 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());
        /**
         * 設(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);
    }
    }

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

首先我們對部分代碼進行封裝，我們分三步封裝，第一步封裝如下最主要代碼，也是使用使用 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è)置適配器并且實現(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){
        /**
         * 預加載
         */
        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ù)。對封裝好如上代碼時，我們可以直接使用一行代碼代替復雜的邏輯。

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());

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

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

在封裝這個類的時候遇到的一個主要的問題就是，當你去創(chuàng)建 tab 的頁面名稱時使用的時 string，但是我們這里需要的是List，這就需要將我們得到的 string 轉(zhuǎn)換成 List，另外一點因為我們不確定你想要創(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;
    }
}

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

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

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

制作自己的開源庫

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

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