全宽 ActionBar 使用 Google Material 设计

Full width ActionBar using Google Material Design

我几乎用尽了所有努力来寻找解决我的问题的方法。我需要以某种方式扩展 android 主题的 ActionBar 区域。下面是我当前的工具栏项目的屏幕截图,我想将其扩展为全宽。

在 Xamarin.Forms ContentPage 中,我将工具栏项设置如下。

this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconhome.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() {   Icon = "iconpyxus.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconcareloop.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() {  Icon = "iconnotificationbell.png", Priority = 0, Order = ToolbarItemOrder.Primary });

我不认为那里有任何问题,接下来我在主菜单中设置工具栏 activity

ToolbarResource = Resource.Layout.Toolbar;

下面是工具栏布局文件的代码。

<?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:background="@drawable/ab_gradient"
    app:contentInsetEnd="80dp"
    app:contentInsetStart="80dp"
    app:contentInsetStartWithNavigation="80dp" />

然后最后,我的styles.xml在下面..

<?xml version="1.0" encoding="utf-8" ?>
<resources>

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <item name="android:actionBarSize">200dp</item>
    
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    
    <item name="android:textAllCaps">false</item>

    <!--NAV BAR SHADOW-->
    <item name="android:elevation">4dp</item>
    <item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
    <!--NAV BAR HEIGHT-->
    <item name="android:actionBarSize">40dp</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

androidmanifest.xml中的主题如下

@style/Theme.AppCompat.Light.NoActionBar

如果你知道我如何让这些图标一直延伸到左端,我真的需要帮助

因此,在与 XF 社区中的一些人交谈后,我发现这可以通过自定义渲染器来完成,尽管这非常困难,或者我可以创建一个 ContentView 来按照我想要的方式模仿工具栏, 并将其添加到每个页面,然后禁用导航栏。