Google Haritalar uygulaması gibi bir kayan panel nasıl oluşturulur?

Question

iOS için AndroidSlidingUpPanel gibi bir şey arıyorum. MBPullDownController'u buldum, ancak kullanmak için iki ViewControllers gerektirir ve uygulamak için üzerinde çalıştığım uygulamanın mimarisinde büyük bir değişiklik gerektirir.

Varolan bir görünüm denetleyicisine alt görünüm ekleyen bir şey istiyorum. Bunu yapmayı nasıl yaparım?

Answer 1

iOS uygulamalarımdaki sürgülü panelleri epeyce kullanıyorum ve hilenin, hikaye tahtasında (veya xib dosyasında) bir görünüm denetleyicisine özel bir görünüm eklemesini, ancak çerçevesini bu şekilde ayarlamasını sağladığını gördüm. ekran kapalı. Görünümün, layout constraints kullanarak herhangi bir cihazda ekrandan kalmasını sağlayabilirsiniz.

Ardından, uygun olan durumlarda ekran görüntüsünü canlandırmanın bir örneği. örneğin:

- (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]; 
     }]; 
    } 
} 

yukarı/aşağı sadece bir tokatlamak istiyorum ve bu kadar gibi UISwipeGestureRecognizer kullanabilirsiniz paneli ortaya çıkaracaktır ise: İsterseniz gibi parmağınızı izlemek için paneli

- (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)... 
    } 
} 

iOS panelini gösterdiğinizde (wifi'yi kapalı vb. açmak için). daha sonra UIPanGestureRecognizer'u kullanabilir ve translationInView: ve velocityInView:'u kullanarak paneli uygun şekilde ayarlayabilirsiniz. İşte parmak hareketini izler ama size bir tat vermek için bir UIViewController içinde touchesBegan:withEvent:- (void)touchesMoved:withEvent: ve - (void)touchesEnded:withEvent: yöntemler kullanılarak kod snippet'idir:

- (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; 
} 

kod oldukça ilgili ama şu güzel paneli animasyon sonuçlanır senin iOS panel gibi çok parmak.

Answer 2

Geç cevap için özür dilerim. Rob-s cevabına dayanan küçük bir lib oluşturdum. https://github.com/hoomazoid/CTSlidingUpPanel

Kullanımı oldukça basit:

@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) 
}