在Android应用中,底部导航栏是一个为用户提供快速导航至常用页面的次级菜单。本教程将使用Android Bottom Bar库来实现一个模仿Google Material Design底部导航模式的应用。以下是详细的步骤说明。
首先,需要配置项目并解决依赖问题。完成后,继续下一步。
打开IDE,选择“文件”→“新建”→“新建项目”,并输入应用名称。
输入公司域名,这将用于全球唯一标识应用包。选择项目位置和最小SDK版本,然后在下一个屏幕中选择“空活动”,因为将自行添加大部分代码。点击“下一步”。
选择一个活动名称,并确保选中“生成布局文件”复选框,否则需要自己生成它。完成后点击“完成”。使用了“MainActivity”作为活动名称,因为这将是用户首次打开应用时的默认屏幕。
打开项目根目录下的build.gradle文件,并添加以下依赖:
compile 'com.roughike:bottom-bar:2.0'
打开activity_main.xml文件,并添加以下代码。有两个文本视图,一个用于显示登录用户的名称,另一个用于显示电子邮件。
<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">
<FrameLayout
android:id="@+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:textStyle="bold"
android:gravity="center_horizontal"/>
</FrameLayout>
<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/navigation_bar_menu"
app:bb_behavior="underNavbar"/>
</RelativeLayout>
以下是三个菜单选项使用的Drawable资源。
<tabs>
<tab
id="@+id/tab_calls"
icon="@drawable/ic_calls"
title="Calls"
activeColor="@color/colorAccent"/>
<tab
id="@+id/tab_groups"
icon="@drawable/ic_groups"
title="Groups"
activeColor="@color/colorAccent"/>
<tab
id="@+id/tab_chats"
icon="@drawable/ic_chats"
title="Chats"
activeColor="@color/colorAccent"/>
</tabs>
创建一个新的XML资源文件navigation_bar_menu.xml,并添加上述代码。
下载本Android底部导航栏菜单应用的源代码,并将源代码中的Drawable资源添加到drawable文件夹中。
定义一个样式,使其成为主应用程序主题的子主题:
<style name="AppTheme.TransNav" parent="AppTheme">
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
为了避免在Lollipop之前的API级别上崩溃,创建一个相同主题的存根版本。
<style name="AppTheme.TransNav" parent="AppTheme"/>
在AndroidManifest.xml文件中为活动应用主题。
<activity android:name=".MainActivity" android:theme="@style/AppTheme.TransNav"/>
private TextView textView;
private BottomBar bottomBar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView)findViewById(R.id.textView);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(@IdRes int tabId) {
if (tabId == R.id.tab_calls) {
textView.setText("Your Calls");
} else if (tabId == R.id.tab_groups) {
textView.setText("Your Groups");
} else if (tabId == R.id.tab_chats) {
textView.setText("Your Chats");
}
}
});
}