Android中如何使用TabLayout+ViewPager实现底部导航栏

Android中如何使用TabLayout+ViewPager实现底部导航栏

这篇文章主要介绍“Android中如何使用TabLayout+ViewPager实现底部导航栏”，在日常操作中，相信很多人在Android中如何使用TabLayout+ViewPager实现底部导航栏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android中如何使用TabLayout+ViewPager实现底部导航栏”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

布局

<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><includelayout="@layout/fragment_content"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v4.view.ViewPager><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="56dp"app:tabBackground="@color/white"app:tabIndicatorHeight="0dp"app:tabSelectedTextColor="@color/colorPrimary"app:tabTextAppearance="@style/tabTextSizeStyle"app:tabTextColor="@color/black_1"></android.support.design.widget.TabLayout></LinearLayout></RelativeLayout>

代码

mViewPager=(ViewPager)view.findViewById(R.id.view_pager);mTabLayout=(TabLayout)view.findViewById(R.id.tab_layout);initTabList();mAdapter=newTabLayoutFragmentAdapter(getChildFragmentManager(),mTabList,getActivity(),mFragments,mTabImgs);mViewPager.setAdapter(mAdapter);mViewPager.setCurrentItem(0);mTabLayout.setupWithViewPager(mViewPager);mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置TabLayout的模式for(inti=0;i<mTabLayout.getTabCount();i++){mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));}mTabLayout.addOnTabSelectedListener(this);//设置TabLayout的选中监听

这里需要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用 mTabLayout.setupWithViewPager(mViewPager);使二者联系起来。另外这里面使用的是customView，当然TabLayout自带方法也可实现icon+text的效果。也就是效果：TabLayout + ViewPager 2

根据Tab选中状态显示Tab键效果

@OverridepublicvoidonTabSelected(TabLayout.Tabtab){setTabSelectedState(tab);}@OverridepublicvoidonTabUnselected(TabLayout.Tabtab){setTabUnSelectedState(tab);}@OverridepublicvoidonTabReselected(TabLayout.Tabtab){}privatevoidsetTabSelectedState(TabLayout.Tabtab){ViewcustomView=tab.getCustomView();TextViewtabText=(TextView)customView.findViewById(R.id.tv_tab_text);ImageViewtabIcon=(ImageView)customView.findViewById(R.id.iv_tab_icon);tabText.setTextColor(ContextCompat.getColor(getActivity(),R.color.colorPrimary));Strings=tabText.getText().toString();if(getString(R.string.item_home).equals(s)){tabIcon.setImageResource(R.drawable.home_fill);}elseif(getString(R.string.item_location).equals(s)){tabIcon.setImageResource(R.drawable.location_fill);}elseif(getString(R.string.item_like).equals(s)){tabIcon.setImageResource(R.drawable.like_fill);}elseif(getString(R.string.item_person).equals(s)){tabIcon.setImageResource(R.drawable.person_fill);}}privatevoidsetTabUnSelectedState(TabLayout.Tabtab){ViewcustomView=tab.getCustomView();TextViewtabText=(TextView)customView.findViewById(R.id.tv_tab_text);ImageViewtabIcon=(ImageView)customView.findViewById(R.id.iv_tab_icon);tabText.setTextColor(ContextCompat.getColor(getActivity(),R.color.black_1));Strings=tabText.getText().toString();if(getString(R.string.item_home).equals(s)){tabIcon.setImageResource(R.drawable.home);}elseif(getString(R.string.item_location).equals(s)){tabIcon.setImageResource(R.drawable.location);}elseif(getString(R.string.item_like).equals(s)){tabIcon.setImageResource(R.drawable.like);}elseif(getString(R.string.item_person).equals(s)){tabIcon.setImageResource(R.drawable.person);}}

这里面不用设置defaultFragment，TabLayout会默认显示***个;

另外，这里也贴出使用TabLayout自带方法来实现效果代码

值得说的是，自带方法不能自定义icon和text的间距。用起来很方便，但是可能不是你要求的那个尺寸大小。我没有去深究这里面的源码。如果有人知道这个自带方法怎么改变的，也请告知一下。

mViewPager=(ViewPager)view.findViewById(R.id.view_pager);mTabLayout=(TabLayout)view.findViewById(R.id.tab_layout);initTabList();mAdapter=newTabLayoutFragment2Adapter(getChildFragmentManager(),mTabList,getActivity(),mFragments,mTabImgs);mViewPager.setAdapter(mAdapter);mViewPager.setCurrentItem(0);mTabLayout.setupWithViewPager(mViewPager);mTabLayout.setTabMode(TabLayout.MODE_FIXED);//for(inti=0;i<mTabLayout.getTabCount();i++){//mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));//}mTabLayout.addOnTabSelectedListener(this);//mViewPager.setCurrentItem(0);mTabLayout.getTabAt(0).setIcon(R.drawable.home_fill);//自有方法添加iconmTabLayout.getTabAt(1).setIcon(R.drawable.location);mTabLayout.getTabAt(2).setIcon(R.drawable.like);mTabLayout.getTabAt(3).setIcon(R.drawable.person);

Tab切换

@OverridepublicvoidonTabSelected(TabLayout.Tabtab){//setTabSelectedState(tab);//这个也无需使用resetTabIcon();intposition=tab.getPosition();Log.e("Kevin","position--->"+position);switch(position){case0:tab.setIcon(R.drawable.home_fill);break;case1:tab.setIcon(R.drawable.location_fill);break;case2:tab.setIcon(R.drawable.like_fill);break;case3:tab.setIcon(R.drawable.person_fill);break;}}privatevoidresetTabIcon(){mTabLayout.getTabAt(0).setIcon(R.drawable.home);mTabLayout.getTabAt(1).setIcon(R.drawable.location);mTabLayout.getTabAt(2).setIcon(R.drawable.like);mTabLayout.getTabAt(3).setIcon(R.drawable.person);}

到此，关于“Android中如何使用TabLayout+ViewPager实现底部导航栏”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！