[Swift]「アラート」

“iOSアプリ開発においてアラート表示は重要な要素です。

本記事では初心者向けに、基本的なアラートの作成方法からカスタムアニメーションの組み込み方までを解説します。

目次

iOSアプリ開発におけるAlert(アラート)とは?

iOSアプリ開発において、Alert(アラート)は欠かせない重要なコンポーネントです。アラートはユーザーに重要な情報を伝えたりユーザーアクションを促したりするために幅広く活用されます。例えば、アプリ内で予期しないエラーが発生した場合や、重要なデータを削除する前に確認を求める際に、アラートは頻繁に利用されます。

アラートの基本形

次のようなアラートをコードで書いてみましょう。

  • showBasicAlert()関数を呼び出します。
  • アラート“というタイトルと”これは基本的なアラートの例です。“というメッセージを持つアラートがポップアップスタイルで表示されます。
  • OKボタンをタップすることでアラートが閉じられる仕組みが実現されます。
func showBasicAlert() {

//STEP1: 
    let alert = UIAlertController(
        title: "アラート", 
        message: "これは基本的なアラートの例です。", 
        preferredStyle: .alert)
    
//STEP2: 
    let okAction = UIAlertAction(
        title: "OK", 
        style: .default, handler: nil)
    
//STEP3:
    alert.addAction(okAction)
    
//STEP4:
    present(alert, animated: true, 
        completion: nil)
}
STEP
let alert = UIAlertController(
  • アラートはUIAlertControllerというクラスを使って作成されます。
  • UIAlertControllerは、アラートのタイトル(”アラート”)とメッセージ(”これは基本的なアラートの例です。”)を持つインスタンスを作成します。
  • preferredStyle.alertを指定しているため、アラートはポップアップスタイルで表示されます。
STEP
let okAction = UIAlertAction(
  1. 次に、UIAlertActionというクラスを使ってOKボタンを作成します。
  2. OKボタンは、タイトルが”OK”で、デフォルトのスタイル(.default)を持つものです。
  3. ボタンがタップされた際に実行する処理は、ここではhandler: nilとなっており、何も指定されていないため、OKボタンをタップしても特定の処理は行われません。
STEP
alert.addAction(okAction)
  • 作成したOKボタンをアラートに追加します。
  • alert.addAction(okAction)により、OKボタンがアラートに組み込まれます。
STEP
present(alert, animated: true, completion: nil)
  • 最後に、present(_:animated:completion:)メソッドを使ってアラートを画面に表示します。
  • animatedtrueを指定すると、アラートがアニメーション付きで表示されます。
  • completionには、アラートが表示された後に実行する処理を指定することができますが、ここではnilとしているため、特定の処理は行いません。

アラートの基本形+カスタムデザイン

アラートの基本形に、カスタムデザインを加えたアラートを作成する方法を示しています。アラートの見た目やスタイルをカスタマイズするために、次のようなコード(STEP1〜3)を追加することができます。

func showCustomAlert() {
    let alert = UIAlertController(
        title: "カスタムアラート", 
        message: "カスタムデザインを加えたアラートの例です。", 
        preferredStyle: .alert)
    
//ここにカスタムデザインのための追加コードを書きます。
//STEP1: アラートの背景色を変更
//STEP2: テキストの色やフォントを設定
//STEP3: ボタンのスタイルをカスタマイズ
    
    let okAction = UIAlertAction(title: "OK", 
        style: .default, 
        handler: nil)
    
    alert.addAction(okAction)

    present(alert, animated: true, 
        completion: nil)
}
STEP
背景色を変更する
alert.view.backgroundColor = UIColor.red
  • アラートの背景色赤色に変更しています。
  • このようにアラートのUI要素をカスタマイズすることで、特定のテーマやデザインに合わせた見た目を実現できます。
STEP
テキストの色とフォントを設定する
let attributedTitle = 
    NSAttributedString(string: "カスタムアラート", 
    attributes: 
    [NSAttributedString.Key.foregroundColor: 
        UIColor.blue, 
     NSAttributedString.Key.font: 
        UIFont.boldSystemFont(ofSize: 20)])

alert.setValue(attributedTitle, forKey: "attributedTitle")
  • NSAttributedStringを使って、アラートのタイトルのテキスト色青色に、そしてフォント太字サイズ20に設定しています。
  • これにより、アラートの見た目を変更し、ユーザーに目を引くエレガントなデザインを適用できます。
STEP
ボタンのスタイルをカスタマイズする
let okAction = UIAlertAction(title: "OK", 
    style: .default, 
    handler: nil)
okAction.setValue(UIColor.green, 
    forKey: "titleTextColor")
  • OKボタンのテキスト色緑色に変更しています。
  • アクションボタンのテキスト色を変更することで、ボタンの目立ちやすさや装飾を調整できます。

Xcodeに実装しよう:ユーザーサインアップ時のアラート作成

ユーザーサインアップ時にアラートを設定したコードをXcodeに書いて、実際に起動してみます。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var usernameText: UITextField!
    @IBOutlet weak var passwordText: UITextField!
    @IBOutlet weak var password2Text: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func signupClicked(_ sender: Any) {
        // ユーザー名が未入力の場合、エラーアラートを表示します。
        if usernameText.text == "" {
            makeAlert(titleInput: "Error", 
                messageInput: "Username not found!")
        }
        // パスワードが未入力の場合、エラーアラートを表示します。
        else if passwordText.text == "" {
            makeAlert(titleInput: "Error", 
                messageInput: "Password not found!")
        }
        // パスワードが確認用と一致しない場合、エラーアラートを表示します。
        else if passwordText.text != password2Text.text {
            makeAlert(titleInput: "Error", 
                messageInput: "Passwords do not match")
        }
        // ユーザー登録が成功した場合、成功アラートを表示します。
        else {
            makeAlert(titleInput: "Success", 
                messageInput: "User OK")
        }
    }
    
    // カスタムのアラートを作成し表示するメソッドです。
    func makeAlert(titleInput: String, messageInput: String) {
        // UIAlertControllerを使ってアラートを作成します。
        let alert = UIAlertController(
            title: titleInput, 
            message: messageInput, 
            preferredStyle: UIAlertController.Style.alert)

        let okButton = UIAlertAction(
            title: "OK", 
            style: UIAlertAction.Style.default, handler: nil)
        alert.addAction(okButton)
 
        self.present(alert, animated: true, completion: nil)
    }
}

このViewControllerクラスでは、ユーザー登録フォームの3つのUITextField(ユーザー名、パスワード、パスワード確認用)をStoryboardのIBOutletとして接続しています。

signupClickedメソッド
  • signupClickedメソッドは、”SignUp”ボタンがタップされた際に実行されます。
  • このメソッドでは、入力フォームに応じてエラーアラートを表示するか、ユーザー登録が成功した旨のアラートを表示する処理を行います。
makeAlertメソッド
  • makeAlertメソッドは、カスタムのアラートを作成し、指定したタイトルとメッセージを表示するためのメソッドです。
  • UIAlertControllerを使ってアラートを作成し、”OK”ボタンを追加しています。
  • makeAlertメソッド内でアラートを作成し、画面に表示することで、エラーや成功メッセージを表示する仕組みが実現されています。

makeAlertメソッドは、カスタムのアラートを作成し、指定したタイトルとメッセージを表示するためのメソッドです。UIAlertControllerを使ってアラートを作成し、”OK”ボタンを追加しています。makeAlertメソッド内でアラートを作成し、画面に表示することで、エラーや成功メッセージを表示する仕組みが実現されています。

これにより、”SignUp”ボタンがタップされた際に、ユーザー名とパスワードの入力状態を確認し、適切なアラートを表示することができます。

Username未入力の場合
Password未入力の場合
Passwordが確認用と不一致の場合
ユーザー登録に成功した場合

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次