Android 底部导航栏菜单实现指南

Android应用中,底部导航栏是一个为用户提供快速导航至常用页面的次级菜单。本教程将使用Android Bottom Bar库来实现一个模仿Google Material Design底部导航模式的应用。以下是详细的步骤说明。

创建Android底部导航栏菜单应用

首先,需要配置项目并解决依赖问题。完成后,继续下一步。

打开IDE,选择“文件”→“新建”→“新建项目”,并输入应用名称。

输入公司域名,这将用于全球唯一标识应用包。选择项目位置和最小SDK版本,然后在下一个屏幕中选择“空活动”,因为将自行添加大部分代码。点击“下一步”。

选择一个活动名称,并确保选中“生成布局文件”复选框,否则需要自己生成它。完成后点击“完成”。使用了“MainActivity”作为活动名称,因为这将是用户首次打开应用时的默认屏幕。

打开项目根目录下的build.gradle文件,并添加以下依赖:

compile 'com.roughike:bottom-bar:2.0'

在应用布局中添加BottomBar

打开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资源和底部栏的样式

以下是三个菜单选项使用的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中应用主题

AndroidManifest.xml文件中为活动应用主题。

<activity android:name=".MainActivity" android:theme="@style/AppTheme.TransNav"/>

为MainActivity添加功能

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"); } } }); }
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485