How to create top Navigation like Reddit App in Sw

2019-03-02 04:54发布

Here is the UI i want to create:

The UI I want to create

and what the complete UI looks like:

Complete UI

but i want to create first top Navigation. i tried https://github.com/subinspathilettu/SJSegmentedViewController Which is working but it shows navigation after that it shows SegmentView.Could someone help me to create this UI it's same like reddit app screen after login.I need in swift.Thanks in advance

1条回答
虎瘦雄心在
2楼-- · 2019-03-02 05:30

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.

Consider This

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. :)

查看更多
登录 后发表回答