【BottomBar】Android底部导航栏V2.0

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

效果图：

先导包，在Gradle 加上依赖：

compile ‘com.roughike:bottom-bar:2.3.1’

1.创建一个res/xml/bottombar_menu.xml

<?xml version="1.0" encoding="utf-8"?>    "@+id/tab_home"        title="首页"        icon="@drawable/selector_home_selected"    />    "@+id/tab_category"        title="分类"        icon="@drawable/selector_category_selected"        />    "@+id/tab_shopcart"        title="购物车"        icon="@drawable/selector_shopcart_selected"        />    "@+id/tab_contact"        title="我的"        icon="@drawable/selector_contact_selected"        />

Tab的一些属性

tab的属性	含义
id	tab的id
icon	tab的icon
inActiveColor	未被选择时，标签的颜色
activeColor	被选择时，标签的颜色
barColorWhenSelected	当该标签被选择时，整个 BottomBar 的背景色
badgeBackgroundColor	设置 Badges 的背景色，右上角显示数字那个
badgeHidesWhenActive	是否应该隐藏徽章

icon里可以设置一张图片，但是我们要实现不同的切换效果，所以我们这里指定了一个选择器，以下就是代码，另外三个以此类推

<?xml version="1.0" encoding="utf-8"?><selector    xmlns:android="http://schemas.android.com/apk/res/android"    >        <item        android:state_selected="true"        android:drawable="@drawable/home_icon_select"        />        <item        android:state_selected="false"        android:drawable="@drawable/home_icon_normal"        />selector>

2.在布局文件中设置 BottomBar

<com.roughike.bottombar.BottomBar        android:id="@+id/BottomBar"        android:layout_width="match_parent"        android:layout_height="56dp"        android:layout_alignParentBottom="true"        app:bb_behavior="underNavbar"       app:bb_tabXmlResource="@xml/bottombar_menu"        />    "@+id/ContentContainer"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/BottomBar"        />

BottomBar 的属性

属性	含义
bb_tabXmlResource	设置标签的 xml 资源标识，在 res/xml/ 目录下
bb_tabletMode	是否是平板模式
bb_behavior	underNavbar: 正常模式（默认）shifting: 选定的标签比其他的更宽。shy: 滚动隐藏！（需要特定的布局）
bb_inActiveTabAlpha	没选中时标签的透明度
bb_activeTabAlpha	选中时标签的透明度
bb_inActiveTabColor	没选时标签的颜色
bb_activeTabColor	选中时标签的颜色
bb_badgeBackgroundColor	设置 Badges 的背景色，右上角显示数字那个
bb_badgesHideWhenActive	小红点是否隐藏，右上角显示数字那个
bb_titleTextAppearance	利用 style 重新设置自定的格式
bb_titleTypeFace	设置自定的字体
bb_showShadow	控制阴影是否显示或隐藏

3.在 Activity 中设置点击之后的操作，这里只设置一个，其他三个由此类推

bottomBar.setOnTabSelectListener(new OnTabSelectListener() {            @Override            public void onTabSelected(@IdRes int tabId) {                switch (tabId){                    case R.id.tab_home:                        replaceFragment(null == homeFragment ? homeFragment = HomeFragment.newInstance() : homeFragment);                        break;

到这里，最基本的显示就已经实现了。还有很多功能没有完善，比如滚动隐藏、平板模式、角标显示等等。这些都由你们自己去研究把，最后贴一些部分代码。

实例化Fragment

public static HomeFragment newInstance() {        Bundle args = new Bundle();        HomeFragment fragment = new HomeFragment();        fragment.setArguments(args);        return fragment;    }

自定义方法填充Fragment

private void replaceFragment(Fragment fragment) {        FragmentManager fm = getFragmentManager();        transaction = fm.beginTransaction();        transaction.replace(R.id.ContentContainer, fragment);        transaction.commit();    }

Tab的一些属性

icon里可以设置一张图片，但是我们要实现不同的切换效果，所以我们这里指定了一个选择器，以下就是代码，另外三个以此类推

BottomBar 的属性

更多相关文章

随机推荐