Xamarin.Forms（Android）：向导航栏添加底部边框

debugcn 发表于 Dev

交流会

我想在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上并不是那么简单，或者至少我还没有弄清楚。

有没有简单的方法可以在导航栏上实现底部边框？

ColeX-MSFT

NavigationPage.TitleView 这无济于事，因为它的宽度没有用Navigationbar填充（左侧有空格），更重要的是它仅表示Navigationbar内部的内容（但我们需要border）。

见下面的测试

<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文件创建形状，然后在Toolbar上设置背景。

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

<?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>