在android studio中新增依賴

 com.android.support:design:23.2.1

TabLayou 主要實現的是標題頭的 滑動 這個 控制元件 類似於 ScrollView ##

XML中的佈局

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <android.support
 
.design.widget.TabLayout
            android:id="@+id/homefragment_tablelayouts"
            android:layout_width="0dp"
            android:layout_height="30dp"
            app:tabIndicatorHeight="2dp"
            android:layout_weight="1"
            app:tabIndicatorColor="@color/colorred"
            app:tabSelectedTextColor="#000000"
 

            app:tabMode="scrollable"
            >

        </android.support.design.widget.TabLayout>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/add_channel_titlbar_new"

            />
    </LinearLayout>
    <android.support
 
.v4.view.ViewPager
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/homefragment_vp"
        ></android.support.v4.view.ViewPager>

以下是程式碼的實現

    //定義一個方法    
    public void getVpTitleData() {
    // 找到 TabLayou  控制元件
        TabLayout mTabLayout= (TabLayout) getView().findViewById(R.id.homefragment_tablelayouts);
        // 找到 ViewPager  控制元件
        ViewPager mViewPager= (ViewPager) getView().findViewById(R.id.homefragment_vp);

        //定義 title 集合 來儲存  解析的data資料
        listtitle = new ArrayList<>();
        listtitle .add("頭條");
        listtitle .add("社會");
        listtitle .add("國內");
        listtitle .add("國際");
        listtitle .add("明星");
        listtitle .add("娛樂");
        listtitle .add("軍事");
        listtitle .add("財經");
        listtitle .add("時尚");
        listtitle .add("八卦");

        //遍歷 listtitle 集合 將title 新增經 TabLayou z中
        for (int i = 0; i <listtitle.size() ; i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(listtitle.get(i)));
        }

        //建立集合 迴圈新增建立的Fragment
        listfragment = new ArrayList<>();
        for (int i = 0; i <date.size() ; i++) {
            BeiJingFragment mjingFragment = new BeiJingFragment();
            listfragment.add(mjingFragment);
        }

        HomeFragmentVPFragmentAdapter mAdapter = new HomeFragmentVPFragmentAdapter(getFragmentManager(),listfragment,listtitle);

        //給ViewPager設定介面卡
        mViewPager.setAdapter(mAdapter);
        //將TabLayout和ViewPager關聯起來。
        mTabLayout.setupWithViewPager(mViewPager);
        //給TabLayout設定介面卡
        mTabLayout.setTabsFromPagerAdapter(mAdapter);


    }

ViewPager與Fragment的介面卡

public class HomeFragmentVPFragmentAdapter extends FragmentStatePagerAdapter {
    List<Fragment> listfragment;
    List<String> listtitle;

    public HomeFragmentVPFragmentAdapter(FragmentManager fm, List<Fragment> listfragment, List<String> listtitle) {
        super(fm);
        this.listfragment = listfragment;
        this.listtitle = listtitle;
    }

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

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

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

效果圖