Xamarin Forms iOS custom renderer for tabbed page

Question

I have tabbed page in Xamarin Forms (iOS side). I need custom renderer for tabbed page - make first tab not scrollable (it could be shown as button or label), rest of tabs should be scrollable. I think creators of Xamarin Forms tabbed page implemented tabs like a horizontal listview. I just want to put a button as first element on the left and then put that listview with tabs. When button is clicked, the new view is being opened. How to do that?

I am using Naxam Library to provide top tabbed page - this is extension to tabbed page (at iOS it is at bottom). I have tried to use custom renderer, but no breakpoint is hitted. I don's know why.

using CoreAnimation;
using CoreGraphics;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace Layout.xxx.iOS.CustomControlRenderers
{
    public class CustomTabbedPageRenderer : Naxam.Controls.Platform.iOS.TopTabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "OnElementChanged");
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            AddButtonToTabbedPage();
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "ViewDidLoad");
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "Dispose");
        }

        public override void ViewDidAppear(bool animated)
        {
            base.ViewDidAppear(animated);
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "ViewDidAppear");
        }

        public override void ViewDidDisappear(bool animated)
        {
            base.ViewDidDisappear(animated);
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "ViewDidDisappear");
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "ViewDidLayoutSubviews");
        }

        public override void DidMoveToParentViewController(UIViewController parent)
        {
            base.DidMoveToParentViewController(parent);
            DependencyService.Get<IAlertHandler>().ShowCustomAlertVoid("", "DidMoveToParentViewController");
        }

        private void AddButtonToTabbedPage()
        {
            var btn = new UIButton();
            CAGradientLayer btnGradient = new CAGradientLayer();
            btnGradient.Frame = btn.Bounds;
            btnGradient.Colors = new CGColor[] { Color.Black.ToCGColor(), Color.White.ToCGColor() };
            btnGradient.Locations = new NSNumber[] { 0.0f, 0.1f };
            btn.Layer.AddSublayer(btnGradient);
            btn.Layer.MasksToBounds = true;
            btn.Layer.BorderColor = Color.Blue.ToCGColor();
            btn.Layer.BorderWidth = 2;
            btn.Layer.SetNeedsDisplay();
        }
    }
}

you need to add noshifteffect to remove the default scrolling, its platform specific. You can add code to make 0th element not scrollable I believe — Morse
Can you share some codes you have tried so far? The screenshot in the question is on the Android device. In iOS, tabbar is always in the bottom and the pages can not scroll to next by default. — Jack Hua
I have added code, that I tried. Screenshot comes from Android, but when using Naxam library - tabs are positioned at top in iOS. Right now tabbed page works the same like on Android. — YoungEddie

Jack Hua Jack Hua · Accepted Answer · 2019-10-22T07:02:47

If you want to fix the first tab, you can use custom renderer to achieve it. Change the index<0 to index<1 to fix the first tab in the method GetPreviousViewController and GetNextViewController:

[assembly: ExportRenderer(typeof(myTopTabbedPage), typeof(myTopTabbedRenderer))]
namespace App12.iOS
{
    class myTopTabbedRenderer : TopTabbedRenderer, IUIPageViewControllerDataSource
    {

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
        }

        public new UIViewController GetPreviousViewController(UIPageViewController pageViewController, UIViewController referenceViewController)
        {
            var index = ViewControllers.IndexOf(referenceViewController) - 1;

            //in the source, it is if (index < 0) return null;
            //change here to if (index < 1) will fix the first tab


            if (index < 1) return null;

            return ViewControllers[index];
        }

        public new UIViewController GetNextViewController(UIPageViewController pageViewController, UIViewController referenceViewController)
        {
            var index = ViewControllers.IndexOf(referenceViewController) + 1;

            //in the source, it is if (index == ViewControllers.Count) return null;
            //change here to if (index == ViewControllers.Count || index == 1) will fix the first tab
            if (index == ViewControllers.Count || index == 1) return null;

            return ViewControllers[index];
        }
    }
}

And in your xamarin.forms project, use myTopTabbedPage to create tabs:

public class myTopTabbedPage : TopTabbedPage { 


}

var tabs = new myTopTabbedPage
{
    Title = "TopTabs",
    BarBackgroundColor = Color.FromHex("#9C27B0"),
    SwipeEnabled = true,
    BarIndicatorColor = Color.Green,
    BarTextColor = Color.White
};

Try and let me know if it works for you.

Xamarin Forms iOS custom renderer for tabbed page

1 Answers