c# - 如何调整半透明导航栏中的阴影？

Question

为了使导航栏半透明，我使用了自定义渲染器：

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using AView = Android.Views.View;
using App1;
using Android.Content;
using TransparentNavBarXForms.Droid.Renderers;

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace TransparentNavBarXForms.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
    public CustomNavigationPageRenderer(Context context) : base(context)
    {

    }

    IPageController PageController => Element as IPageController;
    CustomNavigationPage CustomNavigationPage => Element as CustomNavigationPage;

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        CustomNavigationPage.IgnoreLayoutChange = true;
        base.OnLayout(changed, l, t, r, b);
        CustomNavigationPage.IgnoreLayoutChange = false;

        int containerHeight = b;

        PageController.ContainerArea = new Rectangle(0, 0, Context.FromPixels(r - l), Context.FromPixels(containerHeight-t));

        for (var i = 0; i < ChildCount; i++)
        {
            AView child = GetChildAt(i);

            if (child is Android.Support.V7.Widget.Toolbar)
            {
                continue;
            }

            child.Layout(0, 0, r, b);
        }
    }
}
}

为了添加阴影，我在 Toolbar.axml 中添加了属性：android:elevation = "4dp" 阴影不仅从导航栏的底部添加，而且从内部的不同侧面添加，由于透明效果，这是可见的。如何仅从下方制作阴影？是否有可能以不同的方式实现它？

标签： c#xamarinxamarin.formsxamarin.android

Answer 1

首先，如果您的导航栏背景颜色是透明的，则不能设置android:elevation="4dp".

这是另一种创建阴影的方法。您可以使用它BoxView来模拟阴影。添加BoxView您的内容页面。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Title="test"
             x:Class="CustomNavigateBar.MainPage">

    <StackLayout>
        <!-- add showdow here -->
        <BoxView VerticalOptions="StartAndExpand" HeightRequest="10"/>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

在android中使用自定义渲染器。

[assembly: ExportRenderer(typeof(BoxView), typeof(MyBoxViewRenderer))]
namespace CustomNavigateBar.Droid
{
  public  class MyBoxViewRenderer: BoxRenderer
    {
        public MyBoxViewRenderer(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);
            ViewGroup.SetBackgroundResource(Resource.Drawable.boxview_shadow);
        }
    }
}

boxview_shadow.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#CABBBBBB" />

    </shape>
  </item>
</layer-list>

这是运行截图。