Material Design Tabs

效果图如下

首先看下布局

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

然后设置TabLayout

Toolbar toolbar = (Toolbar) findViewById(R.id.tabanim_toolbar);
 setSupportActionBar(toolbar);
 ViewPager viewPager = (ViewPager) findViewById(R.id.tabanim_viewpager);
 setupViewPager(viewPager);
 TabLayout tabLayout = (TabLayout) findViewById(R.id.tabanim_tabs);
 tabLayout.setupWithViewPager(viewPager)

然后分别添加三个Fragment

private void setupViewPager(ViewPager viewPager) {
      ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
      adapter.addFrag(new DummyFragment(getResources().getColor(R.color.accent_material_light)), "CAT");
      adapter.addFrag(new DummyFragment(getResources().getColor(R.color.ripple_material_light)), "DOG");
      adapter.addFrag(new DummyFragment(getResources().getColor(R.color.button_material_dark)), "MOUSE");
      viewPager.setAdapter(adapter);
  }

定义我们的Adapter

class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
        @Override
        public int getCount() {
            return mFragmentList.size();
        }
        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

其中，我们的Fragment为

public class DummyFragment extends Fragment {
       int color;
       SimpleRecyclerAdapter adapter;
       public DummyFragment(int color) {
           this.color = color;
       }
       @Override
       public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
           View view = inflater.inflate(R.layout.dummy_fragment, container, false);
           final FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.dummyfrag_bg);
           frameLayout.setBackgroundColor(color);
           RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.dummyfrag_scrollableview);
           LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity().getBaseContext());
           recyclerView.setLayoutManager(linearLayoutManager);
           recyclerView.setHasFixedSize(true);
           List<String> list = new ArrayList<String>();
           for (int i = 0; i < VersionModel.data.length; i++) {
               list.add(VersionModel.data[i]);
           }
           adapter = new SimpleRecyclerAdapter(list);
           recyclerView.setAdapter(adapter);
           return view;
       }
   }

给Tab添加监听

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           @Override
           public void onTabSelected(TabLayout.Tab tab) {
              viewPager.setCurrentItem(tab.getPosition());
               switch (tab.getPosition()) {
                   case 0:
                       showToast("One");
                       break;
                   case 1:
                       showToast("Two");
                       break;
                   case 2:
                       showToast("Three");
                       break;
               }
           }
           @Override
           public void onTabUnselected(TabLayout.Tab tab) {
           }
           @Override
           public void onTabReselected(TabLayout.Tab tab) {
           }
   })

其中

viewPager.setCurrentItem(tab.getPosition())

我们在Tab中点击哪个，ViewPager就会显示哪个。

最后，总结下步骤：

1.创建我们的Tab布局

2.初始化ViewPager和Adapter

3.让和关联

4.创建Fragment和我们的ViewPager关联