【Swift】お天気アプリを作る（３）セルの高さを可変にしてお天気概況を表示しよう
Swiftが3.0になってから初めてのアプリ作成としてお天気アプリを作り始めました。
前回はJSONで出力される天気予報データをテーブルビューに表示させましたが、今回で最終回。残りのデータを表示して完成させます。
前回の記事は以下になります。
https://hayashi-rin.net/post-5581
テーブルビューのセルの高さを可変にする
今回はサイズが不明のデータを表示したいので、まずは内容に合わせてセルの高さが自動的に変更するようにします。
やり方は簡単。viewDidLoadの中に以下の2行を書くだけです。1行目がテーブルビュー内の各セルの高さを自動で制御するための命令で、2行目はデフォルトの高さ。もしもこの範囲に文字が収まりきらない場合は高さを自動調整してくれます。
|
1 2 |
tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 64 |
上記を足すと、前回までのコードに書いてあったセルの高さを指定する命令（以下の関数）が不要になりますので、削除しましょう。
|
1 2 3 4 5 |
// MARK: - UITableViewDelegate func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { // セルの高さを設定 return 64 } |
ヘッダーとお天気概況部分を作ります
次に地域名を表示するヘッダーと、お天気概況を表示するセルを作成します。
ヘッダーはナビゲーションバー等を使えば楽なのですが、今さら設定するのも面倒なのでセルを利用して表示します。お天気概況部分は文章が長いので少しフォントサイズを小さめにしようと思います。
まずは表示させるための準備です。表示セルの数を取得した天気予報の日数＋２（ヘッダー＋お天気概況）になるように以下の関数を修正します。
- 変更前
|
1 2 3 4 |
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // セルの数を設定 return weather.count } |
・変更後
|
1 2 3 4 5 6 7 8 9 10 |
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // セルの数を設定 var ret:Int if weather.count == 0 { ret = 0 }else{ ret = weather.count + 2 } return ret } |
次はセルの内容表示部分に手を入れていきます。if文を使って、ヘッダーの場合、お天気概況の場合、それ以外（天気予報の表示）と3パターンに切り分け、それぞれの処理を書いていきます。ヘッダー部分だけセルの色を変えたりしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "cell") cell.accessoryType = .none // セルの中身を設定 if indexPath.row == 0 { cell.textLabel?.text = "\(prefecture)の天気" cell.textLabel?.textColor = .white cell.detailTextLabel?.text = publicTime cell.detailTextLabel?.textColor = .white cell.contentView.backgroundColor = UIColor.black } else if indexPath.row == weather.count + 1 { cell.textLabel?.text = descriptionText cell.textLabel?.numberOfLines = 0 cell.textLabel?.font = UIFont.systemFont(ofSize: 14); cell.detailTextLabel?.text = descriptionPublicTime } else { let row = indexPath.row - 1 cell.textLabel?.text = "\(weather[row].dateLabel)の天気：\(weather[row].telop)" cell.detailTextLabel?.text = "最低気温\(weather[row].minTemperatureCcelsius)度 最高気温\(weather[row].maxTemperatureCcelsius)度" cell.imageView!.image = weather[row].img } return cell } |
これで完成！
想像以上にダッサいアプリが完成しましたが、見た目を変えたり背景に画像を貼ったり、時間の表示方法を変更したりするだけでもオリジナル天気予報アプリが簡単に作れると思いますので、ご自身のお好みでカスタマイズしてください。
おわりに
仕事してプログラムを書いたりするのであれば、もっと効率良く無駄のないコーディングやプログラムを作るための細かい規則なんかを作ったりしますが、個人の趣味や勉強でプログラムを楽しみたい方は、そんなルールに囚われず自分の好きなようにやってみることも大事だと思います。
ある程度できるようになったら、なぜ決まりごとが必要なのかも段々とわかってくるでしょうし。なので初心者の方はいろんなことを試してみるのが一番ですので、トライしてみてください。
今作りたいなぁと思っているアプリでは、アプリの中にデータを保存したいので、次回はその辺りが勉強できるようなサンプルの作成に挑戦してみたいと思います。
今回のサンプルはこちらに置いてあります。