Xamarin.Forms (Android)：向导航栏添加底部边框

Question

我想在 Android 上的 Xamarin Forms 的导航栏上添加一个底部边框。

在 iOS 我已经写了一个自定义渲染器：

public class CustomNavigationBarRenderer : NavigationRenderer
{
    private static readonly string ColorCode = "03d79e";
    private static readonly Lazy<UIImage> BorderBottomLine = new Lazy<UIImage>(GetPixelImage);
    
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (Element == null)
            return;
        NavigationBar.ShadowImage = BorderBottomLine.Value;
    }

    private static UIImage GetPixelImage()
    {
        UIGraphics.BeginImageContext(new CGSize(1, 1));
        CGContext context = UIGraphics.GetCurrentContext();
        context.SetFillColor(Color.FromHex(ColorCode).ToCGColor());
        context.FillRect(new CGRect(0, 0, 1, 1));
        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return image;
    }
}

不幸的是，在 Android 上并不是那么简单，或者至少我还没有弄清楚。

有没有什么简单的方法可以在导航栏上实现下边框？

Answer 1

为了让它变得非常简单，您可以使用NavigationPage.TitleView自定义您的 Header。 有关详细信息，请参阅此处的文档。

如果这对您不起作用，那么解决方案是为从 NavigationPageRenderer 扩展的NavigationPageRenderer编写一个 CustomRender 。

请参阅此处的帖子，其中包含有关自定义 NavigationBar 的一些惊人内容。

Answer 2

NavigationPage.TitleView没有帮助，因为它的宽度没有用 Navigationbar 填充（左侧有空间），更重要的是它只表示 Navigationbar 内部的内容（但我们想要边框）。

看下面的测试

<NavigationPage.TitleView>

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Margin="0" Padding="0">
        <Frame BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</NavigationPage.TitleView>

---

要实现底部边框 android，您可以使用 xml 文件创建一个形状，并在工具栏上设置背景。

1. 在文件夹Resources/drawable中创建一个名为line.xml的文件，并将以下代码复制到其中。

    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <solid android:color="#06D1A7" /> </shape> </item> <item android:bottom="4dp"> <shape> <solid android:color="#221E4E" /> </shape> </item> </layer-list>

2. 在工具栏上设置背景Toolbar.xml

    android:background="@drawable/line"

---

PS：我尝试在自定义渲染器中实现但没有运气，也许有人可以通过这种方式提供解决方案。

Answer 3

我通过以下方式实现了这一点：

在 Android 项目的可绘制文件夹中创建一个名为“custom_background_bar.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="#ff292550" />
        </shape>
    </item>
    <item android:top="-3dp" android:right="-3dp" android:left="-3dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                    android:width="2dp"
                    android:color="#ff03d79e" />
        </shape>
    </item>
</layer-list>

go 到 Resources/layout/Toolbar.axml 文件并设置以下内容：

android:background="@drawable/custom_background_bar"

之后，背景就设置好了。 您只是不应该在 Xamarin.Forms 项目中设置 BarBackgroundColor。

您还可以创建一个自定义渲染器，将 Background 属性设置为Context.GetDrawable(Resource.Drawable.custom_background_bar)

提示：BottomNavigationView 同样适用，如果你想要一个顶部边框，只需使用 android:bottom="-3dp" 而不是 android:top="-3dp"