一、效果圖

二、實現原理

    TabLayout+ViewPager+Fragment

三、實現

 MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout tablayout;
    private ViewPager viewPager;
    //資料來源
    private String[] titles = {"頭條", "新聞", "娛樂", "體育", "美女", "科技", "財經", "汽車", "彩票", "國際", "推薦",};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        tablayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
        viewPager.setAdapter(myPagerAdapter);

        tablayout.setupWithViewPager(viewPager);

		//每條之間的分割線
        LinearLayout linearLayout = (LinearLayout) tablayout.getChildAt(0);

        linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);

        linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,
                R.drawable.layout_divider_vertical));

         //如果要在頂上加入圖片
//        for (int i = 0; i < tablayout.getTabCount(); i++) {
//            TabLayout.Tab tab = tablayout.getTabAt(i);
//            tab.setIcon(R.mipmap.ic_launcher);
//        }
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public Fragment getItem(int position) {
            TestFragment testFragment = new TestFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", titles[position]);
            testFragment.setArguments(bundle);
            return testFragment;
        }

        @Override
        public int getCount() {
            return titles.length;
        }
    }
}
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_blue_bright"
        app:tabTextColor="@android:color/holo_green_dark"
        app:tabIndicatorColor="@android:color/holo_orange_dark"
        app:tabGravity="center"
        android:layout_height="wrap_content"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</LinearLayout>
 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80c0c0c0"/>
    <size android:width="1dp" />
    <padding android:top="5dp" android:bottom="5dp"/>
</shape>

public class TestFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        textView.setTextColor(Color.WHITE);
        String name = this.getArguments().getString("title");
        textView.setBackgroundColor(Color.rgb((int)(Math.random()*255),(int)(Math.random()*255),(int)(Math.random()*255)));
        textView.setText(name);
        return textView;
    }
}
 

  TabLayout屬性介紹

        app:tabIndicatorColor="@color/colorPrimary_pink"//指示器的顏色
        app:tabTextColor="@color/colorPrimary_pink"//tab的文字顏色
        app:tabSelectedTextColor="@color/colorPrimary_pinkDark"//選中的tab的文字顏色
        app:tabMode="fixed"//scrollable:可滑動；fixed：不能滑動，平分tabLayout寬度
        app:tabGravity="center"// fill:tabs平均填充整個寬度;center:tab居中顯示