用TabLayout实现底部导航栏

效果图 有点大 没弄好

下面我们来实现这个效果

1、在app的build.gradle中添加这行

compile 'com.android.support:design:24.0.0'然后看我的布局文件
main.xml
<?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:id="@+id/activity_main"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="halewang.com.bangbang.MainActivity">    <halewang.com.bangbang.widght.MainViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </halewang.com.bangbang.widght.MainViewPager>    <android.support.design.widget.TabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabIndicatorColor="@null"        app:tabSelectedTextColor="#FF9100"        app:tabTextColor="#707070"        app:tabMode="fixed">    </android.support.design.widget.TabLayout></LinearLayout>
然后我们的点击效果用selector实现
tab_home_selector.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="false" android:drawable="@drawable/tab_home_normal"/>    <item android:state_selected="true" android:drawable="@drawable/tab_home_checked"/></selector>主界面用的是自定义ViewPager,这个ViewPager禁用了它的滑动事件，然后我们在TabLayout的点击事件中切换界面。
PRivate void initTabLayout(){        mTabs = new ArrayList<>();        mTabs.add("首页");        mTabs.add("榜单");        mTabs.add("我");	//这里就是给tab设置点击效果        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(0)).setIcon(R.drawable.tab_home_selector));        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(1)).setIcon(R.drawable.tab_list_selector));        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(2)).setIcon(R.drawable.tab_mine_selector));        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                int position = tab.getPosition();                mViewPager.setCurrentItem(position,true);            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }然后随便给ViewPager填充几个界面就可以实现刚才的效果了。
还有一种将TabLayout和ViewPager相关联的方法，不用给TabLayout设置点击事件也可以和ViewPager产生联系。
private void initViewPager(){        mViewPager = getMView().getViewPager();        mViewPager.setOffscreenPageLimit(4);        mFragments = new ArrayList<>();        mFragments.add(new DayFragment());        mFragments.add(new WeekFragment());        mFragments.add(new MonthFragment());        MainActivity activity = (MainActivity) mContext;        ListPagerAdapter mAdapter = new ListPagerAdapter(activity.getSupportFragmentManager(), mFragments, mItems);        mViewPager.setAdapter(mAdapter);        mTabLayout.setupWithViewPager(mViewPager);        mTabLayout.setTabsFromPagerAdapter(mAdapter);    }这样在ViewPager滑动的时候，TabLayout中的选项卡也会跟着滑动。