come creare un pannello scorrevole come l'app di Google Maps?

Question

Sto cercando qualcosa come AndroidSlidingUpPanel per iOS. Ho trovato MBPullDownController, ma richiede due ViewControllers da utilizzare e richiede una grande modifica all'architettura dell'applicazione a cui sto lavorando per implementarla.

Voglio solo qualcosa che aggiunge una sottoview in un controller di visualizzazione esistente. Come potrei fare per farlo?

Answer 1

Uso molto i pannelli scorrevoli nelle mie app iOS e ho scoperto che il trucco è aggiungere una vista personalizzata a un controller di visualizzazione nello storyboard (o file xib) ma impostarne la cornice in modo che è fuori dallo schermo. Puoi assicurarti che la vista rimanga sullo schermo su qualsiasi dispositivo utilizzando layout constraints.

Quindi è solo un caso di animare la vista sullo schermo quando appropriato. ad esempio:

- (IBAction)showPanel:(id)sender 
{ 
    // panelShown is an iVar to track the panel state... 
    if (!panelShown) { 
     // myConstraint is an IBOutlet to the appropriate constraint... 
     // Use this method for iOS 8+ otherwise use a frame based animation... 
     myConstraint.constant -= customView.frame.size.height; 
     [UIView animateWithDuration:0.5 animations:^{ 
      [self.view setNeedsLayout]; 
     }]; 
    } 
    else { 
     myConstraint.constant += customView.frame.size.height; 
     [UIView animateWithDuration:0.5 animations:^{ 
      [self.view setNeedsLayout]; 
     }]; 
    } 
} 

Se si desidera avere solo un colpo up/down e che rivelerà il pannello è possibile utilizzare UISwipeGestureRecognizer in questo modo:

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    // iVar 
    swipeUp = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipe:)]; 
    swipeUp.direction = UISwipeGestureRecognizerDirectionUp; 
    [self.view addGestureRecognizer:swipeUp]; 

    // Do the same again with swipeDown using UISwipeGestureRecognizerDirectionDown... 
} 

- (void)didSwipe:(UIGestureRecognizer *)swipe 
{ 
    if (swipe == swipeUp) { 
     // Show panel (see above)... 
    } else { 
     // Hide panel (see above)... 
    } 
} 

Se si desidera che il pannello per monitorare il tuo dito come quando mostri il pannello iOS (per attivare il wifi su spento ecc.). quindi è possibile utilizzare UIPanGestureRecognizer e ottenere il translationInView: e velocityInView: e regolare il pannello di conseguenza. Ecco un frammento di codice che regola i movimenti del dito, ma utilizzando i touchesBegan:withEvent:- (void)touchesMoved:withEvent: e - (void)touchesEnded:withEvent: metodi in una UIViewController per darvi un assaggio:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{ 
    // Don't worry too much about buttonView this is another view that I animate upwards to get out the way of the panel as it slides in from the left... 
    [super touchesBegan:touches withEvent:event]; 
    CGPoint loc = [[touches anyObject] locationInView:self.view]; 
    // Save last touch for reference... 
    lastTouch = loc; 
    // leftBeginRect is an area where the user can start to drag the panel... 
    // trackFinger defines whether the panel should move with the users gestures or not... 
    if (CGRectContainsPoint(leftBeginRect, loc) && canTrack) { 
     trackFinger = YES; 
    } 
    // Left view is a reference to the panel... 
    else if (leftView.frame.size.width >= 300) { 
     // This means that the panel is shown and therefore should track the user's finger back towards the edge of the screen... 
     CGRect frame = CGRectMake(250, 0, 100, self.view.frame.size.height); 
     if (CGRectContainsPoint(frame, loc) && canTrack) { 
      trackFinger = YES; 
     } 
    } 
} 

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 
{ 
    [super touchesMoved:touches withEvent:event]; 
    CGPoint loc = [[touches anyObject] locationInView:self.view]; 
    // Need to work out the direction in which the user is panning... 
    if (lastTouch.x > loc.x) { 
     currentFingerDirection = RHFingerDirectionLeft; 
    } 
    else { 
     currentFingerDirection = RHFingerDirectionRight; 
    } 
    lastTouch = loc; 
    if (trackFinger) { 
     if (loc.x <= 300) { 
      // This means that the panel is somewhere between fully exposed and closed... 
      // This is where the frame for the left view (and the constraints) are adjusted according to the user's current finger position... 
      CGRect frame = leftView.frame; 
      frame.size.width = loc.x; 
      [leftView setFrame:frame]; 
      leftViewConstraint.constant = loc.x; 
      if (loc.x <= 80) { 
       float percentage = loc.x/80; 
       int amount = 100 * percentage; 
       CGRect otherFrame = buttonView.frame; 
       otherFrame.origin.y = -amount; 
       [buttonView setFrame:otherFrame]; 
       constraint.constant = constraintConstant + amount; 
      } 
     } 
     else { 
      CGRect frame = leftView.frame; 
      frame.size.width = 300; 
      [leftView setFrame:frame]; 
      leftViewConstraint.constant = 300; 
      frame = buttonView.frame; 
      frame.origin.y = -100; 
      [buttonView setFrame:frame]; 
      constraint.constant = constraintConstant + 100; 
      trackFinger = NO; 
     } 
    } 
} 

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 
{ 
    // This method works out if the panel should pop open or spring closed when the user ends the gesture... 
    [super touchesEnded:touches withEvent:event]; 
    if (trackFinger) { 
     CGPoint loc = [[touches anyObject] locationInView:self.view]; 
     if (loc.x >= 50 && currentFingerDirection == RHFingerDirectionRight) { 
      CGRect frame = leftView.frame; 
      frame.size.width = 300; 
      leftViewConstraint.constant = 300; 
      CGRect otherFrame = buttonView.frame; 
      otherFrame.origin.y = -100; 
      constraint.constant = constraintConstant + 100; 
      [UIView animateWithDuration:0.2 animations:^{ 
       [leftView setFrame:frame]; 
       [buttonView setFrame:otherFrame]; 
      }]; 
     } 
     else if (loc.x <= 250 && currentFingerDirection == RHFingerDirectionLeft) { 
      CGRect frame = leftView.frame; 
      frame.size.width = 0; 
      leftViewConstraint.constant = 0; 
      CGRect otherFrame = buttonView.frame; 
      otherFrame.origin.y = 0; 
      constraint.constant = constraintConstant; 
      [UIView animateWithDuration:0.2 animations:^{ 
       [leftView setFrame:frame]; 
       [buttonView setFrame:otherFrame]; 
      }]; 
     } 
     else if (loc.x <= 150) { 
      CGRect frame = leftView.frame; 
      frame.size.width = 0; 
      leftViewConstraint.constant = 0; 
      CGRect otherFrame = buttonView.frame; 
      otherFrame.origin.y = 0; 
      constraint.constant = constraintConstant; 
      [UIView animateWithDuration:0.2 animations:^{ 
       [leftView setFrame:frame]; 
       [buttonView setFrame:otherFrame]; 
      }]; 
     } 
     else { 
      CGRect frame = leftView.frame; 
      frame.size.width = 300; 
      leftViewConstraint.constant = 300; 
      CGRect otherFrame = buttonView.frame; 
      otherFrame.origin.y = -100; 
      constraint.constant = constraintConstant + 100; 
      [UIView animateWithDuration:0.2 animations:^{ 
       [leftView setFrame:frame]; 
       [buttonView setFrame:otherFrame]; 
      }]; 
     } 
     trackFinger = NO; 
    } 
    currentFingerDirection = RHFingerDirectionNone; 
} 

Il codice è abbastanza coinvolto, ma si traduce in una bella animazione pannello che segue il dito molto simile al pannello iOS.

Answer 2

Siamo spiacenti per la risposta in ritardo. Ho creato una piccola libreria basata sulla risposta di Rob. https://github.com/hoomazoid/CTSlidingUpPanel

E 'molto semplice da usare:

@IBOutlet weak var bottomView: UIView! 
var bottomController:CTBottomSlideController?; 


override func viewDidLoad() { 
    super.viewDidLoad() 
    //You can provide nil to tabController and navigationController 
    bottomController = CTBottomSlideController(parent: view, bottomView: bottomView, 
        tabController: self.tabBarController!, 
        navController: self.navigationController, visibleHeight: 64) 
    //0 is bottom and 1 is top. 0.5 would be center     
    bottomController?.setAnchorPoint(anchor: 0.7) 
}