Android使用BottomNavigationBar实现底部导航栏 轻松拿下任何需求 特效十足~~~~

原创 2018年04月16日 10:02:34

展示

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

DE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

 

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果





1在Gradle中添加

compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’

2布局实现

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_gravity="bottom"
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

3类中Activity中添加BottomNavigationItem

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();

4设置事件监听器TabChangeListener

 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
            @Override
            public void onTabSelected(int position) {
            }
            @Override
            public void onTabUnselected(int position) {]
            }
            @Override
            public void onTabReselected(int position) {
            }
        });

5.代码实现

[java] view plain copy
  1. package com.android.xiaobai;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.annotation.Nullable;  
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentTransaction;  
  8. import android.support.v7.app.AppCompatActivity;  
  9. import android.util.Log;  
  10.   
  11. import com.ashokvarma.bottomnavigation.BottomNavigationBar;  
  12. import com.ashokvarma.bottomnavigation.BottomNavigationItem;  
  13.   
  14. import java.util.ArrayList;  
  15.   
  16. import fragment.ContactsFragment;  
  17. import fragment.DongtaiFragment;  
  18. import fragment.MsgFragment;  
  19.   
  20. /** 
  21.  * Created by xiaobai on 2018/1/31/031. 
  22.  */  
  23.   
  24. public class MessageActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {  
  25.     private ArrayList<Fragment> fragments;  
  26.     private BottomNavigationBar bottomNavigationBar;  
  27.     private MsgFragment msgFragment;  
  28.     private ContactsFragment contactsFragment;  
  29.     private DongtaiFragment dongtaiFragment;  
  30.     private FragmentManager fragmentManager;  
  31.     private FragmentTransaction transaction;  
  32.     int lastSelectedPosition = 0;  
  33.   
  34.     @Override  
  35.     protected void onCreate(@Nullable Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         setContentView(R.layout.activty_message);  
  38.   
  39.         bottomNavigationBar = findViewById(R.id.bottom_navigation_bar);  
  40.         init();  
  41.     }  
  42.   
  43.     private void init() {  
  44.         //要先设计模式后再添加图标!  
  45.         //设置按钮模式  MODE_FIXED表示固定   MODE_SHIFTING表示转移  
  46.         bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);  
  47.         //设置背景风格  
  48.         // BACKGROUND_STYLE_STATIC表示静态的  
  49.         //BACKGROUND_STYLE_RIPPLE表示涟漪的,也就是可以变化的 ,跟随setActiveColor里面的颜色变化  
  50.         bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);  
  51.         //添加并设置图标、图标的颜色和文字  
  52.         bottomNavigationBar  
  53.                 .addItem(new BottomNavigationItem(R.drawable.im_botton_message, "消息")).setActiveColor(R.color.blue)  
  54.                 .addItem(new BottomNavigationItem(R.drawable.im_botton_contacts, "联系人")).setActiveColor(R.color.red)  
  55.                 .addItem(new BottomNavigationItem(R.drawable.im_botton_dongtai, "动态")).setActiveColor(R.color.orign)  
  56.                 .setFirstSelectedPosition(lastSelectedPosition )  
  57.                 .initialise();  
  58.   
  59.         bottomNavigationBar.setTabSelectedListener(this);  
  60.         setDefaultFragment();  
  61.     }  
  62.   
  63.     //设置初始界面  
  64.     private void setDefaultFragment() {  
  65.         fragmentManager = getSupportFragmentManager();  
  66.         transaction = fragmentManager.beginTransaction();  
  67.         transaction.replace(R.id.layFrame, MsgFragment.newInstance("消息"));  
  68.         transaction.commit();  
  69.     }  
  70.   
  71.     @Override  
  72.     public void onTabSelected(int position) {  
  73.         fragmentManager = getSupportFragmentManager();  
  74.         transaction = fragmentManager.beginTransaction();  
  75.         switch (position) {  
  76.             case 0:  
  77.                 if (msgFragment == null) {  
  78.                     msgFragment = MsgFragment.newInstance("消息");  
  79.                 }  
  80.                 transaction.replace(R.id.layFrame, msgFragment);  
  81.                 break;  
  82.             case 1:  
  83.                 if (contactsFragment == null) {  
  84.                     contactsFragment = ContactsFragment.newInstance("联系人");  
  85.                 }  
  86.                 transaction.replace(R.id.layFrame, contactsFragment);  
  87.                 break;  
  88.             case 2:  
  89.                 if (dongtaiFragment == null) {  
  90.                     dongtaiFragment = DongtaiFragment.newInstance("动态");  
  91.                 }  
  92.                 transaction.replace(R.id.layFrame, dongtaiFragment);  
  93.                 break;  
  94.             default:  
  95.                 break;  
  96.         }  
  97.         // 事务提交  
  98.         transaction.commit();  
  99.     }  
  100.   
  101.     @Override  
  102.     public void onTabUnselected(int position) {  
  103.         Log.d("dongtaiFragment""onTabUnselected() called with: " + "position = [" + position + "]");  
  104.     }  
  105.   
  106.     @Override  
  107.     public void onTabReselected(int position) {  
  108.   
  109.     }  
  110. }  

[java] view plain copy
  1. package fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.annotation.Nullable;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.TextView;  
  9.   
  10. import com.android.xiaobai.R;  
  11.   
  12. /** 
  13.  * Created by xiaobai on 2018/1/31/031. 
  14.  */  
  15.   
  16. public class MsgFragment extends BaseFragment {  
  17.     /** 
  18.      * 标志位,标志已经初始化完成 
  19.      */  
  20.     private boolean isPrepared;  
  21.     /** 
  22.      * 是否已被加载过一次,第二次就不再去请求数据了 
  23.      */  
  24.     private boolean mHasLoadedOnce;  
  25.     TextView textView;  
  26.     @Nullable  
  27.     @Override  
  28.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  29.         if (mView == null) {  
  30.             // 需要inflate一个布局文件 填充Fragment  
  31.             mView = inflater.inflate(R.layout.fragment_msg, container, false);  
  32.             initView();  
  33.             isPrepared = true;  
  34. //        实现懒加载  
  35.             lazyLoad();  
  36.         }  
  37.         //缓存的mView需要判断是否已经被加过parent, 如果有parent需要从parent删除,要不然会发生这个mView已经有parent的错误。  
  38.         ViewGroup parent = (ViewGroup) mView.getParent();  
  39.         if (parent != null) {  
  40.             parent.removeView(mView);  
  41.         }  
  42.   
  43.         return mView;  
  44.     }  
  45.     /** 
  46.      * 初始化控件 
  47.      */  
  48.     private void initView() {  
  49.   
  50.     }  
  51.   
  52.     @Override  
  53.     public void lazyLoad() {  
  54.         if (!isPrepared || !isVisible || mHasLoadedOnce) {  
  55.             return;  
  56.         }  
  57.         //填充各控件的数据  
  58.         mHasLoadedOnce = true;  
  59.     }  
  60.     public static MsgFragment newInstance(String param1) {  
  61.         MsgFragment fragment = new MsgFragment();  
  62.         Bundle args = new Bundle();  
  63.         args.putString("agrs1", param1);  
  64.         fragment.setArguments(args);  
  65.         return fragment;  
  66.     }  
  67. }  
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MessageActivity">  
  8.   
  9.     <FrameLayout  
  10.         android:id="@+id/layFrame"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="0dp"  
  13.         android:layout_weight="1" />  
  14.   
  15.     <com.ashokvarma.bottomnavigation.BottomNavigationBar  
  16.         android:id="@+id/bottom_navigation_bar"  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_gravity="bottom" />  
  20. </LinearLayout>  


[java] view plain copy
  1. package fragment;  
  2.   
  3. import android.support.v4.app.Fragment;  
  4. import android.view.View;  
  5.   
  6.   
  7. /** 
  8.  * Created by xiaobai on 2018/1/31/031. 
  9.  */  
  10.   
  11. public abstract class BaseFragment extends Fragment {  
  12.     /** 
  13.      * Fragment当前状态是否可见 
  14.      */  
  15.     public boolean isVisible;  
  16.   
  17.     /** 
  18.      * inflate布局文件 返回的view 
  19.      */  
  20.     public View mView;  
  21.   
  22.     /** 
  23.      * 简化 findViewById 
  24.      * 
  25.      * @param viewId 
  26.      * @param <T> 
  27.      * @return 
  28.      */  
  29.     protected <T extends View> T find(int viewId) {  
  30.         return (T) mView.findViewById(viewId);  
  31.     }  
  32.   
  33.     /** 
  34.      * setUserVisibleHint是在onCreateView之前调用的 
  35.      * 设置Fragment可见状态 
  36.      */  
  37.     @Override  
  38.     public void setUserVisibleHint(boolean isVisibleToUser) {  
  39.         super.setUserVisibleHint(isVisibleToUser);  
  40.         /** 
  41.          * 判断是否可见 
  42.          */  
  43.         if (getUserVisibleHint()) {  
  44.             isVisible = true;  
  45.             onVisible();  
  46.         } else {  
  47.             isVisible = false;  
  48.             onInvisible();  
  49.         }  
  50.     }  
  51.   
  52.     /** 
  53.      * 可见 
  54.      */  
  55.     private void onVisible() {  
  56.         lazyLoad();  
  57.     }  
  58.   
  59.     /** 
  60.      * 不可见 
  61.      */  
  62.     private void onInvisible() {  
  63.     }  
  64.   
  65.     /** 
  66.      * 延迟加载 
  67.      * 子类必须重写此方法 
  68.      */  
  69.     public abstract void lazyLoad();  
  70. }  

BottomNavigationBar 图标和文字的间距:

在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding(默认是10dp,值越小,间距越大。适合的模式是BottomNavigationBar.MODE_FIXED)

如果模式是BottomNavigationBar.MODE_SHIFTING也是一样,复写和修改相关的参数


Android底部导航BottomNavigationBar的使用

前言Android的底部导航栏,如下图 其实有多种实现方式,可以用RadioGroup,LinearLayout+TextVIew,也可以用TabHost实现。Google官方一直没有现成的导航...
  • baojie0327
  • baojie0327
  • 2017-11-10 09:15:39
  • 482

Android底部导航栏 BottomNavigationBar的简单使用

  • 2016年08月24日 16:40
  • 31.31MB
  • 下载

Android学习之BottomNavigationBar实现Android特色底部导航栏

Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Googl...
  • qq_16131393
  • qq_16131393
  • 2016-05-15 22:42:30
  • 30457

Android用BottomNavigationBar实现底部导航栏

之前底部导航栏的基本上都是自己通过selector来实现的,今天换上了Google推出的BottomNavigationBar,感觉效果还不错,写了一个项目上要用到的功能的demo,先上一张效果图,大...
  • lkjfyy
  • lkjfyy
  • 2017-12-28 16:43:44
  • 1857

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

BottomNavigationBar这个控件的使用之前已经写过,这里不再赘述,详情请参考BottomNavigationBar的使用。...
  • student9128
  • student9128
  • 2016-12-05 12:07:44
  • 4626

bottomnavigationsample

  • 2017年12月28日 16:27
  • 11.45MB
  • 下载

Android——BottomNavigationBar底部导航栏的快速实现

底部导航的快速实现,不用繁琐的LinearLayout或者RadioGroup等的那么多代码,简单,粗暴。1.基本使用a.在Android Studio下添加依赖:compile 'com.ashok...
  • Li_peilun
  • Li_peilun
  • 2017-11-01 20:04:56
  • 376

Android 底部导航栏 BottomNavigationBar

大部分app,都采用导航栏的方式,无论是顶部导航栏还是底部导航栏,这是一个app的根骨,本文是采用Google最近添加到Material design中的底部导航栏BottomNavigationBa...
  • QQ55214
  • QQ55214
  • 2016-11-11 11:12:20
  • 6056

Android底部导航栏实现

  • 2017年09月26日 16:01
  • 617KB
  • 下载

安卓 BottomNavigationBar 底部导航栏 最简单用法详解

底部导航栏有各种实现方法,下面看看最新的官方定制的标准 BottomNavigationBar 的使用方法:一、前奏1、BottomNavigation Github网址(适合能翻墙的同学): ht...
  • abs1004
  • abs1004
  • 2017-08-17 15:02:30
  • 2877
收藏助手
不良信息举报
您举报文章:Android使用BottomNavigationBar实现底部导航栏 轻松拿下任何需求 特效十足~~~~
举报原因:
原因补充:

(最多只允许输入30个字)