TabLayout+ViewPager+Fragment实现带图标和文字的底部导航栏

在build.gradle中添加：

compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'

布局：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="es.source.code.activity.MainScreen">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbars="none">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#02afff"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance">
    </android.support.design.widget.TabLayout>

</LinearLayout>

java代码：

public class MainScreen extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private TabLayout.Tab tab_one;
    private TabLayout.Tab tab_two;
    private TabLayout.Tab tab_three;
    private TabLayout.Tab tab_four;

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void initViews1() {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            private String[] mTitles = new String[]{"点菜", "查看订单", "登录/注册", "系统帮助"};

            @Override
            public Fragment getItem(int position) {//为fragment pager adapter 分配 fragment
                if (position == 0)
                    return new FragmentOne();
                else if (position == 1)
                    return new FragmentTwo();
                else if (position == 2)
                    return new FragmentThree();
                else
                    return new FragmentFour();
            }

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

            @Override
            public CharSequence getPageTitle(int position) {//显示title
                return mTitles[position];
            }
        });
        mTabLayout.setupWithViewPager(mViewPager);//将tablayout和viewpager绑定
        tab_one = mTabLayout.getTabAt(0);
        tab_two = mTabLayout.getTabAt(1);
        tab_three = mTabLayout.getTabAt(2);
        tab_four = mTabLayout.getTabAt(3);
        tab_one.setIcon(getResources().getDrawable(R.drawable.diancai,null));
        tab_two.setIcon(getResources().getDrawable(R.drawable.dingdan,null));
        tab_three.setIcon(getResources().getDrawable(R.drawable.denglu,null));
        tab_four.setIcon(getResources().getDrawable(R.drawable.bangzhu,null));
    }

    private void initEvents1(){
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

            @Override
            public void onTabSelected(TabLayout.Tab tab) {//viewpager跟着tab
                if(tab==mTabLayout.getTabAt(0)){
                    mViewPager.setCurrentItem(0);
                }
                if(tab==mTabLayout.getTabAt(1)){
                    mViewPager.setCurrentItem(1);
                }
                if(tab==mTabLayout.getTabAt(2)){
                    mViewPager.setCurrentItem(2);
                }
                if(tab==mTabLayout.getTabAt(3)){
                    mViewPager.setCurrentItem(3);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_screen);
        initViews1();
        initEvents1();
    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public void onStop() {
        super.onStop();
    }
}