Android大作业（二）——顶部导航栏和底部导航栏

Android大作业（二）——顶部导航栏和底部导航栏

目录

Android大作业（二）——顶部导航栏和底部导航栏

效果

一、底部导航栏

二、顶部导航栏

---

效果

        顶部导航栏和底部导航栏，能够跳转不同页面，效果如下：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、底部导航栏

        在layout创建四个fragment，我命名为fragment_home、fragment_book、fragment_view、fragment_user。

        其页面按自己喜好布置，同时需要在创建四个fragment对应的java类，重写其onCreateView方法，这里以UserFragment为例，代码如下：

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);
    }
}

        之后在res目录下新建menu目录，在其中添加xml文件bottom_nav_menu.xml，代码如下：

<?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>

         再新建一个目录叫navigation，添加文件mobile_navigation.xml,代码如下：

<?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>

        新建一个Activity，引用底部导航栏，其layout文件代码如下：

<?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>

        其Java文件代码如下：

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);
    }
}

         至此底部导航栏便完成了。

二、顶部导航栏

        在开始前，需要在res目录中的value目录里的themes目录中添加主题，加入下面这个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>

        原先创建工程后给出的主题parent="Theme.MaterialComponents.DayNight.DarkActionBar"

最后以DarkActionBar结尾，将其改为NoActionBar也一样可以。

        在AndroidManifest.xml中配置主题：

<activity
            android:name=".ui.MainActivity"
            android:exported="true"
            android:theme="@style/AppTheme">
        </activity>

        然后修改fragment的java代码，下面给出了一个示例：

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
//    }
}

        在对应的layout中要加入toolbar的标签：

<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"/>

        这样便完成了。