问题
How can I realize the orange line above Tab bar on Android and iOS?
回答1:
To achieve this effect, you need to create a custom TabbedPageRenderer.
On Android:
public class EnhancedTabbedPageRenderer : TabbedPageRenderer
{
private BottomNavigationView _bottomNavigationView;
public EnhancedTabbedPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
_bottomNavigationView = ((RelativeLayout)GetChildAt(0)).GetChildAt(1) as BottomNavigationView;
}
}
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
// Create a Gradient Stroke as the new top border. (Set alpha if needed.)
GradientStrokeDrawable topBorderLine = new GradientStrokeDrawable { Alpha = 0x33 };
// Change it to the color you want.
topBorderLine.SetStroke(1, Color.FromRgb(0x00, 0x00, 0x00).ToAndroid());
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { topBorderLine });
layerDrawable.SetLayerInset(0, 0, 0, 0, _bottomNavigationView.Height - 2);
_bottomNavigationView.SetBackground(layerDrawable);
}
}
On iOS:
public class EnhancedTabbedPageRenderer : TabbedRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
// Hide the origin top border.
UITabBar.Appearance.BackgroundImage = new UIImage();
UITabBar.Appearance.ShadowImage = new UIImage();
// Create a view as the new top border. Change it to the color you want. (Set alpha if needed.)
UIView view = new UIView(new CGRect(0, 0, TabBar.Frame.Width, 1)) { BackgroundColor = Color.FromRgb(0x00, 0x00, 0x00).ToUIColor(), Alpha = (System.nfloat)0.2 };
// Add the view to the TabBar.
TabBar.AddSubview(view);
}
}
}
来源：https://stackoverflow.com/questions/60977945/xamarin-tab-bar-topborder-line