UIScrollView を半透明なバーに適合させる

前回は、UIEdgeInsets の概要を取り上げました。

今回は、UIEdgeInsets に関連する Tips 第1段として、UIScrollView を半透明なバーに適合させる方法を紹介します。

　

---

<図1> <図2> は、StatusBar, NavigationBar, Toolbar すべてが Translucent Black に設定された画面です。メインのビューは、Cell 0 〜 Cell 19 を表示する UITableView です (UITableView は UIScrollView のサブクラスです)。<図1> は UITableView を一番上までスクロールした様子、<図2> は UITableView を一番下までスクロールした様子です。

<図1: 一番上までスクロールした様子>

<図1> では、Toolbar が半透明なので、Cell 8, Cell 9 が透けて見えています。ここで想像されるのは、UITableView の frame は、画面一番下にまで及んでいるということです。しかし、<図2> を見ると、Cell 19 は Toolbar の上で止まっていて、ScrollIndicator も Toolbar の上で止まっています。

<図2: 一番下までスクロールした様子>

<図2> では、StatusBar と NavigationBar が半透明なので、Cell 10, Cell 11 が透けて見えています。ここで想像されるのは、UITableView の frame は、画面一番上にまで及んでいるということです。しかし、<図1> を見ると、Cell 0 は NavigationBar の下で止まっていて、ScrollIndicator も NavigationBar の下で止まっています。

UITableView の frame は画面いっぱいに広がっているはずなのに、そのコンテントや ScrollIndicator はちょうどよくバーの内側で止まる‥‥これはどうやって実現しているのでしょうか。その答えが、UITableView の親クラスである UIScrollView が持っているプロパティ、contentInset と scrollIndicatorInsets にあります。

contentInset：スクロールビューのコンテントの周りにどれだけの余白を付加するかを表す UIEdgeInsets

scrollIndicatorInsets: スクロールビューの端からスクロールインディケータをどれだけ離すかを表す UIEdgeInsets

今回の UITableView の frame は実際、画面いっぱいに広がっていますが、contentInset と scrollIndicatorInsets が弄られています。どちらも、top: 64 (StatusBar の高さ 20 + NavigationBar の高さ 44), left: 0, bottom: 44 (Toolbar の高さ), right: 0 という値になっています。

contentInset の top は 64 なので、そのコンテントは上に 64 余白を取られることになります。なので、一番上にスクロールしたとき、Cell 0 は余白分下に位置することになり、丁度 NavigationBar の下に表示されるようになります。

contentInset の bottom は 44 なので、そのコンテントは下に 44 余白を取られることになります。なので、一番下にスクロールしたとき、Cell 19 は余白分上に位置することになり、丁度 Toolbar の上に表示されるようになります。

scrollIndicatorInsets の top は 64 なので、scrollIndicator は NavigationBar の下で止まります。

scrollIndicatorInsets の bottom は 44 なので、scrollIndicator は Toolbar の上で止まります。

これが、半透明なバーに適合させる方法のからくりです。
今回は UITableView を引き合いに説明しましたが、contentInset と scrollIndicator は UIScrollView のプロパティなので、UITableView 以外でも、半透明なバーに適合させることができます。