Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to realize the side slide menu in iOS, which is very detailed and has certain reference value. Friends who are interested must read it!

First of all, let's briefly talk about the principle of my implementation: you need two UIView, one is the CenterView in the middle, and the other is the LeftView that appears on the left when you slide. First add LeftView to ViewController, and then add CenterView, so that CenterView covers the LeftView, and what you see at first is naturally CenterView. Because the sliding is done on the CenterView, you need to add gesture recognition to the CenterView and change the coordinates of the center point of the CenterView as you slide so that the covered LeftView is displayed. This is the basic principle of implementation. I will analyze it in detail below.

Let's first look at LeftView. To distinguish it from CenterView, I set its background to red, and then put a button in the middle:

LeftView.h

/ LeftView.h// SlideView//// Created by hejinlai on 13-8-13.Compact / Copyright (c) 2013 yunzhisheng. All rights reserved.//#import @ interface LeftView: UIView@endLeftView.m

/ LeftView.m// SlideView//// Created by hejinlai on 13-8-13.Compact / Copyright (c) 2013 yunzhisheng. All rights reserved.//#import "LeftView.h" @ implementation LeftView- (id) initWithFrame: (CGRect) frame {self = [super initWithFrame:frame] If (self) {/ / Initialization code Self.backgroundColor = [UIColor redColor] UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect] Btn.frame = CGRectMake (0,0,100,50); [btn setTitle:@ "LeftView" forState:UIControlStateNormal]; btn.center = CGPointMake (140,264); [btn addTarget:self action:@selector (onClick:) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:btn] } return self }-(void) onClick: (UIButton *) button {NSLog (@ "LeftView button pressed!");} @ end Let's look at CenterView, which first declares the coordinates of the center point of the screen and a gesture recognition:

# import @ interface CenterView: UIView {UIPanGestureRecognizer * panGestureRecognizer; float centerX; float centerY;} @ end calculates the coordinates of the center point of the screen during CenterView initialization, sets the background to green, and adds buttons in the upper left corner and gesture recognition

-(id) initWithFrame: (CGRect) frame {self = [super initWithFrame:frame] If (self) { CGRect screen = [[UIScreen mainScreen] bounds] CenterX = screen.size.width / 2; centerY = screen.size.height / 2 Self.backgroundColor = [UIColor greenColor] / / Button in the upper left corner UIButton * leftUpBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect] LeftUpBtn.frame = CGRectMake (10,10,40,40); [leftUpBtn addTarget:self action:@selector (buttonPressed:) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:leftUpBtn] PanGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector (handlePan:)] [self addGestureRecognizer:panGestureRecognizer];} return self;}

The final location of the CenterView actually has two: the first position is to fill the entire screen, and its center point is the center of the screen, covering the LeftView as a whole; the second position is that the center point is on the right, while the left shows only a small part of it on the screen, so that the bottom LeftView can be displayed.

I set the location of the Abscissa of the rightmost center of the CenterView to 420, which is equivalent to the size of 60 exposed on the left side of the CenterView on the screen. Another question is, when the slide stops, does the CenterView return to the first position or the second position? Here I set a boundary value of 280, return to the first position if the center point Abscissa is less than 280, and return to the second position if it is greater than 280. Here are the definitions of these two constants:

# define MAX_CENTER_X 420#define BOUND_X 280

Of course, these two values can be adjusted according to your own needs.

When you click the button in the upper left corner of CenterView, you need to switch between the two positions, that is, if you want to return to the second position if this is the first position, you need to return the second position to the first position:

-(void) buttonPressed: (UIButton *) button {[UIView animateWithDuration:0.2 animations: ^ (void) {if (self.center.x = = centerX) {self.center = CGPointMake (MAX_CENTER_X, centerY) } else if (self.center.x = = MAX_CENTER_X) {self.center = CGPointMake (centerX, centerY);}}] }

In order to look smooth, animations are added.

Next, let's take a look at the logic of dealing with sliding. The first is to calculate the Abscissa of the center point after sliding:

CGPoint translation = [recognizer translationInView:self]; float x = self.center.x + translation.x

Since CenterView cannot be moved to the left, that is, the minimum Abscissa value of the CenterView center point is centerX, when the center point coordinate is less than this value, it needs to be reset:

If (x

< centerX) { x = centerX; } self.center = CGPointMake(x, centerY); 当滑动结束的时候，需要判断此时中心点左边落到那个区域，如果小于边界值，则回到第一个位置，大于边界值则回到第二个位置，为了看起来比较平滑，加入了动画效果： if (recognizer.state == UIGestureRecognizerStateEnded) { [UIView animateWithDuration:0.2 animations:^(void){ if (x >

BOUND_X) {self.center = CGPointMake (MAX_CENTER_X, centerY);} else {self.center = CGPointMake (centerX, centerY);}}] } [recognizer setTranslation:CGPointZero inView:self]

Finally, add these two UIVIew in ViewController, notice to add LeftView first, and then add CenterView:

(void) viewDidLoad {[super viewDidLoad]; / / Do any additional setup after loading the view, typically from a nib. CGRect screen = [[UIScreen mainScreen] bounds]; CGFloat width = screen.size.width; CGFloat height = screen.size.height; leftView = [[LeftView alloc] init]; leftView.frame = CGRectMake (0,0, width, height); [self.view addSubview:leftView]; centerView = [[CenterView alloc] init] CenterView.frame = CGRectMake (0,0, width, height); [self.view addSubview:centerView];}

Running result:

The above is all the contents of the article "how to achieve side-slip menu in iOS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.