【Swift】お天気アプリを作る（３）セルの高さを可変にしてお天気概況を表示しよう

2017年9月2日

Swiftが3.0になってから初めてのアプリ作成としてお天気アプリを作り始めました。

前回はJSONで出力される天気予報データをテーブルビューに表示させましたが、今回で最終回。残りのデータを表示して完成させます。

前回の記事は以下になります。

【Swift】お天気アプリを作る（１）JSON形式の気象予報データを取得しよう

Swiftが3.0になってから全く触れていなかったので、もう一度簡単なアプリを作りながら勉強してみようと ...

https://hayashi-rin.net/post-5581

【Swift】お天気アプリを作る（２）気象予報データをテーブルビューで表示しよう

Swiftが3.0になってから初めてのアプリ作成を開始しました。今回のテーマはお天気アプリ。前回はJSON ...

https://hayashi-rin.net/post-5637

テーブルビューのセルの高さを可変にする
ヘッダーとお天気概況部分を作ります
これで完成！
おわりに

テーブルビューのセルの高さを可変にする

今回はサイズが不明のデータを表示したいので、まずは内容に合わせてセルの高さが自動的に変更するようにします。

やり方は簡単。viewDidLoadの中に以下の2行を書くだけです。1行目がテーブルビュー内の各セルの高さを自動で制御するための命令で、2行目はデフォルトの高さ。もしもこの範囲に文字が収まりきらない場合は高さを自動調整してくれます。

        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 64

1 2	tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 64

上記を足すと、前回までのコードに書いてあったセルの高さを指定する命令（以下の関数）が不要になりますので、削除しましょう。

    // MARK: - UITableViewDelegate
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        // セルの高さを設定
        return 64
    }

// MARK: - UITableViewDelegate

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

// セルの高さを設定

return 64

}

ヘッダーとお天気概況部分を作ります

次に地域名を表示するヘッダーと、お天気概況を表示するセルを作成します。

ヘッダーはナビゲーションバー等を使えば楽なのですが、今さら設定するのも面倒なのでセルを利用して表示します。お天気概況部分は文章が長いので少しフォントサイズを小さめにしようと思います。

まずは表示させるための準備です。表示セルの数を取得した天気予報の日数＋２（ヘッダー＋お天気概況）になるように以下の関数を修正します。

変更前

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // セルの数を設定
        return weather.count
    }

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

// セルの数を設定

return weather.count

}

・変更後

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // セルの数を設定
        var ret:Int
        if weather.count == 0 {
            ret = 0
        }else{
            ret = weather.count + 2
        }
        return ret
    }

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パターンに切り分け、それぞれの処理を書いていきます。ヘッダー部分だけセルの色を変えたりしています。

    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
    }