android - Xamarin.Forms MasterDetail 页面 NavBar 自定义

Question

我需要大量帮助来解决 MasterDetail 的问题Xamarin.Forms 中的页面。

我想做的是，非常简单地自定义 NavigationBar的背景使用渐变。我的设置是一个带有 Prism 的 Xamarin.Forms 应用程序，我首先在其中登录用户，然后导航到 MasterDetail像这样的页面:

await NavigationService.NavigateAsync("MyMasterDetailPage/NavigationPage/MyDetailPage")

我遇到的问题是无论我做什么我都无法改变 NavigationBar 的颜色.

我尝试了几种不同的 CustomRenderers 变体(当前适用于 Android)，以及仅添加自定义 TitleView到 Detail PCL 项目中的页面。我也试过更改 styles.xml 文件，更改 ToolBar.axml 以使用我制作的可绘制对象，但到目前为止我仍然没有运气.

任何帮助将不胜感激，因为我已经为这个问题苦苦挣扎了几天。

下面是正在发生的事情的屏幕截图:

工具栏.axml:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@drawable/gradient_background_drawable"
 />

样式.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>
    <!-- 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">#89D362</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#89D362</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="drawerArrowStyle">@style/DrawerArrowStyle</item>
  </style>

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

  <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">#89D362</item>
  </style>
</resources>

gradient_background_drawable:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient android:type="linear"
            android:angle="270"
            android:startColor="#000E0E"
            android:endColor="#3D3939">
  </gradient>

</shape>

MasterDetailPageRenderer:

protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            if (toolbar != null)
            {
                for (int i = 0; i < toolbar.ChildCount; i++)
                {
                    var child = toolbar.GetChildAt(i);
                    child.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable);
                }

                toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable);
            }
        }

导航页面渲染器:

protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }

            var actionBar = ((FormsAppCompatActivity)Context).SupportActionBar;
            actionBar.SetBackgroundDrawable(Context.GetDrawable(Resource.Drawable.gradient_background_drawable));
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            if (toolbar != null)
            {
                //for (int i = 0; i < toolbar.ChildCount; i++)
                //{
                //    var child = toolbar.GetChildAt(i);
                //    child.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable);
                //}

                toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable);
            }
        }

        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);
            if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
            {
                _toolbar = (Android.Support.V7.Widget.Toolbar)child;

                _toolbar.Background = Context.GetDrawable(Resource.Drawable.gradient_background_drawable);
            }
        }

Answer 1

我通过使用模板 Master-Detail Page 创建一个新应用来实现该功能。方法就是按照你说的设置Toolbar.axml的background。

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
android:background="@drawable/gradient_background_drawable"
/>

为了让效果更明显，我改变了渐变色。您可以改回自己的渐变颜色。

文件 gradient_background_drawable.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient android:type="linear"
            android:angle="270"
            android:startColor="#008B00"
            android:endColor="#9AFF9A">
  </gradient>
</shape>

此外，记得在文件App.xaml中删除与工具栏相关的Background属性。

文件 App.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormApp202011.App">
    <Application.Resources>
        <ResourceDictionary>
            <!--Global Styles  -->
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style TargetType="NavigationPage">
                <Setter Property="BarTextColor" Value="Red" />

            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

结果: