Android底部导航栏

项目中经常用到的一个模块，有需要自己get哟！！！

二话不说先上图，没图说个cz！！！

底部导航栏效果图

如果有帮到你，那么请继续！

项目的GitHub地址：https://github.com/roughike/BottomBar

需要示例中沉浸式状态栏效果的请移步：https://www.jianshu.com/p/c93cf1f07ab4

1.添加依赖

在build.gradle(app)的dependencies中添加

compile  'com.roughike:bottom-bar:2.3.1'

2.编写MainActivity的布局文件

```

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

        android:id="@+id/toolbar1"

        android:layout_width="match_parent"

        android:layout_height="30dp"

        android:background="@color/colorAccent"

        >

   

   

        android:id="@+id/top_tv"

        android:layout_below="@id/toolbar1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:textSize="16sp"

        android:text="首页"

        android:textColor="#fff"

        android:gravity="center"

        android:background="@color/colorAccent"/>

   

        android:id="@+id/contentContainer"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_above="@+id/bottomBar" />

   

        android:id="@+id/bottomBar"

        android:layout_width="match_parent"

        android:layout_height="60dp"

        android:layout_alignParentBottom="true"

        app:bb_tabXmlResource="@xml/bottombar_tabs"

        android:background="#fff"

        app:bb_behavior="shifting"

        app:bb_inActiveTabColor="#888888"

        app:bb_activeTabColor="#000000"

        />

```

如果不需要点击时的动画效果，在布局文件中删除 app:bb_behavior="shifting"此行即可！

3.编写bottombar_tabs.xml (底部导航的布局文件，即第二步的 app:bb_tabXmlResource="@xml/bottombar_tabs")

在res下面新建名为xml的文件夹，新建bottombar_tabs.xml文件

   

        id="@+id/tab_home"

        icon="@mipmap/ic_home"

        title="首页"

        badgeHidesWhenActive="true"

        />

        id="@+id/tab_vip"

        icon="@mipmap/ic_vip"

        title="会员"

        badgeHidesWhenActive="true"

        />

        id="@+id/tab_msg"

        icon="@mipmap/ic_msg"

        title="消息"

        badgeHidesWhenActive="true"

        />

        id="@+id/tab_my"

        icon="@mipmap/ic_my"

        title="我的"

        />

4.初始化控件以及监听事件

4.1 BottomBar bottomBar = findViewById(R.id.bottomBar);

4.2 监听事件

代码中case后面的控件id为bottombar_tabs.xml中的id

private void initBottomBar() {

bottomBar.setOnTabSelectListener(new OnTabSelectListener() {

@Override

            public void onTabSelected(@IdRes int tabId) {

switch (tabId) {

case R.id.tab_home:

if (null ==fragmentHome) {

fragmentHome = FragmentHome.newInstance();

                        }

replaceFragment(fragmentHome);

                        tv.setText("首页");

//                        Utils.PalyMusic(getApplication());

//                        Utils.vibrate(getApplication());

                        break;

                    case R.id.tab_vip:

if (null ==fragmentVip) {

fragmentVip = FragmentVip.newInstance();

                        }

replaceFragment(fragmentVip);

                        tv.setText("会员精选");

break;

                    case R.id.tab_msg:

if (null ==fragmentMsg) {

fragmentMsg = FragmentMsg.newInstance();

                        }

replaceFragment(fragmentMsg);

                        tv.setText("消息");

break;

                    case R.id.tab_my:

if (null ==fragmentMy) {

fragmentMy = FragmentMy.newInstance();

                        }

replaceFragment(fragmentMy);

                        tv.setText("个人中心");

break;

                }

}

});

    }

5.编写Fragment

public class FragmentMsgextends Fragment {

private PhotoViewpv;

    public FragmentMsg(){

}

public static FragmentMsgnewInstance(){

FragmentMsg fragmentHome =new FragmentMsg();

        return fragmentHome;

    }

@Override

    public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

    }

@Nullable

@Override

    public ViewonCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.msg_fragment,container,false);

//        pv = view.findViewById(R.id.photo_view);

//        pv.setImageResource(R.drawable.a);

        return view;

    }

}

以上就完成了底部导航栏模块， 快运行起来瞧一瞧！！！