项目中经常用到的一个模块,有需要自己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; } } 以上就完成了底部导航栏模块, 快运行起来瞧一瞧!!!