五种方式实现Android底部导航栏

底部导航栏目前基本上每个app必备的。一般放到首页的,来显示app整个内容的框架。

效果图

实现导航栏的五种方式

如上图导航栏上显示的,这里面我总结了这几种,下面会就这几种方式一一记录到文章中。其中TabHost这种方法比较老,就不再记录了。

Android底部导航栏实现(一)之BottomNavigationBar

BottomNavigationBar这个控件的使用之前已经写过,这里不再赘述,详情请参考BottomNavigationBar的使用

下面直接上代码:

初始化及相关设置:

  1. mBottomNavigationBar = (BottomNavigationBar) view.findViewById(R.id.bottom_navigation_bar);
  2. mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
  3. mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
  4. mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.home_fill, getString(R.string.item_home)).setInactiveIconResource(R.drawable.home).setActiveColorResource(R.color.colorPrimary).setInActiveColorResource(R.color.black_1))
  5.         .addItem(new BottomNavigationItem(R.drawable.location_fill, getString(R.string.item_location)).setInactiveIconResource(R.drawable.location).setActiveColorResource(R.color.colorPrimary).setInActiveColorResource(R.color.black_1))
  6.         .addItem(new BottomNavigationItem(R.drawable.like_fill, getString(R.string.item_like)).setInactiveIconResource(R.drawable.like).setActiveColorResource(R.color.colorPrimary).setInActiveColorResource(R.color.black_1))
  7.         .addItem(new BottomNavigationItem(R.drawable.person_fill, getString(R.string.item_person)).setInactiveIconResource(R.drawable.person).setActiveColorResource(R.color.colorPrimary).setInActiveColorResource(R.color.black_1))
  8.         .setFirstSelectedPosition(0)
  9.         .initialise();
  10. mBottomNavigationBar.setTabSelectedListener(this);
  11. setDefaultFragment();

Tab的切换:

  1. @Override
  2.     public void onTabSelected(int position) {
  3.         FragmentTransaction beginTransaction = getFragmentManager().beginTransaction();
  4.         switch (position) {
  5.             case 0:
  6.                 if (mHomeFragment == null) {
  7.                     mHomeFragment = HomeFragment.newInstance(getString(R.string.item_home));
  8.                 }
  9.                 beginTransaction.replace(R.id.sub_content, mHomeFragment);
  10.                 break;
  11.             case 1:
  12.                 if (mLocationFragment == null) {
  13.                     mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));
  14.                 }
  15.                 beginTransaction.replace(R.id.sub_content, mLocationFragment);
  16.                 break;
  17.             case 2:
  18.                 if (mLikeFragment == null) {
  19.                     mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));
  20.                 }
  21.                 beginTransaction.replace(R.id.sub_content, mLikeFragment);
  22.                 break;
  23.             case 3:
  24.                 if (mPersonFragment == null) {
  25.                     mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));
  26.                 }
  27.                 beginTransaction.replace(R.id.sub_content, mPersonFragment);
  28.         }
  29.         beginTransaction.commit();
  30.     }

Android底部导航栏实现(二)之RadioGroup

这里简单记录一下Android底部导航栏通过RadioGroup+Fragment的实现。

布局:

  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  3.                 android:layout_width=“match_parent”
  4.                 android:layout_height=“match_parent”
  5.                 android:orientation=“vertical”>
  6.     <include layout=“@layout/fragment_content”/>
  7.     <View
  8.         android:layout_width=“match_parent”
  9.         android:layout_height=“1px”
  10.         android:background=“@color/grey_300”
  11.         android:elevation=“20dp”/>
  12.     <RadioGroup
  13.         android:id=“@+id/radio_group”
  14.         android:layout_width=“match_parent”
  15.         android:layout_height=“56dp”
  16.         android:layout_alignParentBottom=“true”
  17.         android:background=“@color/white”
  18.         android:orientation=“horizontal”>
  19.         <RadioButton
  20.             android:id=“@+id/rb_home”
  21.             style=“@style/radiobutton_style”
  22.             android:checked=“true”
  23.             android:drawableTop=“@drawable/radiobutton_bg_home”
  24.             android:text=“@string/item_home”
  25.             />
  26.         <RadioButton
  27.             android:id=“@+id/rb_location”
  28.             style=“@style/radiobutton_style”
  29.             android:drawableTop=“@drawable/radiobutton_bg_location”
  30.             android:text=“@string/item_location”/>
  31.         <RadioButton
  32.             android:id=“@+id/rb_like”
  33.             style=“@style/radiobutton_style”
  34.             android:drawableTop=“@drawable/radiobutton_bg_like”
  35.             android:text=“@string/item_like”/>
  36.         <RadioButton
  37.             android:id=“@+id/rb_me”
  38.             style=“@style/radiobutton_style”
  39.             android:drawableTop=“@drawable/radiobutton_bg_me”
  40.             android:text=“@string/item_person”/>
  41.     </RadioGroup>
  42. </RelativeLayout>

这里的drawableTop使用了状态选择器

  1. <selector xmlns:android=“http://schemas.android.com/apk/res/android”>
  2.     <item android:drawable=“@drawable/home_fill” android:state_checked=“true”/>
  3.     <item android:drawable=“@drawable/home”/>
  4. </selector>

style

  1. <style name=“radiobutton_style”>
  2.         <item name=“android:layout_width”>0dp</item>
  3.         <item name=“android:padding”>3dp</item>
  4.         <item name=“android:layout_height”>match_parent</item>
  5.         <item name=“android:layout_weight”>1</item>
  6.         <item name=“android:button”>@null</item><!–去除RadioButton默认带的圆点–>
  7.         <item name=“android:gravity”>center</item>
  8.         <item name=“android:textSize”>12sp</item>
  9.     </style>

代码

初始化的代码就不记录了,都是一些findViewById,实现过程无非就是对RadioButton进行监听一下:

  1. mRadioGroup.setOnCheckedChangeListener(this);
  2.     @Override
  3.     public void onCheckedChanged(RadioGroup groupint checkId) {
  4.         FragmentTransaction transaction = getFragmentManager().beginTransaction();
  5.         switch (checkId) {
  6.             case R.id.rb_home:
  7.                 if (mHomeFragment == null) {
  8.                     mHomeFragment = HomeFragment.newInstance(getString(R.string.item_home));
  9.                 }
  10.                 transaction.replace(R.id.sub_content, mHomeFragment);
  11.                 break;
  12.             case R.id.rb_location:
  13.                 if (mLocationFragment == null) {
  14.                     mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));
  15.                 }
  16.                 transaction.replace(R.id.sub_content, mLocationFragment);
  17.                 break;
  18.             case R.id.rb_like:
  19.                 if (mLikeFragment == null) {
  20.                     mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));
  21.                 }
  22.                 transaction.replace(R.id.sub_content, mLikeFragment);
  23.                 break;
  24.             case R.id.rb_me:
  25.                 if (mPersonFragment == null) {
  26.                     mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));
  27.                 }
  28.                 transaction.replace(R.id.sub_content, mPersonFragment);
  29.                 break;
  30.         }
  31.         setTabState();//设置状态
  32.         transaction.commit();
  33.     }

状态的设置

  1. private void setTabState() {
  2.         setHomeState();
  3.         setLocationState();
  4.         setLikeState();
  5.         setMeState();
  6.     }
  7.     /**
  8.      * set tab home state
  9.      */
  10.     private void setHomeState() {
  11.         if (mRadioHome.isChecked()) {
  12.             mRadioHome.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
  13.         } else {
  14.             mRadioHome.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
  15.         }
  16.     }
  17.     private void setLocationState() {
  18.         if (mRadioLocation.isChecked()) {
  19.             mRadioLocation.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
  20.         } else {
  21.             mRadioLocation.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
  22.         }
  23.     }
  24.     private void setLikeState() {
  25.         if (mRadioLike.isChecked()) {
  26.             mRadioLike.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
  27.         } else {
  28.             mRadioLike.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
  29.         }
  30.     }
  31.     private void setMeState() {
  32.         if (mRadioMe.isChecked()) {
  33.             mRadioMe.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
  34.         } else {
  35.             mRadioMe.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
  36.         }
  37.     }

这里需要注意的是, setDefaultFragment();我写在onCreateVew里面并没有生效。这里我写在了onStart()方法里了。

  1. @Override
  2.    public void onStart() {
  3.        setDefaultFragment();//写在onCreateView里面,当页面跑到其他Fragment再回来就不会生效
  4.        super.onStart();
  5.    }

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

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

布局

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

代码

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

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.      * revert the image color and text color to black
  14.      */
  15.     private void resetTabState() {
  16.         setTabState(mTHome, R.drawable.home, getColor(R.color.black_1));
  17.         setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1));
  18.         setTabState(mTLike, R.drawable.like, getColor(R.color.black_1));
  19.         setTabState(mTMe, R.drawable.person, getColor(R.color.black_1));
  20.     }

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

这里简单记录一下通过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.     <include layout=“@layout/fragment_content”/>
  8.     <LinearLayout
  9.         android:layout_width=“match_parent”
  10.         android:layout_height=“match_parent”
  11.         android:orientation=“vertical”>
  12.         <android.support.v4.view.ViewPager
  13.             android:id=“@+id/view_pager”
  14.             android:layout_width=“match_parent”
  15.             android:layout_height=“0dp”
  16.             android:layout_weight=“1”></android.support.v4.view.ViewPager>
  17.         <android.support.design.widget.TabLayout
  18.             android:id=“@+id/tab_layout”
  19.             android:layout_width=“match_parent”
  20.             android:layout_height=“56dp”
  21.             app:tabBackground=“@color/white”
  22.             app:tabIndicatorHeight=“0dp”
  23.             app:tabSelectedTextColor=“@color/colorPrimary”
  24.             app:tabTextAppearance=“@style/tabTextSizeStyle”
  25.             app:tabTextColor=“@color/black_1”></android.support.design.widget.TabLayout>
  26.     </LinearLayout>
  27. </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.    @Override
  6.    public void onTabUnselected(TabLayout.Tab tab) {
  7.        setTabUnSelectedState(tab);
  8.    }
  9.    @Override
  10.    public void onTabReselected(TabLayout.Tab tab) {
  11.    }
  12. private void setTabSelectedState(TabLayout.Tab tab) {
  13.        View customView = tab.getCustomView();
  14.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
  15.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
  16.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
  17.        String s = tabText.getText().toString();
  18.        if (getString(R.string.item_home).equals(s)) {
  19.            tabIcon.setImageResource(R.drawable.home_fill);
  20.        } else if (getString(R.string.item_location).equals(s)) {
  21.            tabIcon.setImageResource(R.drawable.location_fill);
  22.        } else if (getString(R.string.item_like).equals(s)) {
  23.            tabIcon.setImageResource(R.drawable.like_fill);
  24.        } else if (getString(R.string.item_person).equals(s)) {
  25.            tabIcon.setImageResource(R.drawable.person_fill);
  26.        }
  27.    }
  28.    private void setTabUnSelectedState(TabLayout.Tab tab) {
  29.        View customView = tab.getCustomView();
  30.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
  31.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
  32.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1));
  33.        String s = tabText.getText().toString();
  34.        if (getString(R.string.item_home).equals(s)) {
  35.            tabIcon.setImageResource(R.drawable.home);
  36.        } else if (getString(R.string.item_location).equals(s)) {
  37.            tabIcon.setImageResource(R.drawable.location);
  38.        } else if (getString(R.string.item_like).equals(s)) {
  39.            tabIcon.setImageResource(R.drawable.like);
  40.        } else if (getString(R.string.item_person).equals(s)) {
  41.            tabIcon.setImageResource(R.drawable.person);
  42.        }
  43.    }

这里面不用设置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. private void resetTabIcon() {
  23.         mTabLayout.getTabAt(0).setIcon(R.drawable.home);
  24.         mTabLayout.getTabAt(1).setIcon(R.drawable.location);
  25.         mTabLayout.getTabAt(2).setIcon(R.drawable.like);
  26.         mTabLayout.getTabAt(3).setIcon(R.drawable.person);
  27.     }

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

 

 

未经允许不得转载:JX BLOG » 五种方式实现Android底部导航栏

赞 (0)

评论 0

评论前必须登录!

登陆 注册