2015年7月16日木曜日

UIDatePickerと画面制御 [Swift]

日付を設定するため、UIDatePickerを使った実装をしていきます。

仕様は以下のようにします。

  • 日付をテキスト表示したボタンを設置する。
  • そのボタンを選択すると、日付選択用のDatePickerが表示される。
  • DatePickerの値を変更すると、ボタンの日付テキストが更新される。
  • DatePicker以外の場所を選択すると、DatePickerが非表示になる。

日付テキストのボタンを設置

日付テキストボタンを宣言します。
storyboardでNavigationBarの真ん中にボタンを設置して、宣言と繋げます。

ボタン選択時にDatePickerを表示

続いてDatePickerを宣言します。
storyboardで画面下部にDatePickerを設置して、hiddenにします。
そしてボタン選択時に表示するように実装します。
確認してみると問題が、、DatePickerが透明なため背景と同化して見づらい。。。
ということで、DatePicker下に背景色付きで画面サイズのボタンを設置することにしました。
最初はDatePickerに背景色をつけよう。と思ったのですが、DatePicker表示中は画面制御したいことと、非表示にする時のことを考えるとね。
これでDatePickerが見やすくなったし、DatePicker以外の場所をタップすると非表示になりました!
画面構成は下記画像のようになります。

DatePickerの値変更を適用

DatePickerのvalueChangedで、ボタンの日付テキストに値を適用する処理を実装します。
ついでに、NSDateのフォーマット処理をメソッド化します。初期値設定時などにも使いそうなので。
以上で日付が設定処理は終わりです。

おまけ:テキストの編集処理

おまけで、同じ画面にテキスト編集の処理も実装します。
なぜここに書くかというと、DatePickerの非表示処理を使ってキーボードも閉じちゃおうという魂胆だからです。

まずはTextViewを宣言します。
そしてTextViewにフォーカスが当たった時に、画面を制御する例のボタン(背景色付きで画面サイズのボタン)を表示してあげます。
例のボタンをタップするとキーボードも閉じるようにします。
補足ですが、キーボードが出てるとDatePickerが隠れて見えなかったので、日付設定ボタンも制御しました。
これでテキスト編集中の画面制御とキーボード閉じる処理が実装できました。
お疲れ様でしたー。

0 件のコメント:

コメントを投稿