如何创建简单菜单？

Question

I'm trying to create simple (facebook like) menu in my app. I've found several questions, most of them had accepted answer, but usually answer is to use some programs done by developers.

These programs are often in old version of xCode (one, that didn't use storyboards) and those, that were done in storyboard, were too complicated for me to implement in my app.

So I found one question, which had as an answer something like this: 1. Create your menu view controller (UITableViewController for me) 2. Hide this controller in your initial view controller :

MenuViewController *menView = [self.storyboard instantiateViewControllerWithIdentifier:@"Menu"];

    [self.view sendSubviewToBack:menView.view];

3 Create a button (maybe pan gesture later), in it's method, do something like this:

-(IBAction)menuButtonPressed:(id)sender
 {
    CGRect destination = self.navigationController.view.frame;

    if (destination.origin.x > 0) {
        destination.origin.x = 0;
    } else {
        destination.origin.x +=254.5;
    }

    [UIView animateWithDuration:0.25 animations:^{
        self.navigationController.view.frame = destination;
    } completion:^(BOOL finished)
     {
         self.view.userInteractionEnabled = !(destination.origin.x > 0);
     }];


}

What this does I guess, it's that it basically moves your view to the right by fixed length. I suppose, that your view, that you sendedToBack (your UITableView) should be exposed and interactable. However, all it does for me, is moving top view to the right, and leaving blank black-colored screen behind.

Now I think, that my problem is either bad instantiation of menuView, or just that I understanded this guide wrong.

If anyone knows, how to deal with this, I would be very thankful for an answer. Maybe there is some already done app, that is as easy as this to understand and hopefully easier to implement in my code :)

Thanks!

Answer 1

I would do this using container views in storyboard. You can size the left one how you like, then add a right one next to it, and in the inspector change its width to 320 -- most of it will go off the screen to the right, and it will resize its embedded controller to be full screen size. You can delete the view controller that you get with the left container view, then drag out a table view controller, and connect it from the left view with an embed segue (it will be the only choice when you control drag from the container view). I added two swipe gesture recognizers (one left and one right) to the main controller's view and connected them to the 2 methods in the main controller. Then in the main controller I have this code in the .h:

@interface ViewController : UIViewController

@property (weak,nonatomic) IBOutlet UIView *rightView;
@property (assign,nonatomic) CGRect rightRect;

@end

And in the .m, only this:

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.rightRect = self.rightView.frame;
}


-(IBAction)revealSidebar:(id)sender {
    [UIView animateWithDuration:.3 animations:^{
        self.rightView.frame = self.view.window.frame;
    }];
}

-(IBAction)hideSidebar:(id)sender {
    [UIView animateWithDuration:.3 animations:^{
        self.rightView.frame = self.rightRect;
    }];
}
@end