Skip to content

底部导航栏与页面切换联动布局

activity_main.xml

xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav" />

</LinearLayout>

创建导航栏item图标

右键 res 文件夹,New --> Vector Asset,选取图标并添加
至于要多少个和要什么看要创建多少个导航栏项和创建什么导航栏项

创建 Menu

右键 res 文件夹,New --> Android Resource File
在弹出页面中:

  • File name : Fragment 文件的名字
  • Resource type : 选择 Menu
    单击 OK 即可创建

在新创建的 xml 文件中,写入代码:

xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/baseline_home_24" />

    <item
        android:id="@+id/debug"
        android:title="Debug"
        android:icon="@drawable/baseline_adb_24" />

    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@drawable/baseline_settings_24" />
</menu>

创建导航项 Fragment

右键 layout 文件夹,New --> Fragment --> Fragment (Blank)
写入想要的名字创建即可(不推荐手动更改 Fragment Layout Name

创建 ViewPagerAdapter 适配器

新建文件:java/<包名文件夹>/ViewPagerAdapter.java

写入代码:

java
package com.example.nav;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

// 继承自 FragmentStateAdapter,用于将多个Fragment适配到ViewPager2中
public class ViewPagerAdapter extends FragmentStateAdapter {

    // 接收一个FragmentActivity作为参数,并将其传递给父类FragmentStateAdapter,以便管理Fragment的生命周期
    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    // 根据ViewPager2当前的位置,返回对应的Fragment实例
    public Fragment createFragment(int position) {
        switch (position) {
            case 0: return new HomeFragment();
            case 1: return new DebugFragment();
            case 2: return new SettingsFragment();
            default: return new HomeFragment();
        }
    }

    @Override
    // 返回适配器管理的Fragment数量
    public int getItemCount() {
        return 3;
    }
}

编写 MainActivity.java 文件

打开文件:java/<包名文件夹>/MainActivity.java

改写内容:

java
package com.example.nav;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    ViewPager2 viewPager2; 
    ViewPagerAdapter viewPagerAdapter; 
    BottomNavigationView bottomNavigationView; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 从activity_main中获取BottomNavigationView的实例
        bottomNavigationView = findViewById(R.id.bottomNav); 
        // 从activity_main中获取ViewPager2的实例
        viewPager2 = findViewById(R.id.viewPager); 

        // 初始化ViewPagerAdapter并将其与ViewPager2关联
        viewPagerAdapter = new ViewPagerAdapter(this); 
        // 将适配器设置给ViewPager2,实现在ViewPager2中显示页面
        viewPager2.setAdapter(viewPagerAdapter); 

        // 底部导航栏事件监听
        bottomNavigationView.setOnItemSelectedListener(item -> { 
            int id = item.getItemId(); 
            // 页面匹配切换(不能使用switch,改用if)
            if (id == R.id.home) { 
                viewPager2.setCurrentItem(0); 
            } else if (id == R.id.debug) { 
                viewPager2.setCurrentItem(1); 
            } else if (id == R.id.settings) { 
                viewPager2.setCurrentItem(2); 
            } 
            return false; 
        }); 

        // 页面切换的回调,更新底部导航栏的选中状态
        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { 
            @Override
            public void onPageSelected(int position) { 
                switch (position) { 
                    case 0:
                        bottomNavigationView.getMenu().findItem(R.id.home).setChecked(true); 
                        break; 
                    case 1:
                        bottomNavigationView.getMenu().findItem(R.id.debug).setChecked(true); 
                        break; 
                    case 2:
                        bottomNavigationView.getMenu().findItem(R.id.settings).setChecked(true); 
                        break; 
                } 
                super.onPageSelected(position); 
            } 
        }); 
    }
}

启动

编写完没有错误即可编译软件至虚拟机进行查看