Xibファイルをアニメーションさせる

12962 ワード
Storyboard Swift xib Xcode animation Xcode テキストリンク

フッター的なものXibを作って、出し入れしたかったので、練習でつくりました〜。

1.Xibファイルを作る

詳しくはこちら(参考)

新しいUIViewファイルを作って　.xibと名前をつけて保存します。

2. Xibファイルのサイズを変更する

Xibファイルを"Freeform"に変更してheightを100に変更！
ついでに、Autoresizingも全部矢印をつける！

エラー注意：

中に色々ImageViewやLabelを入れる場合は、Auto Layout のチェックをオフにしないと、エラーが起きる。

3. Xibファイルを制御するクラスを作って繋げる

1. Xibファイルと同じ名前でswiftファイルを作る

SampleView.swift
import UIKit
class SampleView: UIView {

    override init(frame: CGRect) {
        super.init(frame:frame )
        loadXibView()

    }
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            loadXibView()
        }

        func loadXibView() {
            let view = Bundle.main.loadNibNamed("SampleView", owner: self, options: nil)?.first as! UIView
            view.frame = self.bounds
            self.addSubview(view)
        }
}

ちなみに、loadNibNamed(Xibファイル名)はXibファイルを読み込むメソッドです。

4.Xibファイルにクラス指定する

.xibファイルのFile Ownerに新しく作ったswiftファイルの名前をつける。

よくあるxibエラーへの参考! https://stackoverflow.com/questions/30335089/reuse-a-uiview-xib-in-storyboard

5. ストーリーボードでXibを出すUIView作成　+ ボタン作成

これが終わったら、
UIViewのOutletと、ButtonのAction OutletをViewControllerに作っておく。

6. ViewControllerの中

ViewController.swift
import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var myView: UIView!

    var isVisible = true

    override func viewDidLoad() {
        super.viewDidLoad()
        self.loadTemplate()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        myView.center.y  += view.bounds.height
    }


    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
                       animations: {
                        self.myView.center.y -= self.view.bounds.height
        },
                       completion: nil
        )
    }

    func loadTemplate(){
        let view = SampleView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height))
        myView.addSubview(view)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func tapped(_ sender: UIButton) {


        UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
                       animations: {

                        if self.isVisible{
                            self.myView.center.y += self.view.bounds.height
                            self.isVisible = false
                        } else{
                            self.myView.center.y -= self.view.bounds.height
                            self.isVisible = true
                        }
        },
                       completion: nil
        )
    }
}

完成コードはこちら