项目中经常用到的一个模块，有需要自己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的布局文件
```
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@color/colorAccent"
>
</android.support.v7.widget.Toolbar>
<TextView
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"/>
<FrameLayout
android:id="@+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar" />
<com.roughike.bottombar.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"
/>
</RelativeLayout>
```
如果不需要点击时的动画效果，在布局文件中删除 app:bb_behavior="shifting"此行即可！
3.编写bottombar_tabs.xml (底部导航的布局文件，即第二步的 app:bb_tabXmlResource="@xml/bottombar_tabs")
在res下面新建名为xml的文件夹，新建bottombar_tabs.xml文件
<tabs>
<tab
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;
}
}
以上就完成了底部导航栏模块， 快运行起来瞧一瞧！！！
网友评论