如何基于Google Material Design实现全屏宽度的ActionBar？

我来帮你搞定这个问题！从你提供的代码和描述来看，核心问题出在Toolbar的内边距设置，以及默认ToolbarItem的布局逻辑上，咱们一步步来解决：

第一步：移除Toolbar的左右内边距 #

你的Toolbar布局里设置了app:contentInsetStart="80dp"和app:contentInsetEnd="80dp"，这直接导致图标左右两侧有大片空白。咱们把这些内边距清零，同时补充上Toolbar的高度设置（避免高度异常）：

修改后的Toolbar.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/ab_gradient"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp" />

第二步：确保主题配置一致 #

你在AndroidManifest.xml里直接使用了@style/Theme.AppCompat.Light.NoActionBar，但你的styles.xml里定义了MainTheme，建议统一使用自定义主题，避免冲突：

修改AndroidManifest.xml中的主题行：

android:theme="@style/MainTheme"

第三步：让图标均匀铺满全屏宽度（可选） #

如果仅仅去掉内边距，默认的ToolbarItem会左对齐排列，不会自动铺满整个宽度。要是你想让四个图标均匀分布在Toolbar上，就得自定义Toolbar布局：

1. 创建自定义Toolbar布局Toolbar_Custom.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/ab_gradient"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="4">

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/iconhome"
            android:scaleType="centerInside" />

        <ImageView
            android:id="@+id/icon_pyxus"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/iconpyxus"
            android:scaleType="centerInside" />

        <ImageView
            android:id="@+id/icon_careloop"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/iconcareloop"
            android:scaleType="centerInside" />

        <ImageView
            android:id="@+id/icon_notification"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/iconnotificationbell"
            android:scaleType="centerInside" />
    </LinearLayout>
</android.support.v7.widget.Toolbar>

2. 在MainActivity中替换默认Toolbar并添加点击事件：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    // 设置自定义Toolbar
    ToolbarResource = Resource.Layout.Toolbar_Custom;
    var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
    SetSupportActionBar(toolbar);

    // 给每个图标绑定点击逻辑，替换成你原来ToolbarItem的功能
    toolbar.FindViewById<ImageView>(Resource.Id.icon_home).Click += (s, e) =>
    {
        // 示例：导航到首页
        // ((App)Application.Current).MainPage = new HomePage();
    };

    toolbar.FindViewById<ImageView>(Resource.Id.icon_pyxus).Click += (s, e) =>
    {
        // 执行对应业务逻辑
    };

    toolbar.FindViewById<ImageView>(Resource.Id.icon_careloop).Click += (s, e) =>
    {
        // 执行对应业务逻辑
    };

    toolbar.FindViewById<ImageView>(Resource.Id.icon_notification).Click += (s, e) =>
    {
        // 执行对应业务逻辑
    };

    LoadApplication(new App());
}

这样修改后，你的Toolbar图标就能延伸到屏幕左右边缘，并且均匀铺满整个宽度啦！

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