Title cutoff in tabbed page in Xamarin.Forms

问题

Tabbed page title cut off in tabbed page in Android

but working fine in iOS Device

i am using this code

public Tabbar()
        {
            //this.BarTextColor = Color.Maroon;
            // New Feed
            var navigationNewFeed = new NavigationPage(new NewFeedView());
            navigationNewFeed.Title = "News Feed";
            navigationNewFeed.Icon = "news";
            Children.Add(navigationNewFeed);

            // Volunteer View
            var navigationPageVolunteer = new NavigationPage(new VolunteerView());
            navigationPageVolunteer.Icon = "Volunteer";
            navigationPageVolunteer.Title = "Volunteer";
            Children.Add(navigationPageVolunteer);


            // LAH View
            var navigationPageLAH = new NavigationPage(new LAHView());
            navigationPageLAH.Icon = "lah";
            navigationPageLAH.Title = "LAH";
            Children.Add(navigationPageLAH);



            // Notification View
            var navigationPageNotification = new NavigationPage(new NotificationView());
            navigationPageNotification.Icon = "notification";
            navigationPageNotification.Title = "Notification";
            Children.Add(navigationPageNotification);


            // Account View
            var navigationPageAccount = new NavigationPage(new AccountView());
            navigationPageAccount.Icon = "account";
            navigationPageAccount.Title = "Account";
            Children.Add(navigationPageAccount);


        }

回答1:

You could use custom style and change size of text in the tab. How to use custom style for tab.

And change style:

<style name="CustomTab"
       parent="@android:style/Widget.Holo.ActionBar.TabText">
    <item name="android:textSize">5sp</item>
</style>

回答2:

Try setting a lower text size through Tabbar.axml on your Android XF Project, adding app:tabTextAppearance="?android:attr/textAppearanceSmall"

<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/sliding_tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="?attr/colorPrimary" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:tabTextAppearance="?android:attr/textAppearanceSmall"
    app:tabIndicatorColor="@android:color/white" 
    app:tabGravity="fill" 
    app:tabMode="fixed" />

回答3:

Basically, in android, the text is displayed in CAPS by default, though you type the First letter in caps and the following words in small (e.g. Button Text "Accept" is however displayed as ACCEPT).

To override it and display as you type (i.e., Accept), include this line in your theme file (say in YourProject.Android/Resources/values/styles.xml) that you applied to your android activity

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ............
    <item name="android:textAllCaps">false</item>
</style>

Thanks to answers in Why is my Button text forced to ALL CAPS on Lollipop?

EDIT : If you are missing tab title, you can use this below code to solve as it solved mine wonderfully!

using Android.Content;
using Android.Support.Design.Internal;
using Android.Views;
using FixedTabbedPage.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace FixedTabbedPage.Droid.CustomRenderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context) { }

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

            if (ViewGroup != null && ViewGroup.ChildCount > 0)
            {
                BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);

                if (bottomNavigationMenuView != null)
                {
                    var shiftMode = bottomNavigationMenuView.Class.GetDeclaredField("mShiftingMode");

                    shiftMode.Accessible = true;
                    shiftMode.SetBoolean(bottomNavigationMenuView, false);
                    shiftMode.Accessible = false;
                    shiftMode.Dispose();

                    for (var i = 0; i < bottomNavigationMenuView.ChildCount; i++)
                    {
                        var item = bottomNavigationMenuView.GetChildAt(i) as BottomNavigationItemView;
                        if (item == null) continue;                         

                        item.SetShiftingMode(false);
                        item.SetChecked(item.ItemData.IsChecked);
                    }

                    if (bottomNavigationMenuView.ChildCount > 0) bottomNavigationMenuView.UpdateMenuView();
                }
            }
        }

        private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
        {
            if (viewGroup == null || viewGroup.ChildCount == 0) return null;

            for (var i = 0; i < viewGroup.ChildCount; i++)
            {
                var child = viewGroup.GetChildAt(i);

                var typedChild = child as T;
                if (typedChild != null) return typedChild;

                if (!(child is ViewGroup)) continue;

                var result = FindChildOfType<T>(child as ViewGroup);

                if (result != null) return result;
            }

            return null;
        }
    }
}

Refer : 1) In Xamarin Forms 3.1, when using tabbed page with 4 tabs, how can I prevent "sliding" effect of tab bar on Android?

2) https://forums.xamarin.com/discussion/comment/361462#Comment_361462

Thanks to jezh and J.Aguilar

Hope this helps..

来源：https://stackoverflow.com/questions/38915849/title-cutoff-in-tabbed-page-in-xamarin-forms

标签

xamarin.android

xamarin.forms