用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中的选项卡也会跟着滑动。