Android开发：顶部&底部Tab导航栏实现（TabLayout+ViewPager+Fragment）

添加依赖包：

compile ‘com.android.support:design:22.2.0‘

XML







   //导航栏背景颜色
        android:background="#ffff00"
        //指示器颜色
        app:tabIndicatorColor="#66ff33"
        //指示器高度
        app:tabIndicatorHeight="20p"
        //普通状态下文字的颜色
        app:tabTextColor="@color/colorPrimary"
        //选中时文字的颜色
        app:tabSelectedTextColor="#CC33FF"
        //是否可滑动：fixed：固定；scrollable：可滑动，tab少用fixed，多用scrollable
        app:tabMode="fixed"
        //设置选项卡的背景：此处要写一个selector）
        app:tabBackground="@drawable/selected"
             //设置字体大小：此处要写一个style） app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>

selected.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@color/colorPrimary"/>    <item android:drawable="@color/c1olorAccent"/>selector>

style.xml





<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">    <item name="android:textSize">5spitem>    <item name="android:textColor">@color/c1olorAAAitem>style>

MainFragment

public class MainFragment extends Fragment {
    private String context;
    private TextView mTextView;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MyPagerAdapter myPagerAdapter;
    View view;

    public  MainFragment(){
        super();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         view = inflater.inflate(R.layout.fragment_main,container,false);
        initViews();

        return view;
    }

    public void initViews(){
        //使用适配器将ViewPager与Fragment绑定在一起
        mViewPager= (ViewPager) view.findViewById(R.id.viewPager);
        MyPagerAdapter adapter = new MyPagerAdapter(getChildFragmentManager());
        adapter.addFragment(new Fragment_aa(), "AAAAAA");
        adapter.addFragment(new FragmentB(), "BB");
        mViewPager.setAdapter(adapter);

        //将TabLayout与ViewPager绑定在一起
        mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
        mTabLayout.setupWithViewPager(mViewPager);

        //设置Tab的图标，假如不需要则把下面的代码删去
        mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);
        mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_launcher);



    }

    public static class MyPagerAdapter extends FragmentPagerAdapter {
        private final List mFragments = new ArrayList<>();
        private final List mFragmentTitles = new ArrayList<>();

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

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);
        }

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

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

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