MaterialDesign 之TabLayout和ViewPager

学习这篇文章，请先学习ToolBar文章。

先修改MainActivity.java类如下：

public class MainActivity extends AppCompatActivity  {

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

      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      toolbar.setTitle("MeterialDesign");
      setSupportActionBar(toolbar);
      // 显示左边的箭头
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
   }
}

接着增加项目依赖

修改activity_main.xml布局文件，定义TabLayout和ViewPager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/toolbar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#1FBCD2" />

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

</LinearLayout>

接下来是MainActivty里面逻辑代码的实现

public class MainActivity extends AppCompatActivity  {

    TabLayout tabLayout;
    ViewPager pager;

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("MeterialDesign");
        setSupportActionBar(toolbar);
        // 显示左边的箭头
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setTabTextColors(Color.WHITE, Color.RED);// 设置文本在选中和为选中时候的颜色
        pager = (ViewPager) findViewById(R.id.viewpager);

        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        // 当个数比较少的话，请使用Mode_Fixed
//    tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.setTabsFromPagerAdapter(adapter);

    }
    // 这里我把MyAdapter和MyFragment都写成内部类的形式，
    // 并不代表开发中都是这样，实际上需要单独成一个类。

    public class MyAdapter extends FragmentPagerAdapter {

        private String tabTitles[] = new String[] { "  新闻     ", "  娱乐   ", "  科技    ", "  图片    ","  体育     ","  军事     ","  农业     ","  社会     ","  美女    " };

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

        @Override
        public Fragment getItem(int position) {
            return MyFragment.newInstance(position + 1);
        }

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

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

    }

    public static class MyFragment extends Fragment {

        public static final String ARG_PAGE = "ARG_PAGE";
        private int mPage;

        public static MyFragment newInstance(int page) {
            Bundle args = new Bundle();
            args.putInt(ARG_PAGE, page);
            MyFragment pageFragment = new MyFragment();
            pageFragment.setArguments(args);
            return pageFragment;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
//       setHasOptionsMenu(true);
// 如果需要添加菜单，请调用此方法，并重写onCreateOptionsMenu  
            mPage = getArguments().getInt(ARG_PAGE);
        }

        @Override
        @Nullable
        public View onCreateView(LayoutInflater inflater,
                                 @Nullable ViewGroup container,
                                 @Nullable Bundle savedInstanceState) {

            TextView textView = new TextView(getActivity());

            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
            textView.setGravity(Gravity.CENTER);
            textView.setLayoutParams(lp);
            textView.setText("Fragment # " + mPage);
            textView.setTextSize(30);
            textView.setTextColor(Color.BLACK);

            return textView;
        }

    }

}

运行效果图如下：

好了，这篇教程到此结束。下面附赠源码

 下载地址