[英]Xamarin.Forms (Android): Add Bottom Border to Navigation Bar
I would like to add a bottom border to the navigation bar in Xamarin Forms on Android.我想在 Android 上的 Xamarin Forms 的导航栏上添加一个底部边框。
On iOS I already wrote a custom renderer:在 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;
}
}
Unfortunately it's not that simple on Android, or at least I haven't figured it out yet.不幸的是,在 Android 上并不是那么简单,或者至少我还没有弄清楚。
Is there any simple way to implement a bottom border on the navigation bar?有没有什么简单的方法可以在导航栏上实现下边框?
To make it very simple you can use the NavigationPage.TitleView
to customize your Header.为了让它变得非常简单,您可以使用
NavigationPage.TitleView
自定义您的 Header。 Refer to the documentation here for more details.有关详细信息,请参阅此处的文档。
If that does not work out for you, then the solution would be to write a CustomRender for your NavigationBar extending from NavigationPageRenderer
.如果这对您不起作用,那么解决方案是为从 NavigationPageRenderer 扩展的
NavigationPageRenderer
编写一个 CustomRender 。
Please refer to the post here which has some amazing content about customizing the NavigationBar.请参阅此处的帖子,其中包含有关自定义 NavigationBar 的一些惊人内容。
NavigationPage.TitleView
does not help, because its width does not fill with Navigationbar(has space on left side) and what's more important is that it only represents the content inside Navigationbar(but we want border). NavigationPage.TitleView
没有帮助,因为它的宽度没有用 Navigationbar 填充(左侧有空间),更重要的是它只表示 Navigationbar 内部的内容(但我们想要边框)。
See the test below看下面的测试
<NavigationPage.TitleView>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Margin="0" Padding="0">
<Frame BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</NavigationPage.TitleView>
To implement the bottom border android, you could create a shape with a xml file, and set the background on Toolbar.要实现底部边框 android,您可以使用 xml 文件创建一个形状,并在工具栏上设置背景。
Create a file named line.xml
in folder Resources/drawable
and copy the following code into it.在文件夹
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>
Set Background on Toolbar.xml
在工具栏上设置背景
Toolbar.xml
android:background="@drawable/line"
PS: I tried to implement in custom renderer but no luck,maybe someone could provide the solution in this way. PS:我尝试在自定义渲染器中实现但没有运气,也许有人可以通过这种方式提供解决方案。
I realized it the following way:我通过以下方式实现了这一点:
Create a file called "custom_background_bar.xml" in the drawable folder in your Android project.在 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>
The go to to the Resources/layout/Toolbar.axml file and set the following: go 到 Resources/layout/Toolbar.axml 文件并设置以下内容:
android:background="@drawable/custom_background_bar"
After that the background is set.之后,背景就设置好了。 You just should not set the BarBackgroundColor in your Xamarin.Forms project.
您只是不应该在 Xamarin.Forms 项目中设置 BarBackgroundColor。
You could also create a custom Renderer that sets the Background property to Context.GetDrawable(Resource.Drawable.custom_background_bar)
您还可以创建一个自定义渲染器,将 Background 属性设置为
Context.GetDrawable(Resource.Drawable.custom_background_bar)
Hint: Same works with the BottomNavigationView, if you want a top border, just use android:bottom="-3dp" instead of android:top="-3dp"提示:BottomNavigationView 同样适用,如果你想要一个顶部边框,只需使用 android:bottom="-3dp" 而不是 android:top="-3dp"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.