Android Big Job (2) - Top Navigation Bar and Bottom Navigation Bar
Table of contents
Android Big Job (2) - Top Navigation Bar and Bottom Navigation Bar
Effect
The top navigation bar and bottom navigation bar can jump to different pages. The effect is as follows:
提示：以下是本篇文章正文内容，下面案例可供参考
1. Bottom navigation bar
Create four fragments in the layout, which I named fragment_home, fragment_book, fragment_view, and fragment_user.
The page is arranged according to your own preferences. At the same time, you need to create four Java classes corresponding to fragments and rewrite their onCreateView method. Here, UserFragment is taken as an example. The code is as follows:
public class UserFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_user, container, false);
}
}After that, create a new menu directory in the res directory and add the xml file bottom_nav_menu.xml in it. The code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/home"
android:title="主页" />
<item
android:id="@+id/navigation_book"
android:icon="@drawable/book"
android:title="书架" />
<item
android:id="@+id/navigation_view"
android:icon="@drawable/view"
android:title="分类" />
<item
android:id="@+id/navigation_user"
android:icon="@drawable/user"
android:title="我的" />
</menu>Create a new directory called navigation, add the file mobile_navigation.xml, the code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
app:startDestination="@+id/navigation_home">
<fragment
android:id="@+id/navigation_home"
android:name="com.example.hotel.fragment.HomeFragment"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/navigation_book"
android:name="com.example.hotel.fragment.BookFragment"
tools:layout="@layout/fragment_book" />
<fragment
android:id="@+id/navigation_view"
android:name="com.example.hotel.fragment.ViewFragment"
tools:layout="@layout/fragment_view" />
<fragment
android:id="@+id/navigation_user"
android:name="com.example.hotel.fragment.UserFragment"
tools:layout="@layout/fragment_user" />
</navigation>
Create a new Activity, referencing the bottom navigation bar, and its layout file code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- android:paddingTop="?attr/actionBarSize">-->
<!-- 页面中显式fragment的容器-->
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
<!-- 底部导航栏 -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
The Java file code is as follows:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
// 获取页面上的底部导航栏控件
BottomNavigationView navView = findViewById(R.id.nav_view);
// 配置navigation与底部菜单之间的联系
// 底部菜单的样式里面的item里面的ID与navigation布局里面指定的ID必须相同，否则会出现绑定失败的情况
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home,R.id.navigation_book,R.id.navigation_view,R.id.navigation_user)
.build();
// 建立fragment容器的控制器
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
// 设置ActionBar为null，以使其在此处不使用ActionBar
setSupportActionBar(null);
NavigationUI.setupWithNavController(navView, navController);
}
}At this point, the bottom navigation bar is completed.
2. Top navigation bar
Before starting, you need to add a theme to the themes directory in the value directory in the res directory and add the following style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Primary brand color. -->
<item name="colorPrimary">@color/gray</item>
<item name="colorPrimaryVariant">@color/black_overlay</item>
<item name="colorOnPrimary">@color/bottom</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>The theme parent="Theme.MaterialComponents.DayNight.DarkActionBar" originally given after creating the project
Finally, it ends with DarkActionBar. Changing it to NoActionBar will work just as well.
Configure the theme in AndroidManifest.xml:
<activity
android:name=".ui.MainActivity"
android:exported="true"
android:theme="@style/AppTheme">
</activity>Then modify the fragment's java code. An example is given below:
public class BookFragment extends Fragment {
private Toolbar mToolbar;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_book, container, false);
// 初始化 Toolbar
mToolbar = view.findViewById(R.id.toolbar);
mToolbar.setTitle("书架");
// 设置 Toolbar 为 Fragment 的 ActionBar
((AppCompatActivity)getActivity()).setSupportActionBar(mToolbar);
setHasOptionsMenu(true);
return view;
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.bottom_nav_menu, menu);
super.onCreateOptionsMenu(menu, inflater);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_book:
// 点击了书架菜单项
openBookshelf();
return true;
case R.id.menu_browse_history:
// 点击了浏览历史菜单项
openBrowseHistory();
return true;
case R.id.menu_circle:
// 点击了圈子菜单项
openCircle();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
// private void openBookshelf() {
// // 打开书架页面
// xxx
// }
//
// private void openBrowseHistory() {
// // 打开浏览历史页面
// xxx
// }
//
// private void openCircle() {
// // 打开圈子页面
// xxx
// }
} Add the toolbar label to the corresponding layout:
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:background="@color/white"
android:layout_gravity="top"/>This is it.