下面這個介面在日常開發中簡直太常見不過了，viewpager+fragment組合出來的效果！

首先介紹一下使用方法：

xml檔案

 <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EF8D11"
        app:tabIndicatorColor="#EF4A11"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
        app:tabTextColor="#FFFFFF" />
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 

屬性說明：
android:background="#EF8D11" 背景色
app:tabIndicatorColor="#EF4A11" tab文字下方的那條線的顏色
app:tabMode="scrollable" 如果tab過多超出螢幕寬度可以水平滾動
app:tabSelectedTextColor="#FFFFFF" tab被選中的時候文字的顏色
app:tabTextColor="#FFFFFF" tab未被選中時文字的顏色
app:tabTextAppearance="@style/MyTabLayoutTextAppearance" 自定義字型大小（一般使用預設即可）

1
2
3

<style
 
 name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">12sp</item>
</style>

java 程式碼

    private void initView(View view) {

        mTablayout = (TabLayout) view.findViewById(R.id.tab_layout);
        //mTablayout.setTabMode(TabLayout.MODE_SCROLLABLE);//擠在一起顯示
        viewpager = (ViewPager) view.findViewById(R.id.viewpager);
        setupViewPager(viewpager);
        mTablayout.addTab(mTablayout.newTab().setText("頭條"));
        mTablayout.addTab(mTablayout.newTab().setText("NBA"));
        mTablayout.addTab(mTablayout.newTab().setText("汽車"));
        mTablayout.addTab(mTablayout.newTab().setText("笑話"));

        mTablayout.setupWithViewPager(viewpager);

    }

    private void setupViewPager(ViewPager viewpager) {
        MyPagerAdapter adapter=new MyPagerAdapter(getChildFragmentManager());
        adapter.addFragment(FirstListFragment.newInstance(ONE),"頭條");
        adapter.addFragment(FirstListFragment.newInstance(TWO),"NBA");
        adapter.addFragment(FirstListFragment.newInstance(THREE),"汽車");
        adapter.addFragment(FirstListFragment.newInstance(FOUR),"笑話");
        viewpager.setAdapter(adapter);
    }
 

 public  static class MyPagerAdapter extends FragmentPagerAdapter{
        private final List<Fragment> mFragment=new ArrayList<Fragment>();
        private final List<String> mFragmentTitle=new ArrayList<String>();

        public void addFragment(Fragment  fragment,String title){
            mFragment.add(fragment);
            mFragmentTitle.add(title);
        }
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragment.get(position);
        }

        @Override
        public int getCount() {
            return mFragment.size();

        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitle.get(position);
        }
    }

懶載入定義

Fragment的UI介面對使用者可見的時候才載入資料。

怎麼判斷什麼是否對使用者可見呢？

public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        if (getUserVisibleHint()) {
            //可見
        } else {
            //不可見
        }
    }

注意：fragment的緩載入，優先於oncreate方法執行，且每次切換fragment都會執行此方法！

程式碼

為了方便，封裝一個基類 LazyLoadFragment，提供一個 loadData() 方法供呼叫去載入資料

public abstract class LazyLoadFragment extends Fragment {

    /**
     * 控制元件是否初始化完成
     */
    private boolean isViewCreated;
    /**
     * 資料是否已載入完畢
     */
    private boolean isLoadDataCompleted;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(getLayout(), container, false);
        initViews(view);
        isViewCreated = true;
        return view;
    }

    public abstract int getLayout();
    public abstract void initViews(View view);

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        if (isVisibleToUser && isViewCreated && !isLoadDataCompleted) {
            isLoadDataCompleted = true;
            loadData();
        }
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        if (getUserVisibleHint()) {
            isLoadDataCompleted = true;
            loadData();
        }
    }

    /**
     * 子類實現載入資料的方法
     */
    public abstract  void loadData();

      為什麼 loadData() 會在兩個地方執行？在 setUserVisibleHint 方法裡執行我還能理解，為什麼 onActivityCreated 也要執行呢？

        因為，ViewPager 預設顯示第一頁，第一頁肯定要先載入資料，而且 setUserVisibleHint 的執行順序又是在 onCreatView 之前，同時 onCreatView 需要初始化介面和修改 isViewCreated 的值。所以就需要在 onActivityCreated 裡執行一次。