简体   繁体   English

带有FreshTabbedNavigationContainer的可滚动标签栏

[英]Scrollable tab bar with FreshTabbedNavigationContainer

With FreshMVVM's FreshTabbedNavigationContainer all tabs want to be visible simultaneously and truncated: 使用FreshMVVM的FreshTabbedNavigationContainer所有选项卡都希望同时可见并被截断:

在此处输入图片说明

I want them to be full width and scrollable like with regular TabbedPage : 我希望它们像常规TabbedPage一样具有全宽和可滚动性:

在此处输入图片说明

I don't actually have so many tabs. 我实际上没有太多标签。 This is just an example to show what I mean. 这只是一个例子,说明了我的意思。

You need to use CustomRednerer. 您需要使用CustomRednerer。
For example: 例如:
In Droid project: 在Droid项目中:

[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: 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: 结果是:
在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM