Implementation of IOS imitating QQ sidebar



The new version of QQ has made a lot of updates in the UI, one of the more cool effect is its sidegliding navigation bar. Although this UI has been imitated to imitate rotten teeth, although some statistics say that the user experience of this design is not good. But I still like this effect very much. Let’s take a look at the detailed implementation method.

Analysis: what gestures are used in QQ sidebar and what are the effects?

  • QQ’s home page is a UI tabbarcontroller, temporarily called mainvc. The gesture added on the left edge is the edge gesture uiscreen edge pan gesturerecognizer
  • When the edge gesture slides to the middle of the screen, judge that the main VC moves more than the middle of the screen. If it exceeds, the sidebar will be displayed. If not, it will automatically return to its original position.
  • When mainvc moves, there will be a black mask. The transparency of the mask is related to the distance of mainvc moving.
  • When the sidebar appears, the gesture added by mainvc is replaced by the translation gesture uipangesturerecognizer. Judge that mainvc moves the same distance as the second step.
  • How to handle the conflict between the added gesture and the edge gesture of the system.
  • When the sidebar is hidden, give mainvc a high speed and the sidebar will be displayed immediately. When the sidebar appears, give the sidebar a high speed and it will immediately display mainvc.

The hierarchical relationship is shown in the figure above: mainvc is on the sidebar, and you only need to add gestures to control the display and hiding of the sidebar.


[self addChildViewController:self.leftVc];
 [self addChildViewController:self.mainVc];  
 [self.mainVc didMoveToParentViewController:self];  
 [self.leftVc didMoveToParentViewController:self];
//Add screen edge translation gesture
 [self.mainVc.view addGestureRecognizer:self.pan1];  
 //Add translation gesture
 [self.mainVc.view addGestureRecognizer:self.pan2];  
 //Add click gesture
 [self.mainVc.view addGestureRecognizer:self.tap];

And a simulation of the critical speed of 1 000

#Pragma mark --- gesture processing
-(void)screenGesture:(UIPanGestureRecognizer *)pan{
 //Distance to move
 CGPoint point = [pan translationInView:pan.view];
 //Speed of movement
 CGPoint verPoint = [pan velocityInView:pan.view];
 self.mainVc.view.lx_x += point.x;
 //Boundary limitation
 if (self.mainVc.view.lx_x >= MAXLEFTSLIDEWIDTH) {
  self.mainVc.view.lx_x = MAXLEFTSLIDEWIDTH;
 if (self.mainVc.view.lx_x <= 0) {
  self.mainVc.view.lx_x = 0;
 //Shadow limit of mask
 self.maskView.alpha = self.mainVc.view.lx_x /MAXLEFTSLIDEWIDTH;
 if (pan.state == UIGestureRecognizerStateEnded) {
  //Judging gestures
  if (pan == self.pan1) {
   if (verPoint.x > MAXSPEED) {
     [self showLeftVc];
    if (self.mainVc.view.lx_x >= Device_Width/2) {
     [self showLeftVc];
     [self hideLeftVc]; 
   if (verPoint.x < - MAXSPEED) {
    [self hideLeftVc];
    if (self.mainVc.view.lx_x >= Device_Width/2) {     
     [self showLeftVc];
     [self hideLeftVc];     
 [pan setTranslation:CGPointZero inView:pan.view];

The problem of the conflict between the added gesture and the edge gesture of the system is solved as follows:

Subclass UINavigationController

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view.
 self.navigationBar.translucent = YES;
 self.navigationBar.barTintColor = LXMainColor;
 self.interactivePopGestureRecognizer.delegate = self;
#Pragma mark -- prevent conflicts with gestures added to tabbar--
-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
 if (self.childViewControllers.count <= 1) {
  return NO;
 return YES;

We found that full screen gestures were added to the secondary pages of QQ, so we also added UINavigationController + fdfullscreen popgesture. H, and found that the original conflicting gestures did not conflict.

design sketch:

Demo address: copy QQ sidebar (local download)


The above is the whole content of this article, I hope that the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message and exchange, thank you for your support to developeppaer.

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]