ViewPager+Fragment+FlycoTabLayout，20行代码实现tabbar（菜单切换效果）

前言

首先上鸡汤，FlycoTabLayout，一个强大的第三方tabbar库（有各种体位，总有个姿势会让你舒适），点击查看相信你不会后悔。

正如标题所说，只需要不到20行的代码，实现tabbar，菜单选择效果，先上图。

编码

• 首先创建一个项目

• 布局，很简单

  <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tl="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:context="com.lpf.fvp.MainActivity"    tools:showIn="@layout/activity_main">    <com.flyco.tablayout.SlidingTabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="?attr/colorPrimary"        tl:tl_divider_color="#1AFFFFFF"        tl:tl_divider_padding="13dp"        tl:tl_divider_width="1dp"        tl:tl_indicator_color="#FFFFFF"        tl:tl_indicator_height="1.5dp"        tl:tl_indicator_width_equal_title="true"        tl:tl_tab_padding="22dp"        tl:tl_tab_space_equal="true"        tl:tl_textSelectColor="#FFFFFF"        tl:tl_textUnselectColor="#66FFFFFF"        tl:tl_underline_color="#1AFFFFFF"        tl:tl_underline_height="1dp" />    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

  具体控件的使用请查看源项目FlycoTabLayout，有详细的介绍，在此不多说。

• 创建一个fragment

  public class MyFragment extends Fragment {    private View view;    private String title;    private TextView txt;    public static MyFragment getInstance(String title) {        MyFragment mf = new MyFragment();        mf.title = title;        return mf;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment_layout, container, false);        return view;    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        initView();    }    private void initView() {        txt = (TextView) view.findViewById(R.id.msg);        txt.setText(title);    }}

  <?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"    android:orientation="vertical">    <TextView        android:id="@+id/msg"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center" /></LinearLayout>

  此处应该不存在任何疑惑，绑定布局，获取一个textview而已。

• 主界面，MainActivity代码实现

  public class MainActivity extends AppCompatActivity {    @InjectView(R.id.toolbar)    Toolbar toolbar;    @InjectView(R.id.tablayout)    SlidingTabLayout tablayout;    @InjectView(R.id.view_pager)    ViewPager viewPager;    @InjectView(R.id.fab)    FloatingActionButton fab;    private ArrayList<MyFragment> mFagments = new ArrayList<>();    private String[] mTitles = {"Tab1", "Tab2", "Tab333344", "Tab4", "Tab5", "Tab6"};    private MyPagerAdapter adapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.inject(this);        setSupportActionBar(toolbar);        initView();    }    private void initView() {        for (String s : mTitles) {            mFagments.add(MyFragment.getInstance(s));        }        //getChildFragmentManager() 如果是嵌套在fragment中就要用这个        adapter = new MyPagerAdapter(getSupportFragmentManager());        viewPager.setAdapter(adapter);        tablayout.setViewPager(viewPager, mTitles);    }    private class MyPagerAdapter extends FragmentPagerAdapter {        public MyPagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public int getCount() {            return mFagments.size();        }        @Override        public CharSequence getPageTitle(int position) {            return mTitles[position];        }        @Override        public Fragment getItem(int position) {            return mFagments.get(position);        }    }}

  这里就说一下MyPagerAdapter,用于viewpager绑定fragment使用，在activity中FragmentManager通过getSupportFragmentManager()去获取，如果在是在fragment中就需要通过getChildFragmentManager()去说去。
  我想又得开始吐槽了，特麽这只有20行代码？哈哈，刨去初始化控件啊什么乱七八糟的，真的没有20行，亲自数过。

• 其他同方法实现的效果
  

补充

• 补充说明

  可能有人会思考，你这现有的布局，都长的差不多，可以使用一个fragment绑定就可以了，如何使用多个fragment，绑定不同的页面呢？简单啦…

• 为了方便绑定数据，我们先创建一个BaseFragent的抽象类

  public abstract class BaseFragment extends Fragment {    public abstract int getLayoutID();    public abstract void initView();    public View view;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view = inflater.inflate(getLayoutID(), container, false);        return view;    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        initView();    }}

• 各自的fragment继承并绑定各自的布局，关联各自的数据，互不干扰
  FragmentA

  public class FragmentA extends BaseFragment {    private String title;    private TextView txt;    @Override    public int getLayoutID() {        return R.layout.fragment_layout_a;    }    @Override    public void initView() {        txt = (TextView) view.findViewById(R.id.msg);        txt.setText("FragmentA:" + title);    }    public static FragmentA getInstance(String title) {        FragmentA mf = new FragmentA();        mf.title = title;        return mf;    }}

  FragmentB

  public class FragmentB extends BaseFragment {    private String title;    private TextView txt;    @Override    public int getLayoutID() {        return R.layout.fragment_layout_b;    }    @Override    public void initView() {        txt = (TextView) view.findViewById(R.id.msg);        txt.setText("FragmentB:" + title);    }    public static FragmentB getInstance(String title) {        FragmentB mf = new FragmentB();        mf.title = title;        return mf;    }}

  ……FragmentC、FragmentD、FragmentE、FragmentF。

• 修改绑定viewpager的arraylist的对象类型

  private ArrayList<BaseFragment> mFagments = new ArrayList<>();

• 添加数据

  //for (String s : mTitles) {//     mFagments.add(MyFragment.getInstance(s));//}mFagments.add(FragmentA.getInstance(mTitles[0]));mFagments.add(FragmentB.getInstance(mTitles[1]));mFagments.add(FragmentC.getInstance(mTitles[2]));mFagments.add(FragmentD.getInstance(mTitles[3]));mFagments.add(FragmentE.getInstance(mTitles[4]));mFagments.add(FragmentF.getInstance(mTitles[5]));

  以上即可实现绑定不同的Fragment，效果如下：

  

源码下载