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"