开源地址:https://github.com/roughike/BottomBar
PS:如果觉得这个系列的每篇文章太长,那就直接看视频吧
运行效果
使用步骤
1. 在Module的build.gradle添加依赖
compile 'com.roughike:bottom-bar:2.0.2'
2. 创建底部Tab的配置文件res/xml/bottombar_tabs.xml:
<tabs> <tab id="@+id/tab_favorites" icon="@drawable/ic_favorites" title="Favorites" barColorWhenSelected="#5D4037" /> <tab id="@+id/tab_nearby" icon="@drawable/ic_nearby" title="Nearby" barColorWhenSelected="#5D4037" /> <tab id="@+id/tab_friends" icon="@drawable/ic_friends" title="Friends" barColorWhenSelected="#5D4037" /></tabs>
icon:Tab的图片,注意图片不能是透明的,不能存在padding, 可使用Generic Icon Generator生成,
选择“Trim”, Padding设置为0dpbarColorWhenSelected: 当Tab被选中时BottomBar的背景颜色
3. 在布局中添加BottomBar
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <!-- This could be your fragment container, or something --> <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_inActiveTabColor="#222222" app:bb_activeTabColor="@color/colorPrimary" app:bb_tabXmlResource="@xml/bottombar_tabs" /></RelativeLayout>
bb_tabXmlResource: 指定BottomBar底部Tab的布局文件
bb_inActiveTabColor: 设置未选中Tab的文本颜色
bb_activeTabColor:设置选中Tab的文本颜色
4. 设置点击监听
public class MainActivity extends Activity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar); bottomBar.setOnTabSelectListener(new OnTabSelectListener() { @Override public void onTabSelected(@IdRes int tabId) { if (tabId == R.id.tab_favorites) { // The tab with id R.id.tab_favorites was selected, // change your content accordingly. } } }); } }
作者:马伟奇
链接:https://www.jianshu.com/p/c94584b72635