仕様は以下のようにします。
- 日付をテキスト表示したボタンを設置する。
- そのボタンを選択すると、日付選択用の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 件のコメント:
コメントを投稿