Android底部导航栏实现(四)之TabLayout+ViewPager

移动开发 Android
这里简单记录一下通过TabLayout+ViewPager来实现Android底部导航栏。

 这里简单记录一下通过TabLayout+ViewPager来实现Android底部导航栏。 

 

 

  

 

 

 

布局 

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.                 xmlns:app="http://schemas.android.com/apk/res-auto" 
  4.                 android:layout_width="match_parent" 
  5.                 android:layout_height="match_parent" 
  6.                 android:orientation="vertical"
  7.  
  8.     <include layout="@layout/fragment_content"/> 
  9.  
  10.     <LinearLayout 
  11.         android:layout_width="match_parent" 
  12.         android:layout_height="match_parent" 
  13.         android:orientation="vertical"
  14.  
  15.  
  16.         <android.support.v4.view.ViewPager 
  17.             android:id="@+id/view_pager" 
  18.             android:layout_width="match_parent" 
  19.             android:layout_height="0dp" 
  20.             android:layout_weight="1"></android.support.v4.view.ViewPager> 
  21.  
  22.         <android.support.design.widget.TabLayout 
  23.             android:id="@+id/tab_layout" 
  24.             android:layout_width="match_parent" 
  25.             android:layout_height="56dp" 
  26.             app:tabBackground="@color/white" 
  27.             app:tabIndicatorHeight="0dp" 
  28.             app:tabSelectedTextColor="@color/colorPrimary" 
  29.             app:tabTextAppearance="@style/tabTextSizeStyle" 
  30.             app:tabTextColor="@color/black_1"></android.support.design.widget.TabLayout> 
  31.     </LinearLayout> 
  32. </RelativeLayout>  

代码 

  1. mViewPager = (ViewPager) view.findViewById(R.id.view_pager); 
  2.         mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout); 
  3.         initTabList(); 
  4.         mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs); 
  5.         mViewPager.setAdapter(mAdapter); 
  6.         mViewPager.setCurrentItem(0); 
  7.         mTabLayout.setupWithViewPager(mViewPager); 
  8.         mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置TabLayout的模式 
  9.         for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
  10.             mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); 
  11.         } 
  12.         mTabLayout.addOnTabSelectedListener(this);//设置TabLayout的选中监听  

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

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

  1. @Override 
  2.    public void onTabSelected(TabLayout.Tab tab) { 
  3.        setTabSelectedState(tab); 
  4.    } 
  5.  
  6.    @Override 
  7.    public void onTabUnselected(TabLayout.Tab tab) { 
  8.        setTabUnSelectedState(tab); 
  9.    } 
  10.  
  11.  
  12.    @Override 
  13.    public void onTabReselected(TabLayout.Tab tab) { 
  14.  
  15.    } 
  16.  
  17.  
  18.  
  19.  
  20. private void setTabSelectedState(TabLayout.Tab tab) { 
  21.        View customView = tab.getCustomView(); 
  22.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); 
  23.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); 
  24.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 
  25.        String s = tabText.getText().toString(); 
  26.        if (getString(R.string.item_home).equals(s)) { 
  27.            tabIcon.setImageResource(R.drawable.home_fill); 
  28.        } else if (getString(R.string.item_location).equals(s)) { 
  29.            tabIcon.setImageResource(R.drawable.location_fill); 
  30.        } else if (getString(R.string.item_like).equals(s)) { 
  31.            tabIcon.setImageResource(R.drawable.like_fill); 
  32.        } else if (getString(R.string.item_person).equals(s)) { 
  33.            tabIcon.setImageResource(R.drawable.person_fill); 
  34.        } 
  35.    } 
  36.  
  37.    private void setTabUnSelectedState(TabLayout.Tab tab) { 
  38.        View customView = tab.getCustomView(); 
  39.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); 
  40.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); 
  41.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1)); 
  42.        String s = tabText.getText().toString(); 
  43.        if (getString(R.string.item_home).equals(s)) { 
  44.            tabIcon.setImageResource(R.drawable.home); 
  45.        } else if (getString(R.string.item_location).equals(s)) { 
  46.            tabIcon.setImageResource(R.drawable.location); 
  47.        } else if (getString(R.string.item_like).equals(s)) { 
  48.            tabIcon.setImageResource(R.drawable.like); 
  49.        } else if (getString(R.string.item_person).equals(s)) { 
  50.            tabIcon.setImageResource(R.drawable.person); 
  51.        } 
  52.    }  

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

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

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

  1.  mViewPager = (ViewPager) view.findViewById(R.id.view_pager); 
  2.         mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout); 
  3.         initTabList(); 
  4.         mAdapter = new TabLayoutFragment2Adapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs); 
  5.         mViewPager.setAdapter(mAdapter); 
  6.         mViewPager.setCurrentItem(0); 
  7.         mTabLayout.setupWithViewPager(mViewPager); 
  8.         mTabLayout.setTabMode(TabLayout.MODE_FIXED); 
  9. //        for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
  10. //            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); 
  11. //        } 
  12.         mTabLayout.addOnTabSelectedListener(this); 
  13. //        mViewPager.setCurrentItem(0); 
  14.         mTabLayout.getTabAt(0).setIcon(R.drawable.home_fill);//自有方法添加icon 
  15.         mTabLayout.getTabAt(1).setIcon(R.drawable.location); 
  16.         mTabLayout.getTabAt(2).setIcon(R.drawable.like); 
  17.         mTabLayout.getTabAt(3).setIcon(R.drawable.person);  

Tab切换 

  1. @Override 
  2.     public void onTabSelected(TabLayout.Tab tab) { 
  3. //        setTabSelectedState(tab);//这个也无需使用 
  4.         resetTabIcon(); 
  5.         int position = tab.getPosition(); 
  6.         Log.e("Kevin""position--->" + position); 
  7.         switch (position) { 
  8.             case 0: 
  9.                 tab.setIcon(R.drawable.home_fill); 
  10.                 break; 
  11.             case 1: 
  12.                 tab.setIcon(R.drawable.location_fill); 
  13.                 break; 
  14.             case 2: 
  15.                 tab.setIcon(R.drawable.like_fill); 
  16.                 break; 
  17.             case 3: 
  18.                 tab.setIcon(R.drawable.person_fill); 
  19.                 break; 
  20.  
  21.         } 
  22.     } 
  23.  
  24.  
  25. private void resetTabIcon() { 
  26.         mTabLayout.getTabAt(0).setIcon(R.drawable.home); 
  27.         mTabLayout.getTabAt(1).setIcon(R.drawable.location); 
  28.         mTabLayout.getTabAt(2).setIcon(R.drawable.like); 
  29.         mTabLayout.getTabAt(3).setIcon(R.drawable.person); 
  30.     }  

说明:这几篇文章没有过多的文字叙述,因为这些东西也不是很难,而且都是常用的,相信很多人都了如指掌了,多说亦是废话,直接上代码看的反而更清楚。

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2016-12-07 10:27:16

移动应用开发底部导航android

2016-12-07 10:18:44

移动应用开发底部导航android

2016-12-07 10:32:14

移动应用开发底部导航android

2016-12-07 10:02:54

移动应用开发底部导航android

2022-08-08 19:46:26

ArkUI鸿蒙

2023-10-23 08:48:04

CSS宽度标题

2022-11-15 18:31:37

React

2021-08-02 09:11:39

底部导航产品Tab Bar

2009-06-24 09:36:52

XML实现breadcMVC

2021-01-28 06:11:40

导航组件Sidenav Javascript

2020-11-23 14:29:22

Android 10窗口代码

2016-12-01 09:24:56

Android

2013-01-14 17:05:55

UCUI设计菜单栏

2017-02-17 11:00:57

状态栏Android

2023-06-06 15:38:28

HTMLCSS开发

2022-02-11 14:48:57

Chrome谷歌下载栏

2015-07-30 14:43:04

导航栏iOS开发

2012-04-28 11:07:15

2018-04-15 15:51:21

Android P安卓系统谷歌

2016-12-09 09:23:50

android组件Service
点赞
收藏

51CTO技术栈公众号