AI Engineering Service

AI Engineering Serviceの公式ブログです。開発者のプライベートな内容を含みます。

【swift5】横にスライドする画面のサンプル

f:id:ibarakito:20190723235723p:plain

横にスライドして次の画面を表示するサンプルを作りました。
画面遷移ではなく、次のデータが入ったビューを横から引っ張り出してくるイメージです。

ビューの宣言と初期化

    //2枚のビューを使ってスライドを表現する。スライド回数の奇数偶数で状態が2種類ある
    var isOdd : Bool = false
    let OmoteView : UIView
    let SwipeView1 : UIView
    let SwipeView2 : UIView
    init(){
        OmoteView   = UIView.init()
        SwipeView1   = UIView.init()
        SwipeView2   = UIView.init()
        super.init(nibName: nil, bundle: nil)

    }

ビューの定義と初期位置の設定、スワイプジェスチャーの定義。
指一本でのスワイプを検知して指定の関数(handleSwipeLeft,Right)を呼び出します。

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(SwipeView1)
        self.view.addSubview(SwipeView2)
        self.view.addSubview(OmoteView)
        self.view.backgroundColor = UIColor.white
        OmoteView.backgroundColor = UIColor.white
        SwipeView1.backgroundColor = UIColor.blue
        SwipeView2.backgroundColor = UIColor.red
        
        //初期ポジション
        OmoteView.frame = CGRect(x:0,y:0,width:view.frame.width/2,height:view.frame.height)
        SwipeView1.frame = CGRect(x:view.frame.width/2,y:0,width:view.frame.width/2,height:view.frame.height)
        SwipeView2.frame = CGRect(x:view.frame.width,y:0,width:view.frame.width/2,height:view.frame.height)

        //ジェスチャを拾うおまじない
        let swipeRightGesture: UISwipeGestureRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeRight))
        swipeRightGesture.numberOfTouchesRequired = 1  // number of fingers
        swipeRightGesture.direction = UISwipeGestureRecognizer.Direction.right
        self.view.addGestureRecognizer(swipeRightGesture)
        // single swipe left
        let swipeLeftGesture: UISwipeGestureRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeLeft))
        swipeLeftGesture.numberOfTouchesRequired = 1  // number of fingers
        swipeLeftGesture.direction = UISwipeGestureRecognizer.Direction.left
        self.view.addGestureRecognizer(swipeLeftGesture)

    }
    

奇数回スワイプされたか偶数回スワイプされたかで表示されているビューが異なります。
表示されているビューの隣にもう一つのビューをくっつけて、2つのビューを同時にスライドさせることで入れ替えを実現しています。

    //左スワイプ
    @objc func handleSwipeLeft(sender: UITapGestureRecognizer){
        print("Swiped left!")
        if(isOdd){
            SwipeView1.frame.origin.x = SwipeView2.frame.maxX
            isOdd=false
        }else{
            SwipeView2.frame.origin.x = SwipeView1.frame.maxX
            isOdd=true
        }
        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveLinear, animations: {
            self.SwipeView1.center.x -= self.SwipeView1.frame.width
        }, completion: nil)
        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveLinear, animations: {
            self.SwipeView2.center.x -= self.SwipeView1.frame.width
        }, completion: nil)
      return
    }
    
    //右スワイプ
    @objc func handleSwipeRight(sender: UITapGestureRecognizer){
        if(isOdd){
            SwipeView1.frame.origin.x = SwipeView2.frame.minX - SwipeView2.frame.width
            isOdd=false
        }else{
            SwipeView2.frame.origin.x = SwipeView1.frame.minX - SwipeView1.frame.width
            isOdd=true
        }
        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveLinear, animations: {
            self.SwipeView1.center.x += self.SwipeView1.frame.width
        }, completion: nil)
        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveLinear, animations: {
            self.SwipeView2.center.x += self.SwipeView1.frame.width
        }, completion: nil)
        return
    }

サンプルコードをGitHubで公開しています。
github.com

プライバシーポリシー / お問い合わせ