ActionBar With Tabbar in Xamarin forms for all(android, iOs and WinPhone)

Question

i need to Create a ActionBar with TabbedLayout control in xamarin forms, In xamarin Android i did that Easily but now they want in both platform IOS and Android using Xamarin forms.please share any Example or Give me suggestion for how to make the custom Controls in Xamari Froms.

Below i have attached the Image how i need Action bar with Tabbed layout.

Shashidhar Subanji Shashidhar Subanji · Accepted Answer · 2017-09-14T09:26:10

If you are using Xamarin.Forms the Tabbed page, for Android tabbar items will in the top. For iOS, you have to create a renderer to achieve it. However, Showing Tabbar items in the top are against User guidelines of iOS.

Create custom render, override ViewDidLayoutSubviews and add the following lines code.

[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(ExtendedTabbedPageRenderer))]
namespace ExtendedTabbedPage.Pages
{
    public class ExtendedTabbedPageRenderer : TabbedRenderer
    {
        private ExtendedTabbedPage Page => (ExtendedTabbedPage)Element;
    public ExtendedTabbedPageRenderer()
    {

    }

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        var page = (ExtendedTabbedPage)Element;
        page.CurrentPageChanged += Page_CurrentPageChanged;

    }

    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);
        Page_CurrentPageChanged();
    }


    public override void ViewDidLayoutSubviews()
    {
        base.ViewDidLayoutSubviews();
        SetTabPostition();
    }

    void SetTabPostition()
    {
        if (Element == null)
            return;

        var element = Element as ExtendedTabbedPage;

        this.TabBar.InvalidateIntrinsicContentSize();

        nfloat tabSize = 74.0f;

        UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;

        if (UIInterfaceOrientation.LandscapeLeft == orientation || UIInterfaceOrientation.LandscapeRight == orientation)
        {
            tabSize = 32.0f;
        }

        CGRect tabFrame = this.TabBar.Frame;
        CGRect viewFrame = this.View.Frame;

        tabFrame.Height = tabSize;
        tabFrame.Y = this.View.Frame.Y;
        this.TabBar.Frame = tabFrame;
        this.TabBar.ContentMode = UIViewContentMode.Top;

        PageController.ContainerArea = new Rectangle(0, tabFrame.Y + tabFrame.Height, viewFrame.Width, viewFrame.Height - tabFrame.Height);
        this.TabBar.SetNeedsUpdateConstraints();
    }

    void Page_CurrentPageChanged()
    {
        var current = Tabbed.CurrentPage;
        //if Tab is more than 5 then more will appear in iOS
        if (current == null)
        {
            CGRect tabFrm = this.TabBar.Frame;
            if (this.MoreNavigationController != null)
            {
                var morenavframe = this.MoreNavigationController.View.Frame;
                morenavframe.Y = tabFrm.Y + tabFrm.Height;
                this.MoreNavigationController.View.Frame = morenavframe;

                foreach (var morecontroller in this.MoreNavigationController.ViewControllers)
                {
                    var morecontframe = morecontroller.View.Frame;
                    morecontframe.Y = morenavframe.Y + morenavframe.Height;
                    morecontroller.View.Frame = tabFrm;
                }
            }
            return;
        }

        var controller = Platform.GetRenderer(current);
        if (controller == null)
            return;

        var frame = controller.ViewController.View.Frame;
        CGRect tabFrame = this.TabBar.Frame;
        frame.Y = (tabFrame.Y + tabFrame.Height);
        controller.ViewController.View.Frame = frame;
        this.View.Frame = frame;
    }


    public override void ViewDidAppear(bool animated)
    {
        base.ViewDidAppear(animated);
        Page_CurrentPageChanged();
    }
  }
}

ActionBar With Tabbar in Xamarin forms for all(android, iOs and WinPhone)

2 Answers