Seasons.NET

ちょっとした技術ブログです

Safariのタブ管理のような画面を作るには?


仕事でSafariのタブ管理のように左右に見切れたページが表示される画面を
作る必要がでてきました。UIScrollViewの仕様を見ていると、いろいろと知らなかったことが
わかったのですが、いまいち解決策が見つかりませんでした。


そこでさらにGoogle先生で調べていたところ、、、
Togetterのまとめを見つけたり、
UIScrollView - ページスクロールで空白を挟む
が参考になったのですが、

もっとも近道は、PagingPreviewでした。


ソースコードも提供され、動作もまさしく求めていたものそのものです。
非常に丁寧に作られているのですが、肝心なところがハードコーディングです。
画像サイズがもともと小さく用意しているので、良い感じで隙間が空くという・・・。


むろんソースコードは、ちゃんと隙間を生み出すために設計されているのですが、
読んでいてもいまいちすっきりしません。

構成は、こうです。
UIScrollViewにUIViewを継承したコンテンツページを隙間なく追加していきます。
通常、UIScrollViewを使う時は、UIImageViewを追加していきますが、同じ要領です。
ではなぜ、UIViewを追加しているかというと肝心の画像は、UIImageViewとして、
UIViewに追加しているのです。そのとき既に追加したUIViewよりは少し小さい状態で追加します。


そして、UIImageViewは、UIViewの中でセンタリングするようにしています。
さらに、UIScrollViewのclipsToBounds=NOにすることで、見切れたページが表示されます。


これがそのからくりというわけです。


私はUIViewにUIImageViewを追加する必要もないと感じたため、
UIImageViewをUIScrollViewに直接追加しました。


UIImageViewのtransformにCGAffineTransformMakeScale(0.95, 0.95)
を設定することで、アンカーポイント(センター)を基準に画像が少し小さくなります。
これは、PagingPreviewのサンプルでやっていることと同じである上に、画像サイズにとらわれません。


f:id:Seasons:20101215015120p:image


ちょっとした工夫で実現できるのもiOSプログラミングの良いところです。
皆さんも工夫してプログラムしてみるのも良いと思います。