需要帮助改善Xamarin iOS选项卡上的外观

Question

我想在ios上改进我的内容页面的大小和背景，

var About = new ContentPage() { Title = "About" };
var layout = new StackLayout();
var line1 = new Label() { Text = viewModel.Member.Line1, FontSize = 16, HorizontalTextAlignment = TextAlignment.Center };
var MapTab = new ContentPage() {Title = "Map"};

安卓：

内容页面的标题在ios上显得非常小，不可见。我需要帮助来改善外观并使其更大。

Answer 1

您必须为TabbedPage实现自定义渲染器。看到这个链接：

Extending TabbedPage in Xamarin Forms。

它说，那：

要进行这些自定义，我们将在每个平台上使用自定义渲染器来渲染TabbedPage。

我将从源代码片段中复制代码片段作为示例：

YourTabbedPage.xaml：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="CustomTabbedPage.MainPage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom">
    <TabbedPage.Children>   
        <ContentPage Title="Home" Icon="ic_home.png" BackgroundColor="White"/>
        <ContentPage Title="Favorites" Icon="ic_favorite.png" BackgroundColor="White"/>
        <ContentPage Title="App" Icon="app_logo_unselected.png" x:Name="home" BackgroundColor="White"/>
        <ContentPage Title="Friends" Icon="ic_people.png" BackgroundColor="White"/>
        <ContentPage Title="Settings" Icon="ic_settings.png" BackgroundColor="White"/>
    </TabbedPage.Children>
</TabbedPage>

iOS自定义渲染器：

public class ExtendedTabbedPageRenderer : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        if (TabBar?.Items == null)
            return;

        var tabs = Element as TabbedPage;
        if (tabs != null)
        {
            for (int i = 0; i < TabBar.Items.Length; i++)
            {
                UpdateTabBarItem(TabBar.Items[i], tabs.Children[i].Icon);
            }
        }

        base.ViewWillAppear(animated);
    }

    private void UpdateTabBarItem(UITabBarItem item, string icon)
    {
        if (item == null || icon == null)
            return;

        // Set the font for the title.
       item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#757575").ToUIColor() }, UIControlState.Normal);
       item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#3C9BDF").ToUIColor() }, UIControlState.Selected);

    }
}

Android自定义渲染器：

public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        Android.Views.IMenuItem lastItemSelected;
        int lastItemId=-1;

        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;
                bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;

                //Call to change the font
                ChangeFont();
            }

            if (e.OldElement != null)
            {
                bottomNavigationView.NavigationItemSelected -= BottomNavigationView_NavigationItemSelected;
            }
        }

        //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);

                //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);
            }
        }

        void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
        {
            var normalColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
            var selectedColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid();

            if(lastItemId!=-1)
            {
                SetTabItemTextColor(bottomNavMenuView.GetChildAt(lastItemId) as BottomNavigationItemView, normalColor);
            }

            SetTabItemTextColor(bottomNavMenuView.GetChildAt(e.Item.ItemId) as BottomNavigationItemView, selectedColor);

            this.OnNavigationItemSelected(e.Item);
            lastItemId = e.Item.ItemId;
        }

        void SetTabItemTextColor(BottomNavigationItemView bottomNavigationItemView, Android.Graphics.Color textColor)
        {
            var itemTitle = bottomNavigationItemView.GetChildAt(1);
            var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
            var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));

            smallTextView.SetTextColor(textColor);
            largeTextView.SetTextColor(textColor);
        }
}

Answer 2

我为我想要改进的两个页面，地图和memberaboutpage创建了一个内容类，而不是使用内容页面，我做了这个

   var About = new MemberAboutPage { Title = "About" };
        var layout = new StackLayout();

        var MapTab = new MapPage() { Title = "Map" };

然后我将页面添加到我创建的页面并镜像到下面的ios rendere页面，这个页面格式化选项卡并使它们看起来更漂亮，并且alos可以防止iPhone X上的重叠。快乐编程伙伴

'[assembly: ExportRenderer(typeof(CardPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(LoginPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(MemberAboutPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(MapPage), typeof(MyiOSTabbedPage))]
 namespace CHA.iOS.Renderers
 {
 public class MyiOSTabbedPage : PageRenderer
{
    public override void ViewWillLayoutSubviews()
    {
        base.ViewWillLayoutSubviews();

        nfloat tabSize = 44.0f;

        UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;

        CGRect rect = this.View.Frame;
        rect.Y = this.NavigationController != null ? tabSize : tabSize + 20;
        this.View.Frame = rect;

        if (TabBarController != null)
        {
            CGRect tabFrame = this.TabBarController.TabBar.Frame;
            tabFrame.Height = tabSize;
            tabFrame.Y = this.NavigationController != null ? 0 : 0;
            this.TabBarController.TabBar.Frame = tabFrame;
            this.TabBarController.TabBar.BarTintColor = UIColor.FromRGB(234,232,232);
            var textAttr = new UITextAttributes
            {
                Font = UIFont.SystemFontOfSize(20)
            };
            var selectedAttr = new UITextAttributes
            {
                TextColor = UIColor.FromRGB(63,165,186),
                Font=UIFont.BoldSystemFontOfSize(20)
            };
            foreach (var i in this.TabBarController.TabBar.Items)
            {
                i.SetTitleTextAttributes(textAttr, UIControlState.Normal);
                i.SetTitleTextAttributes(selectedAttr, UIControlState.Selected);
            }
        }
    }
}'