How to create top Navigation like Reddit App in Swift 3

Question

Here is the UI i want to create:

and what the complete UI looks like:

but i want to create first top Navigation. i tried https://

Answer 1

Okay. Here is the solution.

Step 1:

1. Take no. of buttons you want in a UIView.
2. Take UILabel for equal width of each button and height should be 1.0 and put it under each button.
3. Now give Outlets to each buttons and their respected labels in your ViewController.
4. Now take UIScrollView under this UIView and set constraints and give outlet.
5. Now you have to create ViewControllers for each Tab you want in Too Navigation.

For Example:-

• I have a ProfileViewController.m like below.

---

    @interface ProfileViewController ()<UIScrollViewDelegate>

        @property (nonatomic,strong) AboutMeViewController *aboutMeVC; 
        @property (nonatomic,strong) AddressViewController *addressVC;

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.


        _btnAboutMe.selected = NO;
        _btnAddress.selected = YES;
        _btnPassword.selected = NO;

        [self topButtonTapped:_btnAddress]; // This will call the navigation button tap method.


        _controllerArray = [@[self.aboutMeVC,self.addressVC,[self.storyboard instantiateViewControllerWithIdentifier:@"changePasswordVC"]] mutableCopy];
        [self addChildViewControllersOntoContainer:_controllerArray];

        //self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Left" style:UIBarButtonItemStylePlain target:self  action:@selector(presentLeftMenuViewController:)];

        [_leftBarButton setTarget:self];
        [_leftBarButton setAction:@selector(presentLeftMenuViewController:)];

        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(profileTap:)];
        tapGesture.numberOfTapsRequired = 1;
        [_profilePicture addGestureRecognizer:tapGesture];

    }

    -(AboutMeViewController*)aboutMeVC
    {
        if (!_aboutMeVC) {
            _aboutMeVC = [self.storyboard instantiateViewControllerWithIdentifier:@"aboutMeVC"];
        }
        _aboutMeVC.delegate = self;
        return _aboutMeVC;
    }

    -(AddressViewController*)addressVC
    {
        if (!_addressVC) {
            _addressVC = [self.storyboard instantiateViewControllerWithIdentifier:@"addressVC"];
        }
        return _addressVC;
    }

    // Adding all related controllers into the container
    -(void) addChildViewControllersOntoContainer:(NSArray *)controllersArr
    {
        for (int i = 0; i < controllersArr.count; i++)
        {
            UIViewController *vc = (UIViewController *)[controllersArr objectAtIndex:i];
            CGRect frame = CGRectMake(0, 0, self.containerScrollView.frame.size.width, self.containerScrollView.frame.size.height);
            frame.origin.x = SCREEN_WIDTH * i;
            vc.view.frame = frame;

            [self addChildViewController:vc];
            [self.containerScrollView addSubview:vc.view];
            [vc didMoveToParentViewController:self];
        }

        self.containerScrollView.contentSize = CGSizeMake(SCREEN_WIDTH * controllersArr.count + 1, self.containerScrollView.frame.size.height - 99);
        self.containerScrollView.pagingEnabled = YES;
        self.containerScrollView.delegate = self;
    }

    // Scroll view delegate methods. 
   // This method will help you to change the navigation by sliding it.
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
        NSInteger page = (scrollView.contentOffset.x / SCREEN_WIDTH);
        [self changeButtonState:page];
        //_selectedMenu = page;
        //_segmentControl.selectedSegmentIndex = page;
        NSLog(@"%@", NSStringFromCGSize(scrollView.contentSize));

        //    float xx = scrollView.contentOffset.x * (buttonWidth / SCREEN_WIDTH) - buttonWidth;
        //    [self.menuScrollView scrollRectToVisible:CGRectMake(xx, 0, SCREEN_WIDTH, self.menuScrollView.frame.size.height) animated:YES];
    }

    - (IBAction)topButtonTapped:(UIButton *)sender // Here is the method when you click on top button of your navigation bar.
    {
        [self changeButtonState:sender.tag];
        [self.containerScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * sender.tag, 0) animated:YES];
    }

    -(void)changeButtonState:(NSInteger)tag
    {
        if (tag == 0)
        {
            _btnAboutMe.selected = YES;
            _btnAddress.selected = NO;
            _btnPassword.selected = NO;

            _btnAboutMe.fillColor = [GeneralClass getColorFromHex:kBlueColor withAlpho:1.0];
            _btnAddress.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];
            _btnPassword.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];

        }
        else if (tag == 1)
        {
            _btnAboutMe.selected = NO;
            _btnAddress.selected = YES;
            _btnPassword.selected = NO;

            _btnAboutMe.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];
            _btnAddress.fillColor = [GeneralClass getColorFromHex:kBlueColor withAlpho:1.0];
            _btnPassword.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];
        }
        else if (tag == 2)
        {
            _btnAboutMe.selected = NO;
            _btnAddress.selected = NO;
            _btnPassword.selected = YES;

            _btnAboutMe.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];
            _btnAddress.fillColor = [GeneralClass getColorFromHex:kWhiteColor withAlpho:1.0];
            _btnPassword.fillColor = [GeneralClass getColorFromHex:kBlueColor withAlpho:1.0];
        }
    }

Your ViewController may look like this in your Storyboard.

I hope this will help you or at least give you some idea to develop what you need. Sorry for my answer in Objective C and some messy code. Actually I am in a hurry. But this will help you for sure. Thanks! :)

Note:- Please follow steps closely. You will find your solution for sure. Thanks. :)