今天分享一个常用的控件:BottomBar
BottomBar作为一个开源的第三方控件,因其简单实用,且动画效果酷炫,用来作为android App的底部导航栏;
关于这方面的详解一直都有,此次进行重写是因为,该控件进行了版本升级,由原先的1.0版本升级到了现在的2.0版本,使用方法和配置设置发生了较大改变;
先看下bottombar的效果:
下面笔者会详细介绍其新版的使用方法:
1.导包:
在Module的Build中添加:
compile ‘com.roughike:bottom-bar:2.0.2’
2.配置XML文件
2.1配置资源文件:
在res/xml/创建:bottom_bar.xml
里面具体代码:
<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab
icon="@mipmap/ic_recents"
id="@+id/tab_recents"
title="Recents" />
<tab
icon="@mipmap/ic_favorites"
id="@+id/tab_favorites"
title="Favorites" />
<tab
icon="@mipmap/ic_nearby"
id="@+id/tab_nearby"
title="Nearby" />
<tab
icon="@mipmap/ic_friends"
id="@+id/tab_friends"
title="Friends" />
<tab
icon="@mipmap/ic_restaurants"
id="@+id/tab_food"
title="Food" />
</tabs>
2.2布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.mrzhou.bottombarsample.Main3Activity">
<LinearLayout
android:id="@+id/ll_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar"
android:orientation="horizontal">
</LinearLayout>
<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
app:bb_behavior="shifting"
app:bb_tabXmlResource="@xml/bottom_bars_five" />
</RelativeLayout>
3.java代码设置:
java代码中只需要:bottomBar = (BottomBar) findViewById(R.id.bottomBar);
下面详细介绍一下xml属性和java代码中主要的方法:
xml属性:
<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
app:bb_activeTabAlpha="0.5" 被选中状态的标签的颜色的透明度
app:bb_activeTabColor="@color/colorAccent" 被选中状态的标签的颜色
app:bb_behavior="shifting" 配合CoordinatorLayout使用,是否在界面滑动时隐藏底部导航栏
app:bb_inActiveTabAlpha="1" 默认状态的标签的颜色的透明度
app:bb_inActiveTabColor="@color/colorPrimary" 默认状态的标签的颜色的颜色
app:bb_tabXmlResource="@xml/bottom_bars_five" 关联资源文件:必须设置!!!!
app:bb_tabletMode="true" 模式:分为底部/竖向 true为竖向,默认为false
app:bb_titleTextAppearance="@style/CustomTitleTextAppearance" 设置字体的style
/>
Java代码:
主要方法:
getTabCount(); 返回底部标签个数
getTabAtPosition(int position);通过下标得到BottomBarTab
setDefaultTabPosition(int position) 设置底部导航栏默认显示位置
监听事件:
setOnTableSelectListener();
eg:
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(@IdRes int tabId) {
messageView.setText(TabMessage.get(tabId, true));
}
});
项目实战:配合Fragment实现界面导航:
与RadioGroup使用方式基本一致,主要需要的方法为:
1.getTabCount();
2.getTabAtPosition(int position);
3.setOnTableSelectListener();
笔者初步的封装了一个工具类:
public final class BottomBarTabUtils implements OnTabSelectListener {
private FragmentManager manager;
private FragmentTransaction transaction;
private BottomBar bottomBar;
private List<Fragment> fragments;
private int layoutId;
private static BottomBarTabUtils bottomBarTabUtils = null;
private BottomBarTabUtils() {
}
public static BottomBarTabUtils getInstance() {
if (bottomBarTabUtils == null) {
bottomBarTabUtils = new BottomBarTabUtils();
}
return bottomBarTabUtils;
}
public void tabUtils(FragmentManager manager, BottomBar bottomBar, List<Fragment> fragments, int layoutId) {
this.manager = manager;
this.bottomBar = bottomBar;
this.fragments = fragments;
this.layoutId = layoutId;
bottomBar.setOnTabSelectListener(this);
}
@Override
public void onTabSelected(@IdRes int tabId) {
for (int i = 0; i < bottomBar.getTabCount(); i++) {
transaction = manager.beginTransaction();
if (bottomBar.getTabAtPosition(i).getId() == tabId) {
Fragment fragment = fragments.get(i);
for (int i1 = 0; i1 < fragments.size(); i1++) {
if (i1 == i) {
if (!fragment.isAdded()) {
transaction.add(layoutId, fragment);
}
transaction.show(fragment);
} else {
transaction.hide(fragments.get(i1));
}
}
}
transaction.commit();
}
}
}
此次BottomBar 2.0新版的使用,就为大家分析到这,2.0版本相对于1.0的版本使用更加简化,增加了布局中直接添加控件的办法,使用起来更加直观!至于其他方法
这是笔者第一次发技术类的博客,文笔和格局可能欠缺,希望大家斧正,若有技术方面问题,可以与笔者沟通交流,十分感谢!!!