iOSでGoogleカレンダーのようなセクションを実装する方法について

Question

iOSアプリでイベントの日程表の開発をしてします。

その際添付した画像のように、左側に日付を、右側にセルのコンテンツを表示したいと考えています。

日付はセクションとして、スクロールに追随して先頭に表示されることになります。

このようなUIを搭載しているアプリとしてはGooleカレンダーや、このスクリーンショットのSHOWROOMがあります。

今回質問したいことは、どうすればこのようなセクションを実装できるのかということです。

まず思いついたのが、「左側にテキストを寄せてある普通のセクションを実装すること」ですが、そうするとセクションの高さの分だけセルが下に落ちてしまうので格好がつきません。

次にセクションの高さを0にしたらどうだろうかと思ったのですが、そうすると単にセクションがなかったかのように表示されるだけになってしまいます。

一体どうすればGoogleカレンダーアプリのようなセクションを実装できるのでしょうか。

ご回答のほど何卒よろしくお願いいたします。

Answer 1

セクション自体は表示せず、各セクションの先頭セル(row=0)だけに日付を表示すればいいのではないでしょうか？

やり直し

セクション自体の高さは0（には出来ないので1とか）にして、そこからはみ出すように表示したいViewをぶら下げます。

すごく雑ですが、こんな感じ。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView()
    view.backgroundColor = .orange
    let label = UILabel()
    label.font = UIFont.systemFont(ofSize: 50)
    label.text = String(section)
    label.sizeToFit()
    view.addSubview(label)
    return view
}
    
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 1
}

分かりやすいように、セクションの高さを1にしてオレンジのラインにしています。
全く表示させたくないなら.clearにすればいいでしょう。（高さ０だとセクションが表示されません）

細かいところを気にしだすとダメかも知れませんが。

Comments

[退会済みユーザー]

回答ありがとうございます。

そうするとスクロールに合わせて日付が追随しないので、日付のセルが画面外に消えたら、それ以降のセルが何日のものか分からなくなってしまうのが懸念点です。

[fuzzball]

なるほど。セクションの「あの」動きをしないとダメなんですね。

[fuzzball]

やり直しました。

[退会済みユーザー]

ありがとうございます。早速試してみました。

ただ高さを1にするとセクション同士が重なってしまって、Googleカレンダーのように下のセクションが上のセクションを押し出すような本来の挙動になりませんでした。

また説明が難しいのですが、例えば下にスクロールした時には下のセクションが上のセクションに被さるものの、反対に上にスクロールすると上のセクションが下のセクションに被さることになり、スクロール方向によって階層が変わってしまうのも違和感があるところです。

おそらくGoogleやSHOWROOMの場合は、本来の高さをそのまま設定しているように感じられますが、そうするとセルの位置が下に下がってしまうので、どうして良いのやらと。

[fuzzball]

セルを上方にずらす方法を試していたのですが色々弊害が出るので断念。
もう自作するしかないですねｗ

[退会済みユーザー]

実際に試していただいたとのことで、お手数をおかけして申し訳ございません。

承知しました。デフォルトの挙動だと難しいということですね。
回答ありがとうございました。