摘要:要用使二者联系起来。另外这里面使用的是,当然自带方法也可实现的效果。用起来很方便,但是可能不是你要求的那个尺寸大小。
这里简单记录一下通过TabLayout+ViewPager来实现Android底部导航栏。
布局代码
mViewPager = (ViewPager) view.findViewById(R.id.view_pager); mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout); initTabList(); mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(0); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置TabLayout的模式 for (int i = 0; i < mTabLayout.getTabCount(); i++) { mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); } mTabLayout.addOnTabSelectedListener(this);//设置TabLayout的选中监听
根据Tab选中状态显示Tab键效果这里需要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用 mTabLayout.setupWithViewPager(mViewPager);使二者联系起来。
另外这里面使用的是customView,当然TabLayout自带方法也可实现icon+text的效果。也就是效果:TabLayout + ViewPager 2
@Override public void onTabSelected(TabLayout.Tab tab) { setTabSelectedState(tab); } @Override public void onTabUnselected(TabLayout.Tab tab) { setTabUnSelectedState(tab); } @Override public void onTabReselected(TabLayout.Tab tab) { } private void setTabSelectedState(TabLayout.Tab tab) { View customView = tab.getCustomView(); TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); String s = tabText.getText().toString(); if (getString(R.string.item_home).equals(s)) { tabIcon.setImageResource(R.drawable.home_fill); } else if (getString(R.string.item_location).equals(s)) { tabIcon.setImageResource(R.drawable.location_fill); } else if (getString(R.string.item_like).equals(s)) { tabIcon.setImageResource(R.drawable.like_fill); } else if (getString(R.string.item_person).equals(s)) { tabIcon.setImageResource(R.drawable.person_fill); } } private void setTabUnSelectedState(TabLayout.Tab tab) { View customView = tab.getCustomView(); TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1)); String s = tabText.getText().toString(); if (getString(R.string.item_home).equals(s)) { tabIcon.setImageResource(R.drawable.home); } else if (getString(R.string.item_location).equals(s)) { tabIcon.setImageResource(R.drawable.location); } else if (getString(R.string.item_like).equals(s)) { tabIcon.setImageResource(R.drawable.like); } else if (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 = new TabLayoutFragment2Adapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(0); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabMode(TabLayout.MODE_FIXED); // for (int i = 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);//自有方法添加icon mTabLayout.getTabAt(1).setIcon(R.drawable.location); mTabLayout.getTabAt(2).setIcon(R.drawable.like); mTabLayout.getTabAt(3).setIcon(R.drawable.person);Tab切换
@Override public void onTabSelected(TabLayout.Tab tab) { // setTabSelectedState(tab);//这个也无需使用 resetTabIcon(); int position = tab.getPosition(); Log.e("Kevin", "position--->" + position); switch (position) { case 0: tab.setIcon(R.drawable.home_fill); break; case 1: tab.setIcon(R.drawable.location_fill); break; case 2: tab.setIcon(R.drawable.like_fill); break; case 3: tab.setIcon(R.drawable.person_fill); break; } } private void resetTabIcon() { 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); }
DownLoad Demo说明:这几篇文章没有过多的文字叙述,因为这些东西也不是很难,而且都是常用的,相信很多人都了如指掌了,多说亦是废话,直接上代码看的反而更清楚。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/13387.html
【TabLayout】 ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组。属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ②TabLayout的选项卡模式有两种:fixed;scrollable; tabLayout.setTabMode(TabLayout.MODE_FIXED);设置选项卡...
摘要:开发过程中,特别是新开的项目,底部状态栏的切换使用的频率非常的高,主要的实现方式有这里我先介绍前面两种实现方式,后面两种后期再贴出实现方式。代码地址底部公众号回复底部状态栏切换即可获取。 Android开发过程中,特别是新开的项目,底部状态栏的切换使用的频率非常的高,主要的实现方式有: (1)、TabLayout + Fragment (2)、FragmentTabHo...
摘要:开发过程中,特别是新开的项目,底部状态栏的切换使用的频率非常的高,主要的实现方式有这里我先介绍前面两种实现方式,后面两种后期再贴出实现方式。代码地址底部公众号回复底部状态栏切换即可获取。 Android开发过程中,特别是新开的项目,底部状态栏的切换使用的频率非常的高,主要的实现方式有: (1)、TabLayout + Fragment (2)、FragmentTabHo...
摘要:底部导航栏目前基本上每个必备的。效果图实现导航栏的五种方式如上图导航栏上显示的,这里面我总结了这几种,下面会就这几种方式一一记录到文章中。 底部导航栏目前基本上每个app必备的。一般放到首页的,来显示app整个内容的框架。 效果图 showImg(http://img.blog.csdn.net/20161202163009046); 实现导航栏的五种方式 showImg(http:/...
摘要:与老前辈使用攻略刷新篇掘金小序继使用攻略助力篇之后,一直没有更新上下拉刷新的功能实现,主要还是受限于个人现有的技术实力,总觉得没有经过实际打磨的,就不敢有上场的自信。 DrawerLayout 和 NavigationView 使用详解 - Android - 掘金Android Material Design Library 推出了很长时间,越来越多的APP使用了符合Library ...
阅读 1156·2021-11-04 16:11
阅读 4271·2021-10-14 09:42
阅读 2809·2021-10-12 10:11
阅读 2590·2021-09-29 09:47
阅读 1360·2021-09-22 15:40
阅读 897·2019-08-29 15:43
阅读 2654·2019-08-29 13:50
阅读 1446·2019-08-29 13:28