Xamarin.Android实现底部Navbar切换上方布局的技术方案咨询

嗨，这个需求其实挺常见的，完全没必要给每个界面都单独创建Activity再重复加Navbar——那样不仅代码冗余，还会让界面切换的流畅度打折扣。下面给你两种实用的实现方案，都是在单个Activity里搞定的，Navbar只需要写一次：

方案一：Fragment + BottomNavigationView（推荐） #

这是最主流的实现方式，Fragment天生就是用来在同一个Activity中切换不同UI模块的，能完美解决你的问题。

步骤1：编写主布局文件 #

先定义整体结构：顶部用FrameLayout作为Fragment的容器，底部放BottomNavigationView导航栏。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 用来承载不同Fragment的容器 -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!-- 底部导航栏 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

步骤2：创建导航栏菜单 #

在res/menu目录下创建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/nav_home"
        android:icon="@drawable/ic_home"
        android:title="首页" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_profile"
        android:title="我的" />
    <item
        android:id="@+id/nav_settings"
        android:icon="@drawable/ic_settings"
        android:title="设置" />
</menu>

步骤3：创建对应Fragment #

为每个导航项创建独立的Fragment类，比如HomeFragment、ProfileFragment、SettingsFragment，每个Fragment对应自己的布局文件（比如fragment_home.xml）。

步骤4：在Activity中实现切换逻辑 #

在主Activity里初始化导航栏，监听点击事件，切换对应的Fragment：

public class MainActivity : AppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.activity_main);

        var bottomNav = FindViewById<BottomNavigationView>(Resource.Id.bottom_nav);
        bottomNav.NavigationItemSelected += BottomNav_NavigationItemSelected;

        // 默认加载首页Fragment
        LoadFragment(new HomeFragment());
    }

    private void BottomNav_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
    {
        Fragment selectedFragment = null;
        switch (e.Item.ItemId)
        {
            case Resource.Id.nav_home:
                selectedFragment = new HomeFragment();
                break;
            case Resource.Id.nav_profile:
                selectedFragment = new ProfileFragment();
                break;
            case Resource.Id.nav_settings:
                selectedFragment = new SettingsFragment();
                break;
        }
        if (selectedFragment != null)
        {
            LoadFragment(selectedFragment);
        }
    }

    private void LoadFragment(Fragment fragment)
    {
        // 替换容器中的Fragment
        var transaction = SupportFragmentManager.BeginTransaction();
        transaction.Replace(Resource.Id.fragment_container, fragment);
        transaction.Commit();
    }
}

方案二：ViewFlipper/ViewSwitcher 切换布局（适合简单界面） #

如果你的界面逻辑比较简单，不需要Fragment的生命周期管理，可以直接用View容器来切换不同的布局文件，这种方式更轻量化。

步骤1：编写主布局文件 #

用ViewFlipper（支持多个子布局）作为内容容器，底部放导航栏：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- 引入各个界面的布局文件 -->
        <include layout="@layout/layout_home" />
        <include layout="@layout/layout_profile" />
        <include layout="@layout/layout_settings" />
    </ViewFlipper>

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

步骤2：在Activity中实现切换逻辑 #

监听导航栏点击，切换ViewFlipper的显示子项：

public class MainActivity : AppCompatActivity
{
    private ViewFlipper _viewFlipper;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.activity_main);

        _viewFlipper = FindViewById<ViewFlipper>(Resource.Id.view_flipper);
        var bottomNav = FindViewById<BottomNavigationView>(Resource.Id.bottom_nav);
        bottomNav.NavigationItemSelected += BottomNav_NavigationItemSelected;
    }

    private void BottomNav_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
    {
        switch (e.Item.ItemId)
        {
            case Resource.Id.nav_home:
                _viewFlipper.DisplayedChild = 0; // 显示第一个布局
                break;
            case Resource.Id.nav_profile:
                _viewFlipper.DisplayedChild = 1; // 显示第二个布局
                break;
            case Resource.Id.nav_settings:
                _viewFlipper.DisplayedChild = 2; // 显示第三个布局
                break;
        }
    }
}

总结 #

绝对不需要为每个界面创建独立Activity并重复添加Navbar，上面两种方案都是在单个Activity中实现，导航栏只需要写一次，切换上方内容即可：

• 推荐用Fragment方案，适合复杂界面，能利用Fragment的生命周期管理逻辑；
• 如果是简单界面，ViewFlipper方案更轻便快捷。

内容的提问来源于stack exchange，提问作者user9317843