user7885142
user7885142

Reputation:

Scrollable tab bar with FreshTabbedNavigationContainer

With FreshMVVM's FreshTabbedNavigationContainer all tabs want to be visible simultaneously and truncated:

enter image description here

I want them to be full width and scrollable like with regular TabbedPage:

enter image description here

I don't actually have so many tabs. This is just an example to show what I mean.

Upvotes: 0

Views: 1303

Answers (1)

Billy Liu
Billy Liu

Reputation: 2168

You need to use CustomRednerer.
For example:
In Droid project:

[assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))]
namespace ScrollableFreshTabbed.Droid
{
    class ScrollableTabbedPageRenderer : TabbedPageRenderer
    {
        public ScrollableTabbedPageRenderer(Context context) : base(context)
        {

        }
        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);
            var tabLayout = child as TabLayout;
            if (tabLayout != null)
            {
                tabLayout.TabMode = TabLayout.ModeScrollable;
            }
        }    
    }
}

In the Portable project:

public class ScrollableTabbedPage :  FreshTabbedNavigationContainer
{
    public ScrollableTabbedPage ()
    {

    }
}

App.xaml.cs:

        public App ()
        {
            InitializeComponent();
            var tabbedNavigation = new ScrollableTabbedPage();
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
            tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);

            MainPage = tabbedNavigation;    
        }

And the result is:
enter image description here

Upvotes: 1

Related Questions