[Tips]UIAlertControllerでアラートやアクションシートを表示するには?

はじめに

iOSではUIActionControllerを使用して、ポップアップでアラートを表示したり、選択肢(アクションシート)を表示したりして、ユーザーに項目を選択させることができます。

iPhoneにおいては、アラートの表示も選択肢の表示も問題なく動作します。しかし、iPadにおいてはiPhoneと同様の実装を行うと、アラートは動作しますが、選択肢(アクションシート)の表示は落ちてしまいます。

本TipsではiPhoneとiPadでアラートとアクションシートを表示する方法について説明します。

今回作成するサンプルは以下のようなものです。

環境

Xcode:9.4.1
Swift:4.1.2

AlertControllerの使用方法

はじめに、AlertControllerの使用してアラートを表示する方法について説明します。これが基本となります。

Xcodeを起動してSingle View Appプロジェクトを作成します。

次にMain.storyboardを開いてUIButtonを1つ貼り付けます。

続いて、貼り付けたButtonのアクション接続を作成します。

名称は、buttonAlertとしました。

コードはiPhoneもiPadも同一のもので動作します。コード例を以下に示します。

①の部分でUIAlertControllerのインスタンスを作成し、②と③でOKボタンとキャンセルボタンを作成しています。

④で、①で作成したインスタンスにOKボタンとキャンセルボタンを追加し、⑤でアラートの表示をしています。詳細はコード中のコメントを参照してください。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.alertを指定してアラート表示にする
    let alert: UIAlertController = UIAlertController(
        title: "アラート表示",
        message: "メールを送信します。よろしいですか?",
        preferredStyle: UIAlertControllerStyle.alert)
    
    // ②OKボタンの作成
    // titleにボタンのテキストを、styleにUIAlertActionStyle.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    let okAction: UIAlertAction =
        UIAlertAction(
            title: "OK",
            style: UIAlertActionStyle.default,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("OK")
    })
    
    // ③キャンセルボタンの作成
    // OKボタンと同様に作成
    let cancelAction: UIAlertAction =
        UIAlertAction(
            title: "キャンセル",
            style: UIAlertActionStyle.cancel,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("Cancel")
    })
    
    // ④UIAlertControllerのインスタンスに作成したボタンを追加
    alert.addAction(cancelAction)
    alert.addAction(okAction)
    
    // ⑤アラートを表示
    present(alert, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPhoneでのActionSheet表示

UIAlertControllerでのアラート表示方法を理解したら、iPhoneにおける選択肢(ActionSheet)の表示方法を理解しましょう。

コード例を以下に示します。この例ではユーザーに「バスケットボール」「野球」「テニス」の選択肢を示し、選択してもらうためのアクションシートを表示します。

はじめに①の部分でUIAlertControllerのインスタンスを生成します。アラートの時との違いは preferredStyle に UIAlertControllerStyle.actionSheet を指定するという部分です。

②では選択肢を作成し、①で作成したインスタンスに追加をしています。アラートのOKボタン作成時のコードとほぼ同様です。

最後に③でアクションシートを表示します。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPadでのActionSheet表示

iPadではiPhoneと同様に実装すると落ちてしまいます。

そこで、コードを以下のように実装します。

違いは以下コードの③の部分のみです。

iPadでアクションシートを表示するには、アクションシートを表示するViewと表示位置を指定する必要があります。

Viewは popoverPresentationController?.sourceView に、表示位置は popoverPresentationController?.sourceRect に指定します。このとき表示位置をsender(つまりはアクションシートを表示するために押されたボタン)を指定することで、そのボタンから吹き出しのようにアクションシートが表示されるようになります。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③表示するViewと表示位置を指定する
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
    
    // ④アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

③の部分を以下のように変更することで、デバイスを自動的に判断して実行できるようになります。このように記述すればiPhoneでもiPadでも動作させることが可能になります。

デバイスの判定については「[Tips] 使用中のデバイスを判定する」の記事を参考にしてください。

// ③表示するViewと表示位置を指定する(デバイス自動判定版)
if UIDevice.current.userInterfaceIdiom  == .pad {
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
}

上記の実行例を以下に示します。

ボタンのスタイルについて

最後にボタンのスタイルについて説明します。

ボタンのスタイルは以下に示す3種類を指定することができます。

スタイル 説明
default 標準ボタン用
cancel キャンセルボタン用
destructive 赤文字

必要に応じて選択するようにしましょう。

[ライブラリ] EurekaのPickerRowとPickerInlineRowを使用する方法

はじめに

今回はEurekaのPickerRowとPickerInlineRowの使用方法について説明します。

EurekaのPickerRowやPickerInlineRowは、UIPickerViewに相当するUI部品です。任意の選択肢を表示して、ユーザーに選択させることができます。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

作成するサンプルは以下の通りです。

 

環境

Xcode:9.4.1
Swift:4.1.2

PickerRowを使用するには?

PickerRowは、設定画面の中に直接選択肢を表示させることができます。よって選択肢は常に表示されたままとなります。

たとえば、曜日を選択できるようにPickerRowを作成するには、以下のようなコードを記述します。

class EurekaViewController: FormViewController {

    var selectedGender : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("設定")
            <<< PickerRow<String>() { row in
                row.title = "曜日"
                row.options = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"]
                row.value = row.options.first
            }.onChange {[unowned self] row in
                self.selectedGender = row.value!
                print(self.selectedGender )
            }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

PickerRowの基本書式

<<< PickerRow<表示項目(選択肢)のデータ型>() { row in
    row.options = 選択肢を表す配列
    row.value = row.options.first
}.onChange {[unowned self] row in
    // 値変更時の処理
}

1行目の<>の中には、表示項目のデータ型を指定します。一般的には文字列を表示しますのでStringとします。

2行目のrow.optionsには、文字配列を代入します。ここで代入した値が、選択肢となって表示されます。

3行目のrow.valueは、初期値として選択しておく項目を指定します。

4行目のonChangeには、選択肢が変更された場合の処理を記述します。

※PickerRowはタイトルを設定できないようです。row.titleプロパティを使用してみましたが表示できないことを確認しています。

PickerRowの実行例

上記コードの実行例を以下に示します。

PickerInlineRowを使用するには?

PickerInlineRowは、初期表示時は選択肢が表示されません。タップした時に初めて選択肢が表示されます。

使い方はPickerRowと同じです。コードもPickerRowをPickerInlineRowに変更するだけで同様に使用することができます。参考までに以下にコード例を示します。

class EurekaViewController: FormViewController {

    var selectedGender : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("設定")
            <<< PickerInlineRow<String>() { row in
                row.title = "曜日"
                row.options = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"]
                row.value = row.options.first
            }.onChange {[unowned self] row in
                self.selectedGender = row.value!
                print(self.selectedGender )
            }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

PickerInlineRowの基本書式

<<< PickerInlineRow<表示項目(選択肢)のデータ型>() { row in
    row.title = タイトルを表す文字列
    row.options = 選択肢を表す配列
    row.value = row.options.first
}.onChange {[unowned self] row in
        // 値変更時の処理
}

PickerInlineRowは、row.titleでタイトルを設定することができます。

PickerInlineRowの実行例

上記コードの実行例を以下に示します。

 

 

 

[ライブラリ] EurekaのSwitchRowを使用する方法

はじめに

今回は、EurekaライブラリのSwitchRowを使用する方法を説明します。作成するサンプルは以下の通りです。SwitchRowはOn/Offを選択できるようにするUI部品です。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

環境

Xcode:9.4.1
Swift:4.1.2

サンプルコード

はじめに、サンプルコードを示します。このサンプルコードは、Wi-FiのOn/Offを選択できるようにするものです(実際にWi-FiのOn/Offをするコードではありません)。

import Eureka
import UIKit

class EurekaViewController: FormViewController {

    var onWiFi : Bool = false
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("ネットワーク設定")
            <<< SwitchRow(){ row in
                row.title = "Wi-Fi"
                row.value = true
                }.onChange{[unowned self] row in
                    self.onWiFi = row.value!
                    print(self.onWiFi)
                }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

SwitchRowの基本書式

SwitchRowの基本書式を以下に示します。

<<< SwitchRow() { row in
    row.title = 行タイトルを表す文字列
    row.value = 初期値(Bool型)
}

row.titleは行のタイトルです。必要ない場合は書かなくても構いません。

row.valueは、はじめて表示されたときにOnにしておくかOffにしておくかをBool値で指定します。Onにしたい場合はtrueを設定します。

選択肢を取得する

選択肢が変更された場合は、onChangeのイベントが発生します。onChange関数の中で、最新の選択状態をクラスプロパティに格納しておくようにするとよいです。

選択された値は、row.valueで取得することができます。

実行例

以下に実行例を示します。

[ライブラリ] EurekaのSegmentedRowを使用する方法

はじめに

今回は、EurekaライブラリのSegmentedRowを使用する方法を説明します。作成するサンプルは以下の通りです。SegmentedRowは複数の選択項目の中から1つの項目を選択できるようにするUI部品です。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

環境

Xcode:9.4.1
Swift:4.1.2

サンプルコード

はじめに、サンプルコードを示します。このサンプルコードは、好きなくだものを3つ表示して、その中から1つを選ばせるためのSegmentedRowを作成しています。

import Eureka
import UIKit

class EurekaViewController: FormViewController {

    var fruit : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("くだもの")
            <<< SegmentedRow<String>() { row in
                row.title = "好きなくだもの"
                row.options = ["スイカ","メロン","モモ"]
                row.value = "メロン"
                }.onChange{[unowned self] row in
                    self.fruit = row.value ?? "選択なし"
                    print(self.fruit)
                }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
}

SegmentedRowの基本書式

SegmentedRowの基本書式を以下に示します。

<<< SegmentedRow<表示する値のデータ型>() { row in
    row.title = 行タイトルを表す文字列
    row.options = SegmentedRowに表示する選択肢の配列
    row.value = 初期値
}

書式ですが、「表示する値のデータ型」は基本的にStringを指定します。

row.titleは行のタイトルです。必要ない場合は書かなくても構いません。

row.optionsは、表示する選択肢を配列で記述します。

row.valueは、はじめて表示されたときに選択状態にしたい項目を指定します。指定しない場合は、いずれの項目も選択されていない状態になります。

選択肢を取得する

選択肢が変更されるために、onChangeのイベントが発生します。onChange関数の中で、最新の選択項目をクラスプロパティに格納しておくようにするとよいです。

サンプルコードに示しましたが[unowned self]と記述して、クラスメンバーをselfで参照できるようにしています。[unowned self]はメモリリーク防止のために記述しています。

選択された値は、row.valueで取得することができます。

実行例

以下に実行例を示します。

[Tips]コードスニペットを作成するには?

はじめに

よく使用するコードをなんども入力するのは面倒ですね。

そこで、よく使用するコードはライブラリとして登録して使い回せるようにします。これをコードスニペットと呼びます。

今回は、コードスニペットを作成する方法を説明します。

環境

Xcode:9.4.1
Swift:4.1.2

コードスニペットの登録方法

以下のようなコメントがあるとします。これを毎回入力するのもコピペして使いまわすのも大変です。

///==================================================
/// 機能:
/// 引数:
///     引数1:
///     引数2:
/// 戻り値:
///
/// Create Date:
/// Update Date:
///==================================================

そこで、コードスニペットとして登録します。

はじめにXcode上でコードスニペットにしたいコードを入力します。

次に、入力したコードを選択して、コードスニペットライブラリにドラッグ&ドロップします。

以下のように詳細情報を入力する画面が表示されるので必要に応じて編集します。

  • Title:登録するコードスニペットのタイトルを入力
  • Summary:コードスニペットの説明を入力
  • Platform:iOSやmacOSなど、コードスニペットを使用するターゲットを選択します。
  • Language:対象の言語を選択します。Swiftが対象の場合は「Swift」を選択。
  • Completion Shortcut:コードスニペットを入力するときのショートカット文字列を入力します。Xcode上でこの文字を入力すると、ここで登録したコードスニペットが入力されます。
  • Completion Scopes:ここで設定したスコープ内で入力補完されます。+を押すことで、複数指定が可能です。

プレースホルダも作成することができます。プレースホルダは、登録したコードスニペット内でTabキーを押して移動できる文字列です。コードスニペットのコードを入力したあとに、変更したい場所がある場合はプレースホルダにしておきます。

プレースホルダを作成するにはコードスニペット内で <# 文字列 #> と入力します。

Completion Scopes

Completion Scopesについて、もう少し詳しく説明します。

Completion Scopesは実際には以下の種類があります。

Completion Scopes 説明
ALL 全てのスコープで使用可能
String or Comment 文字列リテラルとコメント内で使用可能
Top Level importよりも下のレベルで@interface, @implementationより外のスコープ

[Tips]NavigationBarの背景色を変更するには?

はじめに

NavigationBarの背景色はAttribute Inspectorから変更することができないので、コードから変更する必要があります。

環境

Xcode:9.4.1
Swift:4.1.2

背景色の変更

背景色を変更するには、以下のようにコードを記述するだけです。この例では紫を設定しています。

self.navigationController?.navigationBar.backgroundColor = UIColor.purple

実行すると以下のように背景色が設定されます。

 

[Tips]ハンバーガーメニューを作成するには?

はじめに

ハンバーガーメニューは、様々な作成方法があります。

ここでは、メインのViewControllerにハンバーガーボタンを設置して、タップされた時に別のViewControllerをオーバーレイ表示させてメニューを表示させる方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

1.Navigation Controllerの配置

Single View Appのプロジェクトを作成したら、Storyboardを開いてメインのViewControllerを選択します。

次に、メニューの[Editor]-[Embed in]-[Navigation Controller]を選択します。

すると、以下のようにNavigation Controllerが追加されて、メインのViewControllerにはNavigation Barが表示されます。

2.ハンバーガーアイコンの設置

次にハンバーガーアイコンを設置します。

はじめに、以下のような画像を準備して、Assetsフォルダに入れます。Assetsフォルダ場では、追加したハンバーガーアイコンの名前を「menu」にしておきます。

続いてメインのViewControllerにあるNabigation Barの左側に、Bar Button Itemを追加します。

続いて、配置したBar Button Itemに先ほど追加したハンバーガーアイコンを設定します。System Itemを「Custom」に、Imageを「menu」にします。これでハンバーガーアイコンが表示されます。

3.ハンバーガーメニュー用のビューを作成する

ハンバーガーボタンをタップした時に表示されるメニューを作成します。メニューは、ViewControllerで作成します。

新しくViewControllerを追加してください。

次にハンバーガーボタンを[control]キーを押しながら、追加したViewControllerにドラッグ&ドロップしてセグエを作成します。セグエは以下のように設定してください。

続いて、追加したViewControllerの背景色をBlackにします。

もう一度Backgroundを選択して、「Other…」を選択します。

別ウィンドウが表示されるのでOpacityを50%にします。

この設定で、ハンバーガーボタンが設置されている遷移元の画面を透けて見えるようにします。

続いて、メニュー用のViewControllerを選択してPresentation欄でOver Current Contextを選択します。

 

次にUIViewを配置します。画面の左側に寄せて配置してください。ここがメニューの領域になります。

4.メニュー画面用のViewControllerクラスの作成

メニュー画面用のViewControllerクラスを作成します。

新規でファイルの追加をし、Cocoa Touch Classを選択します。

続いて、クラス名を「MenuViewController」にし、Subclass ofを「UIViewController」にしてファイルを作成します。

Storyboardでメニュー用のViewControllerを選択して、作成したMenuViewControllerクラスを設定します。

続いて、メニューのアウトレット接続を作成します。アウトレット接続名はmenuViewとします。

最後に、メニュー以外の領域を設定しておきます。メニュー以外の部分を選択して、Tagを1に設定します。メニュー領域外が選択されたかどうかは、このTagに設定した番号をコードから参照して「1」であれば非表示になるようにします。

5.メニュー表示/非表示のアニメーションコードを作成する

最後にメニューの表示/非表示のコードを作成します。このコードはメニュー画面用に作成したMenuViewController.swiftに記述します。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // メニューの位置を取得する
    let menuPos = self.menuView.layer.position
    // 初期位置を画面の外側にするため、メニューの幅の分だけマイナスする
    self.menuView.layer.position.x = -self.menuView.frame.width
    // 表示時のアニメーションを作成する
    UIView.animate(
        withDuration: 0.5,
        delay: 0,
        options: .curveEaseOut,
        animations: {
            self.menuView.layer.position.x = menuPos.x
    },
        completion: { bool in
    })
    
}

// メニューエリア以外タップ時の処理
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    super.touchesEnded(touches, with: event)
    for touch in touches {
        if touch.view?.tag == 1 {
            UIView.animate(
                withDuration: 0.2,
                delay: 0,
                options: .curveEaseIn,
                animations: {
                    self.menuView.layer.position.x = -self.menuView.frame.width
            },
                completion: { bool in
                    self.dismiss(animated: true, completion: nil)
            }
            )
        }
    }
}

 

6.実行例

以上でハンバーガメニューの完成です。

実行例は以下の通りです。

 

[Tips]背景を透過させて遷移元のViewを見せるには?

はじめに

ViewControllerから別のViewControllerを呼び出した時に、Alertのように必要部分以外を透過させて見せたい場合があります。

今回は、背景を透過させる方法についてみていきます。

環境

Xcode:9.4.1
Swift:4.1.2

プロジェクトの作成

まずは、Single View Appのプロジェクトを作成します。

次に、Storyboardを開いて、ViewControllerにButtonを貼り付けます。

 

次に新しいViewControllerをstoryboardに配置します。

続いて、Buttonがタップされた時に追加したViewControllerに遷移するようにセグエを追加します。

セグエの種類は、ここではpresent Modallyにします。

続いて、遷移先のViewControllerの背景色を変更します。ここではBackgroundの欄でBlackを選択することとします。

もう一度 Background を選択して「Other…」を選択します。

別ウィンドウが表示されるので、Opacityを50%にします。ここのパーセンテージは透過率ですので、好みに合わせて調整してください。

さて、これだけでは背景が透けて見えるようにはなりません。

続いて遷移先のViewControllerを選択して(①)、Presentationに「Over Current Context」を選択します。

最後に、UIViewを配置して好きな色を設定します。

実行結果

実行をしてButtonをタップすると、画面は以下のようになります。遷移元のButtonが透けて見えていることが確認できます。

 

 

 

 

 

 

[Tips]Swiftのバージョンを確認するには?

Swiftのバージョンを調べるにはターミナルを使用します。

ターミナルを起動したら、コマンドラインで以下を入力します。

swift -v

このコマンドを実行すると、以下のようにバージョンを確認することができます。この場合はバージョンは4.1.2ということになります。

最後に以下の画面のように「1>」となり、入力待ちになります。

終了するには「:q」か「:exit」と入力します。

[ライブラリ] Eurekaの導入と利用〜その6 様々な行を追加する2

はじめに

前回はActionSheet行やAlert行を作成しました。今回は以下について見ていきます。

過去記事は以下を参照してください。

環境

Xcode:9.2
Swift:4.0.3

DateInlineRow

DateInlineRowを使用すると、行内で日付を選択して入力することが可能です。また日付が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

以下にコード例を示します。

form
    +++ Section("セクション")
    <<< DateInlineRow("") {
        $0.title = "日付を選択"
        }.onChange() { row in
            // 選択された日を表示
            print(row.value!)
    }

DateTimelineRow

DateTimeInlineRowを使用すると、行内で日付と時間を選択して入力することが可能です。また日時が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

 form
    +++ Section("セクション")
    <<< DateTimeInlineRow("") {
        $0.title = "日時を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

TimeInlineRow

TimeInlineRowを使用すると、行内で時間を選択して入力することが可能です。また時間が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

form
    +++ Section("セクション")
    <<< TimeInlineRow("") {
        $0.title = "時刻を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された時刻を表示
            print(row.value!)
        }

任意の日付を選択状態にするには?

DateInlineRow, DateTimeInlineRow, TimeInlineRowのいずれも初期値は現在日時です。任意の日時を選択したい場合は、DateFormatterで日付を作成し、$0.value = date のように作成した日付を設定してあげます。

以下にコード例を示します。

let formatter = DateFormatter()
let now = "2017/8/12"
formatter.dateFormat = "yyyy/MM/dd"
formatter.locale = Locale(identifier: "ja_JP")
let date = formatter.date(from: now)

form
    +++ Section("セクション")
    <<< DateTimeInlineRow("") {
        $0.title = "日時を選択"
        $0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

DateRow

DateInlineRowは、行内で選択することができましたが、DateRowの場合は下からPickerがニュルッと出てきます。使用方法はDateInlineRowと同じです。

form
    +++ Section("セクション")
    <<< DateRow("") {
        $0.title = "日付を選択"
        }.onChange() { row in
            // 現在のチェック状態を表示
            print(row.value!)
    }

DateTimeRow

DateTimeInlineRowは、行内で選択することができましたが、DateTimeRowの場合は下からPickerがニュルッと出てきます。使用方法はDateTimeInlineRowと同じです。

form
    +++ Section("セクション")
    <<< DateTimeRow("") {
        $0.title = "日時を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

TimeRow

TimeInlineRowは、行内で選択することができましたが、TimeRowの場合は下からPickerがニュルッと出てきます。使用方法はTimeInlineRowと同じです。

form
    +++ Section("セクション")
    <<< TimeRow("") {
        $0.title = "時刻を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された時刻を表示
            print(row.value!)
        }