うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift 3】UITableViewとUIPickerViewを組み合わせて使ってみた

魚ライン
魚ライン

どもども。

UITableViewのセルを選択すると、UIPickerViewを表示して、その値をセル上のラベルに表示するというのを実装してみたので紹介します。

こんな感じのです。



 

なんだかんだで結構実装に時間かかりました・・・。

大雑把にですが紹介していきます。

色々バラけて読みづらいので全体コードから見た方が良いかもです(´・ω・`)

 

TableViewを設置しよう

UITableViewを設置します。

 

 

UITableViewの設置自体の細かい説明は割愛します(´・ω・`)

 

カスタムセルを作ろう

File > New > File より

Cocoa Touch Class > Next

Class:CustomTableViewCell
Subclass of : UITableViewCell

で新しいファイルを作成します。

 

セルの右側にPickerViewで選択した値を表示するラベルを設置します。

CustomTableViewCellには以下のように記述しました。

 

addSubviewでもいいんですが、accessoryViewのが簡単ぽい。

チェックマークとかもここに設定するらしいです。

 

結構悩んだところなんですが、UITableViewCellを継承したクラスを作成すると、

この部分だけが追加されるんですね。

どっちかにラベルの追加を記述すればいいのかなぁと思って試行錯誤していたのですが、セルを取得してもラベルがnilになったり、文字が重複して表示されたりしました。

下記の記事を参考にさせていただき無事解決しました。

【swift】UITableView,UITableViewCellを使って,カスタムセルのテーブルを作る.

 

UIPickerViewを追加しよう

PickerViewを設置します。

PickerViewの上にツールバーを表示して、完了ボタンを設置しています。

キーボードの上にアクセサリーつけるみたいにできればいいのだけど上手くいかずとりあえずバラバラで追加してます…。

 

PickerViewは1つをすべてに使いまわしています。

それぞれで場合分けして列数、ラベルのテキストを返しています。

PickerViewのラベルをカスタマイズしない場合は、

の部分を

としてもokです。

 

TableViewとPickerViewをつなげよう

tableViewのセルを選択した際に、indexPathを変数に入れておいて、それをもとにpickerViewに表示するテキストを変更するようにします。

上記のpickerView部分は既に書いてありますが

このpickerIndexPathで場合分けしています。

 

tableViewのカスタムセルの右側のラベルには初期値をいれておきます。

PickerViewの選択後に現在の値を変更します。

それぞれの現在のString(currentGender,currentAnimal,currentSportsのみ)に値を入れてtableViewをreloadしても良いかも。

 

 

tableViewのセルを選択した際の処理は

 

pickerIndexPathに選択されたセルのindexPathをいれておき、pickerViewをリロードします。

そしてアニメーションで下からにゅっと表示しています。

 

閉じる時はツールバーに設置したdoneBtnで閉じます。

選択解除もしておきます。

 

これでとりあえずはokだと思うんですが、もうちょっと気になる点を改善します。

 

セルに表示されている文字からPickerViewをスタートさせる

例えば、セル上で「性別:男」となっている場合には、PickerViewを表示させた際に「男」が選択された状態であってほしいのです。

とりあえず便利なArrayから値が含まれているかどうか調べて、あればそのindexを返す関数をextensionで加えておきます。

 

pickerViewをリロードする直前に場合分けで列の選択をします。

 

なんかもっと上手く書ける気がするんですがどうなんだろう…。

現在入っているセルのテキストが、それぞれの配列の何番めなのかを調べてその位置まで移動させています。

これでちゃんと動くと思うんですが、なんかときたま上手く挙動してくれない・・・うーむ。

なんか改善策あったらまた追記します(´・ω・`)

 

TableViewのセルとPickerViewが被らないようにスクロール

今回は被ってないんですが、セルがいっぱいになると画面下部のセルはPickerViewと被っちゃいます。

それをこんな感じでスクロールして回避します。



 

cellを選択した際に以下のように追加。

 

そいで、完了ボタンを押した際に元の場所に戻るコードを追加。

 

 

こんな感じで実装してみました。

PickerViewとTableViewの組み合わせってわりとありそうなのにイマイチ欲しい情報が見つからなくてちょっと苦戦しました。

 

書いている最中に、色々問題も見つけて書き加えたり訂正したりしているうちに随分読みにくくなってしまったかもしれないです。

最後に全体コードのっけて終わりにします。

 

全体コード
ViewController.swift

 

CustomTableViewCell.swift

 

UIPickerView – 値を選択 -SwiftでiOSアプリ開発をするためのブログ

UIPickerView in UITableView -stackoverflow

魚ライン
モッピー!お金がたまるポイントサイト
魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン