2016-10-05 3 views
0

私は、アプリケーションでインタラクティブなスライディングトランジションを作成しようとしています。Swiftのコントロールセンターのようなスライディングビューの実装

目標は、下からドラッグしてコントロールセンターと競合しないようにするビューコントローラを表示し、メインビューコントローラを部分的にカバーすることです(まったく同じようにiOSコントロールセンター)。遷移はインタラクティブに、すなわちユーザのドラッグに応じて行われるべきである。

利用可能なAPIに関するアイディアを喜んでお聞きしたいと思います。コードはシンプルslideViewアニメーションコードのXcode 8でテストし、働いていたことを行います後

+0

をリンクをチェックアウト。 –

+0

あなたの迅速な対応のために@JacobKingに感謝します。私はあなたの答えを待っています。 –

+0

@JacobKingあなたはコード – user6520705

答えて

0

..

import UIKit 

class ViewController: UIViewController,UIGestureRecognizerDelegate { 

// I am using VisualView as a slideView 
@IBOutlet weak var slideView: UIVisualEffectView! 

//Button to open slideView 
@IBOutlet weak var button: UIBarButtonItem! 

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 

    // setting background for sideView 
     slideView.backgroundColor = UIColor(patternImage: UIImage(named: "original.jpg")!) 

    //Initial hide so it won't show.when the mainView loads... 
     slideView.isHidden = true 

    // DownSwipe to hide slideView 
     let downSwipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.handleSwipes(_:))) 
     downSwipe.direction = .down 
     view.addGestureRecognizer(downSwipe) 
    } 

    // set UIButton to open slideVie...(I am using UIBarButton) 
    @IBAction func sdrawButton(_ sender: AnyObject) { 

     self.slideView.isHidden = false 
     slideView.center.y += view.frame.height 

     UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations:{ 
     self.slideView.center.y -= self.view.frame.height 
     self.button.isEnabled = false 
     }, completion: nil) 
} 

    func handleSwipes(_ sender:UISwipeGestureRecognizer) { 
    if (sender.direction == .down) { 
     print("Swipe Down") 

     self.slideView.isHidden = true 

     self.slideView.center.y -= self.view.frame.height 
     UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations:{ 
      self.slideView.center.y += self.view.frame.height 
      self.button.isEnabled = true 
      }, completion: nil) 
    } 
    } 
    } 

この質問は少しある場合

0

申し訳ありませんが...私はコードがあなたのために働く知ってみましょう古い。 あなたのUIViewのサブクラス指をスライドさせながら高さ制約を更新するために、元のタッチ位置

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { 
    guard let touch = touches.first else { print("No touch"); return } 
     startPoint = touch.location(in: self) 
     startHeight = heightConstraint.constant 
     slideDirection = .none 
     super.touchesBegan(touches, with: event) 
    } 

}

とtouchesMoved(_、と)を保存するtouchesBegan(_、有する)をオーバーライドすることができビュー。

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { 
    guard let touch = touches.first else { print("touchesMovedno touches"); return } 

    let endPoint = touch.location(in: self) 
    let diff = endPoint.y - startPoint.y 

    // This causes the view to move along the drag 
    switch anchorLocation { 
    case .top : 
    heightConstraint.constant = startHeight + diff 
    case .bottom : 
    heightConstraint.constant = startHeight - diff 
    } 
    self.layoutIfNeeded() 

    // Update direction 
    if diff == 0.0 { 
    self.slideDirection = .none 
    } else { 
    self.slideDirection = (diff > 0) ? .down : .up 
    } 
    super.touchesMoved(touches, with: event) 

}

オーバーライドtouchesEnded(_、と)あなたが

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { 

    self.modifyHeightConstraints() 
    self.animateViewTransition(duration: animDuration, delay: animDelay, clearance: animClearance, springDampingRatio: animSpringDampingRatio, initialSpringVelocity: animInitialSpringVelocity, complete: { 
    self.slideDirection = .none 
    }) 
    super.touchesEnded(touches, with: event) 

}

をご希望の場合は、アニメーションを追加するために、私はあなたが望んでいた正確な機能を持っている可能性があるコンポーネントを作成しました。このコンポーネントには、調整可能なアニメーションバウンスが含まれています。ストーリーボードのビューで、サブビューのレイアウトやデザインを行うことができます。

私はあなたがまだ答えずにする必要があります私は私のコードを持っていないが、私は家を得るとき、私はそれを上に送信することができ、前にこれを行っているGitHubの

https://github.com/narumolp/NMPAnchorOverlayView

関連する問題