Tabs and Paging Views

koby1koby1 Member ✭✭

Hi, I'm just new at developing on Xamarin.iOS.

Can I ask for some tips on implementing a facebook group page like navigation where I can swipe the bar on top and can switch to different views by swiping horizontally the view or the content itself, or by simply tapping the tabs above.

Answers

  • koby1koby1 Member ✭✭
    edited November 2018

    @PrabakaranRamasamy is it possible to make it from scratch instead of using a third party component? Also the tabs on the top of the screen is scrollable.

  • ColeXColeX Member, Xamarin Team Xamurai

    is it possible to make it from scratch instead of using a third party component?

    Of course , it is not difficult to implement.

    Create a custom scrollview with several buttons on it , see my sample :

    Custom View

    class TabView : UIView
        {
            UIScrollView ScView;
    
            public delegate void ClickDelegate(nint index);
            public event ClickDelegate CallBack;
    
            public TabView(CGRect rect)
            {
                this.Frame = rect;
                ScView = new UIScrollView(new CGRect(0,0, rect.Width, rect.Height));
                this.Add(ScView);
            }
    
            public void setSelectionsAndCallBack(List<string> data, ClickDelegate callback)
            {
                for (int i = 0; i < data.Count; i++) {
                    UIButton button = new UIButton();
                    button.Tag = i;
                    button.SetTitle(data[i], UIControlState.Normal);
                    button.SetTitleColor(UIColor.Black, UIControlState.Normal);
                    button.Frame = new CGRect(i * 100, 0, 100, Frame.Height);
                    button.TouchUpInside += Button_TouchUpInside;
                    ScView.Add(button);
                }
    
                ScView.ContentSize = new CGSize(data.Count * 100, Frame.Height);
    
                CallBack = callback;
            }
    
            private void Button_TouchUpInside(object sender, EventArgs e)
            {
                UIButton button = sender as UIButton;
                CallBack(button.Tag);
            }
        }
    

    Usage

        TabView tab = new TabView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 50));
        tab.setSelectionsAndCallBack(new List<string>() { "1", "2" },(index)=> {
            // here you get the index when clicking
        });
        View.Add(tab);
    
  • koby1koby1 Member ✭✭

    @ColeX how do I add a corresponding view controller for each button?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited November 2018
    List<UIViewController> VCList;
    UIView current = new UIView(CGRect.Empty);
    
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
    
        View.Add(current);
    
        VCList = new List<UIViewController> {new VC1(), new VC2() , new VC3() , new VC4() , new VC5() };
    
        TabView tab = new TabView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 50));
        tab.setSelectionsAndCallBack(new List<string>() { "VC1", "VC2", "VC3", "VC4", "VC5" }, (index) => {
            //remove 
            current.RemoveFromSuperview();
    
            UIViewController vc = VCList[(int)index];
            vc.View.Frame = new CGRect(0, 50, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height - 50);
            //set current viewcontroller's view as subview
            current = vc.View;
            //add again
            View.Add(current);
        });
        View.Add(tab);
    }
    

  • koby1koby1 Member ✭✭

    Nice @ColeX . But can I also add a horizontal scroll within the views that will go to the other view?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited November 2018

    @koby1 said:
    But can I also add a horizontal scroll within the views that will go to the other view?

    Of course , then you can detect the Scrolled event of the scrollview, and trigger the button click event manually according to the position X.

    Something like this :

        UIButton button = new UIButton();
        public TabView(CGRect rect)
        {
            this.Frame = rect;
            ScView = new UIScrollView(new CGRect(0, 0, rect.Width, rect.Height));
            ScView.Scrolled += (sender, e)=> {
                int x = (int)ScView.ContentOffset.X;
                if (x < 100)
                {
                    button.Tag = 0;
                    Button_TouchUpInside(button, null);
                }
                else if (x > 100 && x < 200)
                {
                    button.Tag = 1;
                    Button_TouchUpInside(button, null);
                }
                else if (x > 200 && x < 300)
                {
                    button.Tag = 2;
                    Button_TouchUpInside(button, null);
                }
                else if (x > 300 && x < 400)
                {
                    button.Tag = 3;
                    Button_TouchUpInside(button, null);
                }
                else if (x > 400)
                {
                    button.Tag = 4;
                    Button_TouchUpInside(button, null);
                }
            };
            this.Add(ScView);
        }
    
Sign In or Register to comment.