Android底部导航栏实现(三)之TextView+LinearLayout

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

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏。

 

 

 

 

布局

  1. <!--fragment_text_tab.xml--> 
  2.  
  3. <?xml version="1.0" encoding="utf-8"?> 
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  5.               android:layout_width="match_parent" 
  6.               android:layout_height="match_parent" 
  7.               android:orientation="vertical"
  8.  
  9.     <FrameLayout 
  10.         android:id="@+id/sub_content" 
  11.         android:layout_width="match_parent" 
  12.         android:layout_height="0dp" 
  13.         android:layout_weight="1"
  14.  
  15.         <TextView 
  16.             android:id="@+id/activity_text_view" 
  17.             android:layout_width="wrap_content" 
  18.             android:layout_height="wrap_content" 
  19.             android:layout_centerHorizontal="true" 
  20.             android:text="@string/tips" 
  21.             android:textColor="@color/colorPrimary" 
  22.             android:textSize="18sp" 
  23.             android:textStyle="bold|italic"/> 
  24.     </FrameLayout> 
  25.  
  26.     <View 
  27.         android:layout_width="match_parent" 
  28.         android:layout_height="1px" 
  29.         android:background="@color/grey_300"/> 
  30.  
  31.     <include layout="@layout/tab_layout_for_bottom"/> 
  32.  
  33. </LinearLayout> 
  34.  
  35.  
  36.  
  37. <!--tab_layout_for_bottom--> 
  38.  
  39. <?xml version="1.0" encoding="utf-8"?> 
  40.  
  41.  
  42. <LinearLayout 
  43.     xmlns:android="http://schemas.android.com/apk/res/android" 
  44.     xmlns:tools="http://schemas.android.com/tools" 
  45.     android:layout_width="match_parent" 
  46.     android:layout_height="56dp" 
  47.     android:background="@color/white" 
  48.     android:orientation="horizontal" 
  49.     tools:showIn="@layout/fragment_text_tab"
  50.  
  51.     <TextView 
  52.         android:id="@+id/tv_home" 
  53.         style="@style/viewpager_navigation_bar_tab_style" 
  54.         android:drawableTop="@drawable/home" 
  55.         android:text="@string/item_home"/> 
  56.  
  57.     <TextView 
  58.         android:id="@+id/tv_location" 
  59.         style="@style/viewpager_navigation_bar_tab_style" 
  60.         android:drawableTop="@drawable/location" 
  61.         android:text="@string/item_location"/> 
  62.  
  63.     <TextView 
  64.         android:id="@+id/tv_like" 
  65.         style="@style/viewpager_navigation_bar_tab_style" 
  66.         android:drawableTop="@drawable/like" 
  67.         android:text="@string/item_like"/> 
  68.  
  69.     <TextView 
  70.         android:id="@+id/tv_person" 
  71.         style="@style/viewpager_navigation_bar_tab_style" 
  72.         android:drawableTop="@drawable/person" 
  73.         android:text="@string/item_person"/> 
  74. </LinearLayout> 

代码

  1. mTHome.setOnClickListener(this); 
  2.     mTLocation.setOnClickListener(this); 
  3.     mTLike.setOnClickListener(this); 
  4.     mTMe.setOnClickListener(this); 
  5.     setDefaultFragment();//设置默认显示Fragment 
  6.          
  7.     @Override 
  8.     public void onClick(View view) { 
  9.         resetTabState();//reset the tab state 
  10.         switch (view.getId()) { 
  11.             case R.id.tv_home: 
  12.                 setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态 
  13.                 switchFrgment(0);//切换Fragment 
  14.                 break; 
  15.             case R.id.tv_location: 
  16.                 setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary)); 
  17.                 switchFrgment(1); 
  18.                 break; 
  19.             case R.id.tv_like: 
  20.                 setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary)); 
  21.                 switchFrgment(2); 
  22.                 break; 
  23.             case R.id.tv_person: 
  24.                 setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary)); 
  25.                 switchFrgment(3); 
  26.                 break; 
  27.         } 
  28.     }  

Fragment的切换

  1. /** 
  2.      * switch the fragment accordting to id 
  3.      * @param i id 
  4.      */ 
  5.     private void switchFrgment(int i) { 
  6.         FragmentTransaction transaction = getChildFragmentManager().beginTransaction(); 
  7.         switch (i) { 
  8.             case 0: 
  9.                 if (mHomeFragment == null) { 
  10.                     mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home)); 
  11.                 } 
  12.                 transaction.replace(R.id.sub_content, mHomeFragment); 
  13.                 break; 
  14.             case 1: 
  15.                 if (mLocationFragment == null) { 
  16.                     mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location)); 
  17.                 } 
  18.                 transaction.replace(R.id.sub_content, mLocationFragment); 
  19.                 break; 
  20.             case 2: 
  21.                 if (mLikeFragment == null) { 
  22.                     mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like)); 
  23.                 } 
  24.                 transaction.replace(R.id.sub_content, mLikeFragment); 
  25.                 break; 
  26.             case 3: 
  27.                 if (mPersonFragment == null) { 
  28.                     mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person)); 
  29.                 } 
  30.                 transaction.replace(R.id.sub_content, mPersonFragment); 
  31.                 break; 
  32.         } 
  33.         transaction.commit(); 
  34.     }  

这里面值得注意的地方就是要用getChildFragmentManager(),否则会出现切换Fragment内容不显示的情况。

设置Tab状态

  1. /** 
  2.      * set the tab state of bottom navigation bar 
  3.      * 
  4.      * @param textView the text to be shown 
  5.      * @param image    the image 
  6.      * @param color    the text color 
  7.      */ 
  8.     private void setTabState(TextView textView, int image, int color) { 
  9.         textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17 
  10.         textView.setTextColor(color); 
  11.     } 
  12.  
  13.  
  14.  
  15.     /** 
  16.      * revert the image color and text color to black 
  17.      */ 
  18.     private void resetTabState() { 
  19.         setTabState(mTHome, R.drawable.home, getColor(R.color.black_1)); 
  20.         setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1)); 
  21.         setTabState(mTLike, R.drawable.like, getColor(R.color.black_1)); 
  22.         setTabState(mTMe, R.drawable.person, getColor(R.color.black_1)); 
  23.  
  24.     }  

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

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

2016-12-07 10:27:16

移动应用开发底部导航android

2016-12-07 10:18:44

移动应用开发底部导航android

2016-12-07 10:58:35

移动应用开发底部导航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

2017-04-20 12:45:08

AndroidTextView

2021-01-28 06:11:40

导航组件Sidenav Javascript

2009-06-24 09:36:52

XML实现breadcMVC

2012-12-28 14:23:12

Android开发TextView

2021-06-04 17:30:50

iOS导航栏方案

2017-04-28 09:58:21

AndroidLinearLayou宽高

2020-11-23 14:29:22

Android 10窗口代码

2013-04-07 10:09:00

Android开发TextView属性

2017-02-17 11:00:57

状态栏Android

2013-01-14 17:05:55

UCUI设计菜单栏

2023-06-06 15:38:28

HTMLCSS开发

2022-02-11 14:48:57

Chrome谷歌下载栏
点赞
收藏

51CTO技术栈公众号