新人奮闘記12
iOS 開発
お天気アプリ開発
今回は、取得した天気データをテーブルに任意の形で出力していきます。
Tableといえば、リスト形式で一覧表示させるためのもので、各行にテキストや画像に加え、セルをタップすると詳細画面へ遷移するようなものが多いかと思います。
そこで今回は、各セルの内容を以下のようなイメージで、実装しようとしましたが、デフォルトでは、方法が存在しなかったので、セルを自前でカスタムするため、UITableViewCellというものを使って実装したので、記載しておきます。
※5つのUIを配置していますが、制約(Constraint)については割愛させていただきます。
セルをカスタムするには、まずUITableViewCellを継承したクラスを作成します。
今回は、それをCustomTableViewCellとして、作成しました。
このセルを、TableViewControllerクラスで扱う為に、identifierを設定します。今回は、Cellとしています。
以下はその例です。
次に、ストーリーボードで配置したUIImageやLabelなどのオブジェクトを拡張したCustomTableViewCellクラスと紐づけしていきます。
この作業を行なわなければ、TableViewにUIは認識されない事がわかりました。
これにより、ソースコードにてセルが扱えるようになります。
セルを認識させた後、実際に値を挿入した例です。
[WeatherTableViewController.Swift]
323行目にて、作成したクラスCustomTableViewCellを読み込み、次の行から各UIへ、実際の値を挿入しています。セルに表示する値は、任意でタプルや配列を挿入しますが、今回は、お天気データを配列として扱いその値を格納していきました。
cell.myImageView へicon
cell.mainWeatherへRain
cell.nowDateへ9/13
cell.nowMinへ最低8.32℃
cell.nowMaxへ最高18.41℃を挿入しました。
以上で、カスタムされたセルが完成しました。
まとめ
・ カスタムセルを作成する時はUITableViewCellを継承したクラスを作成する
・ ストーリーボードのshow the idendity inspectorにてストーリーボードに配置したUIとUITableViewCellを拡張したクラスを紐づける。
・ ストーリーボードのshow the Attributes inspecterにてセルに対して識別子を設定する。
keny
admin at 2016年09月12日 12:39:09