【Swift】UIViewで左右からスライドを出現させる

 

完成図

 

 

解説

 

・3つのStoryBoardを用いる

・色付けしたUILabelをスライドにした

・ContainerViewでViewの描画領域を確保する

・"Left"または"Right"のボタンを押すと、それぞれに対応するStoryBoardのUIViewControllerがアニメーション付きで描画される

・その時、Leftなら左から、Rightなら右側から、出てくるように見える

・LeftViewController,RightViewControllerには一切の記述なし

 

・UIScreen.main.bounds.width:スクリーンの幅

・UIScreen.main.bounds.height:スクリーンの高さ

・Left (Right) InitFrame:初期のframe(座標位置)

・containerViewDispFrame:Main.StoryBoard(全てのUI部品を司るUIViewController)のframe(つまり原点)

 

ストーリーボード

 

f:id:nekokichi_yos2:20181011144320p:plain

f:id:nekokichi_yos2:20181011144323p:plain

f:id:nekokichi_yos2:20181011144325p:plain

 

ソースコード

import UIKit

class ViewController: UIViewController {
    
    //MainのViewControllerの右側へViewController移動した座標
    let RightViewInitFrame = CGRect(x: UIScreen.main.bounds.width, y: 0, 
                                        width: UIScreen.main.bounds.width,  
                                        height: UIScreen.main.bounds.height)
    
    //MainのViewControllerの左側へViewController移動した座標
    let LeftViewInitFrame = CGRect(x: -UIScreen.main.bounds.width, y: 0,  
                                        width: UIScreen.main.bounds.width, 
                                        height: UIScreen.main.bounds.height)
    
    ////MainのUIViewControllerと同じ座標
    let containerViewDispFrame = CGRect(x: 0, y: 0,
                                        width: UIScreen.main.bounds.width,
                                        height: UIScreen.main.bounds.height)
    
    @IBOutlet weak var RightView: UIView! {
        didSet {
            //StoryBoardのインスタンス
            let vc = UIStoryboard(name: "Right",
                                  bundle: nil).instantiateInitialViewController()
            RightView.frame = RightViewInitFrame
            RightView.addSubview(vc!.view)
        }
    }
    
    @IBOutlet weak var LeftView: UIView! {
        didSet {
            let vc = UIStoryboard(name: "Left",
                                  bundle: nil).instantiateInitialViewController()
            LeftView.frame = LeftViewInitFrame
            LeftView.addSubview(vc!.view)
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    //画面をタップした時
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        
        //画面を押した時に表示されているviewがRightかLeftだった場合
        for touch in touches {
            if let view = touch.view {
                //スライドを引っ込める
                traditionalVC(tag: view.tag)
            }
        }
        
    }
    
    //スライドを引っ込める(元に戻す)
    func traditionalVC(tag: Int) {
        
        //もしRightボタンを押したら
        if tag == 1 {
            RightAnimateInitFrame()
        }
        //もしLeftボタンを押したら
        else if tag == 2{
            LeftAnimateInitFrame()
        }
        
    }

    @IBAction func RightButton(_ sender: Any) {
        
        //既に左スライドが出てるなら
        //引っ込める
        if LeftView.frame == containerViewDispFrame {
            LeftAnimateInitFrame()
        }
        
        //もしまだ出てないなら右スライドが出てないなら
        //スライドを出す
        if RightView.frame != containerViewDispFrame {
            UIView.animate(withDuration: 0.3, animations: {
                self.RightView.frame = self.containerViewDispFrame
            })
        //既に右スライドが出てるなら
        //スライドを引っ込める
        } else {
            RightAnimateInitFrame()
        }
        
    }
    
    @IBAction func LeftButton(_ sender: Any) {
        
        if RightView.frame == containerViewDispFrame {
            RightAnimateInitFrame()
        }
        
        if LeftView.frame != containerViewDispFrame {
            UIView.animate(withDuration: 0.3, animations: {
                self.LeftView.frame = self.containerViewDispFrame
            })
        } else {
            LeftAnimateInitFrame()
        }
        
    }
    
    //右スライドを引っ込める
    func RightAnimateInitFrame() {
        UIView.animate(withDuration: 0.3, animations: {
            self.RightView.frame = self.RightViewInitFrame
        })
    }
    
    //左スライドを引っ込める
    func LeftAnimateInitFrame() {
        UIView.animate(withDuration: 0.3, animations: {
            self.LeftView.frame = self.LeftViewInitFrame
        })
    }
    
}