Change Formatting of Tabbed Page Title Text for iOS case

JurgenJurgen Member ✭✭
edited September 2018 in Xamarin.Forms

In the case of iOS the title text of Tabbed pages looks too small. Furthermore, the visual is different from device to the device. For e.g. in the case of iPhone X it is centered well, however, in the case of iPhone 8, the text is pushed to the bottom instead of central (it almost touches the bottom of the screen).

The problem is that the Title is not being set fromwithin the TabbedPage.xaml.cs, in which the several pages are set as the children to the tabbed page, but rather within the C# code of the Content pages. The Title value given to the Content page is automatically shown in the Tabbed buttons.

I have found a few sources explaining how this can be achieved by using styles in Android, but found nothing regarding the formatting of the actual tabbed page label text for iOS.

Any help will be appreciated.

Posts

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Jurgen said:
    In the case of iOS the title text of Tabbed pages looks too small. Furthermore, the visual is different from device to the device. For e.g. in the case of iPhone X it is centered well, however, in the case of iPhone 8, the text is pushed to the bottom instead of central (it almost touches the bottom of the screen).

    I suppose you are concerned about the TabbedPage.Title. Can you show us the screenshots of what you are getting (in iOS) and what you expect (as in Android).

    Have you used the built-in Tabbed Page template in Xamarin Forms?

    The problem is that the Title is not being set fromwithin the TabbedPage.xaml.cs, in which the several pages are set as the children to the tabbed page, but rather within the C# code of the Content pages. The Title value given to the Content page is automatically shown in the Tabbed buttons.

    >
    It appears that you are concerned that the TabbedPage.Title is not shown but the ContentPage.Title of the active tab is shown, is that right?

  • JurgenJurgen Member ✭✭

    MainPage is my tabbed navigation page; ItemsPage and BatchPage are the content pages that are set as children to the MainPage. So MainPage has two buttons for the mentioned pages; I am talking about the Titles shown on the tabbed buttons.

    The below code shows how I am configuring the tabbed children within the constructor of the MainPage.

    I am not using TabbedPage.Title, rather, I am using the Title as set within ItemsPage and BatchPage. The content page's title automatically shows in place of the tabbed page button title text. The problem is that I cannot find the option to change the font size and positioning - positioning is OK on iPhone X, but touches the bottom line in the case of iPhone 6-8 variations.

    I will post some screenshots once I get access to the mac development environment again but I wanted to answer your questions before that can happen :smile:

    public MainPage(bool def, string connectionId, UserSettings userSettings)
    {
    BarBackgroundColor = Color.FromHex(userSettings.Scheme_Color);

                if(userSettings.Text_Color.ToLower().Equals("light"))
                    BarTextColor = Color.FromHex("#FFFFFF");
                else
                    BarTextColor = Color.FromHex("#000000");
    
                BackgroundColor = Color.FromHex(userSettings.Back_Color);
    
                Children.Add(new ItemsPage(-1, userSettings));
    
                Children.Add(new BatchPage(connectionId, userSettings)); //show batch scan list. this is default
    
    
                if (!def)
                {
                    this.CurrentPage = this.Children[1];
                }
    
            }
    
  • JurgenJurgen Member ✭✭

    As promised here's the screen shot. I would like the font size to be a bit larger in size, as well as the text to be vertically centralised.

  • MazidiMazidi Member ✭✭

    @Jurgen have you fix it, title font size and position? how ? thanks in advance

  • rockthemeekrockthemeek Member ✭✭

    same problem font size don't do anything..!
    even with big size...

    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);
                    TabBar.Items[i].SetTitleTextAttributes(new UITextAttributes() {
                        Font = UIFont.FromName("OpenSans-Regular", 18), 
                        TextColor = Color.FromHex("#8b9620").ToUIColor() 
                        }, UIControlState.Normal);
                    TabBar.Items[i].SetTitleTextAttributes(new UITextAttributes() { 
                        Font = UIFont.FromName("OpenSans-Bold", 30), 
                        TextColor = Color.FromHex("#8b9620").ToUIColor() 
                        }, UIControlState.Selected);
                }
            }
    
            AddSelectedTabIndicator();
            base.ViewWillAppear(animated);
        }
    
  • MichaelMeierMichaelMeier USMember ✭✭

    I have the same thing in Android, I can change everything except the font or fontsize of the title text. It looks like something override this and because the problem is in Android and iOS it is maybe something in the Xamarin.Forms Code.
    Here is my discussion:
    https://forums.xamarin.com/discussion/160807/change-textsize-of-tabbartitle-in-android-programmatically

Sign In or Register to comment.