用TabLayout实现底部导航栏

本文链接： https://blog.csdn.net/u013174702/article/details/56841092

效果图有点大没弄好

下面我们来实现这个效果

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>

扫描二维码关注公众号，回复： 7576205 查看本文章

然后我们的点击效果用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中的选项卡也会跟着滑动。

用TabLayout实现底部导航栏

猜你喜欢