Xamarin：为选定的选项卡项添加边框

Posted 2023-03-31

【中文标题】Xamarin：为选定的选项卡项添加边框

【英文标题】：Xamarin: Adding borders to the selected tab item

【发布时间】：2021-03-28 09:11:54

【问题描述】：

在 android 上的 Xamarin.Forms 中，我正在研究一个使用选项卡式页面的部分。我正在尝试在所选项目周围放置一组边框，如下所示： 和

有没有什么方法可以使用自定义渲染器来实现这样的目标？

【问题讨论】：

是的。甚至可能没有自定义渲染器。这看起来可以通过调整标签栏的 Android 主题来实现。

【参考方案1】：

根据你的描述，如果你想改变 TabbedPage 中选中项的颜色，可以使用以下代码：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.TabbedPage2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:TabbedPageDemo"
android:TabbedPage.BarItemColor="Gray"
android:TabbedPage.BarSelectedItemColor="#3C9BDF"
android:TabbedPage.ToolbarPlacement="Bottom"
BarTextColor="Gray">
<!--  Pages can be added as references or inline  -->
<ContentPage Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="Tab 3" />
</TabbedPage>

如果你想改变选中项的文本大小，你可以使用自定义渲染来做到这一点：

[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(ExtendedTabbedPageRenderer))]
namespace CustomTabbedPage.Droid

public class ExtendedTabbedPageRenderer : TabbedPageRenderer

    Xamarin.Forms.TabbedPage tabbedPage;
    BottomNavigationView bottomNavigationView;
    Android.Views.IMenuItem lastItemSelected;
    private bool firstTime = true;
    int lastItemId=-1;
    public ExtendedTabbedPageRenderer(Context context) : base(context)
    
    

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
    
        base.OnElementChanged(e);

        if (e.NewElement != null)
        
            tabbedPage = e.NewElement as ExtendedTabbedPage;
            bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;


            //Call to change the font
            ChangeFont();
        
    

    //Change Tab font
    void ChangeFont()
    
        var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
        var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;

        for (int i = 0; i < bottomNavMenuView.ChildCount; i++)
        
            var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
            var itemTitle = item.GetChildAt(1);

            var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
            var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));

            lastItemId = bottomNavMenuView.SelectedItemId;

            //smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
            //largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);

            smallTextView.TextSize = 18;
            largeTextView.TextSize = 18;

            //Set text color
            var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
            smallTextView.SetTextColor(textColor);
            largeTextView.SetTextColor(textColor);
        
          

 

如果你想为标签栏添加边框线，请看这个帖子：

Xamarin Tab Bar top(border) line