Skip to content

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

2011.03.05

前回は、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 以外でも、半透明なバーに適合させることができます。

Advertisements

From → Develop

2 Comments
  1. βάρβαροι permalink

    大変参考になりました

  2. ありがとうございます。
    今回は top と bottom だけを弄りましたが、left, right を変えるとどうなるか調べるのも面白そうですね。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s