Search code examples
c#iosxamarinmaterial-components

MDCTabBar with MDCNavigationBar pushes NavigationBar up

I am trying to use the Xamarin port of Material Design Components in order to add a tabBar directly under the AppBar component however when I add the TabBar as the BottomBar view it pushes the NavigationBar up and I am not sure what I am doing wrong.

enter image description here

This is my ViewDidLoad():

public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        Styler.CellStyle = MDCCollectionViewCellStyle.Card;
        AddChildViewController(appBar.HeaderViewController);
        appBar.HeaderViewController.HeaderView.TrackingScrollView = CollectionView;

        appBar.NavigationBar.BackgroundColor = UIColor.Gray;
        appBar.NavigationBar.TintColor = UIColor.White;
        var attr = new NSDictionary<NSString, NSObject>(
        UIStringAttributeKey.ForegroundColor, UIColor.White);
        appBar.NavigationBar.TitleTextAttributes = attr;

        var tabBar = new MDCTabBar()
        {
            ItemAppearance = MDCTabBarItemAppearance.Titles,
            Alignment = MDCTabBarAlignment.CenterSelected,
            AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin
        };
        tabBar.Items = new UITabBarItem[] {
            new UITabBarItem("Event 1", null, 0),
            new UITabBarItem("Event 2", null, 0)
        };
        tabBar.SizeToFit();
        appBar.HeaderStackView.BottomBar = tabBar;

        appBar.HeaderViewController.HeaderView.BackgroundColor = App.AFSabreDark;
        appBar.HeaderStackView.BackgroundColor = UIColor.Blue;

        appBar.AddSubviewsToParent();

        refreshControl.ValueChanged += async (sender, e) =>
        {
            await RefreshAsync();
        };

        CollectionView.Add(refreshControl);
        CollectionView.RegisterClassForCell(typeof(MDCCollectionViewTextCell), cellId);

        model.DataUpdated += (sender, e) => {
            CollectionView.ReloadData();
        };
        model.PullData();

    }

Thanks for helping!

Solution

  • You can adjust the HeaderView's MinimumHeight to expand your NavigationBar like this:

    appBar.HeaderViewController.HeaderView.MinimumHeight = 150;

    Also you can set the MaximumHeight to limit its max height when pulling:

    appBar.HeaderViewController.HeaderView.MaximumHeight = 400;