1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Swift エラーメッセージをアニメーションをつけて表示

Last updated at Posted at 2020-12-20

#エラーメッセージをアニメーションをつけて表示
今回、Swiftを使ってかっこいいエラーメッセージを実装していきたいと思います。

#まず初めにtextfieldとbuttonを設置
わかりやすいようにカラーを指定しておきました。
スクリーンショット 2020-12-20 22.25.40.png

#エラーメッセージを表示するViewを設置
エラーViewをPink色にして、左右下を20,高さを60に設定しましょう。
スクリーンショット 2020-12-20 22.28.58.png
#コードとbuttonなどアイテムをつなげる
textfield、button、エラーを表示するviewをOutlet接続。
(textfield、button、errorView)
buttonをTouchUpInsideでAction接続。
(buttonTouchUpInside)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textfield: UITextField!
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var errorView: UIView!


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    @IBAction func buttonTouchUpInside(_ sender: Any) {
    }

    
}

エラーを表示するviewのbottomも接続。
(errorViewBottom)
スクリーンショット 2020-12-20 22.48.34.png

#コードを書いていく
今回は、textfieldに文字が入力されていないときにbuttonがタップされるとエラーが表示されるようにします。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textfield: UITextField!
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var errorView: UIView!
    @IBOutlet weak var errorViewBottom: NSLayoutConstraint!


    override func viewDidLoad() {
        super.viewDidLoad()
        //画面が表示されたときにerrorViewが隠れるようにする
        errorViewBottom.constant = -60
    }

    //buttonがタップされた時
    @IBAction func buttonTouchUpInside(_ sender: Any) {
        //もしtextfieldに文字が入力されていない時
        if textfield.text == "" {
            //ここからが本題
            UIView.transition(
                // アニメーションさせるview
                with: self.errorView,
                // アニメーションの秒数
                duration: 0.2,
                // アニメーションの指定 等速
                options: [.curveLinear],
                // アニメーション中の処理   //X軸は変わらないので0、Y軸は上方向に20移動したいのでerrorViewのサイズの60に移動したい20を足して-80を指定
                animations: {self.errorView.transform = CGAffineTransform(translationX: 0, y: -80)},
                //アニメーションが終了した後の処理
                completion:  { (finished: Bool) in
                    //4秒間待機
                    DispatchQueue.main.asyncAfter(deadline: .now() + 4.0) {
                        //再びアニメーション
                        UIView.transition(
                            // アニメーションさせるview
                            with: self.errorView,
                            // アニメーションの秒数
                            duration: 0.2,
                            // アニメーションの指定 等速
                            options: [.curveLinear],
                            // アニメーション中の処理   //次は下げたいので先ほどとは逆で80を指定
                            animations: {self.errorView.transform = CGAffineTransform(translationX: 0, y: 80)},
                            //アニメーションが終了した後の処理   //これで終わりなのでnil
                            completion:  nil
                        )
                    }
                }
            )
        }
    }


}

これで完成!!!

#応用
ezgif-2-a274cef267f9.gif

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?