如何调整半透明导航栏中的阴影?

问题描述 投票:0回答:1

为了使导航栏透明,我使用了自定义渲染器:

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:levation =“ 4dp”该阴影不仅是从导航栏的底部添加的,而且是由于透明效果而从内部的不同侧面添加的,这是可见。如何仅从下方制作阴影?是否可以以不同的方式实现它?

enter image description here

enter image description here

c# xamarin xamarin.forms xamarin.android
1个回答
1
投票

首先,如果导航栏的背景色是透明的,则无法设置android:elevation="4dp"

这里是创建阴影的另一种方法。您可以使用BoxView模拟阴影。在您的contentPage中添加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>

这里正在运行sceenshot。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.