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のサンプルでやっていることと同じである上に、画像サイズにとらわれません。
ちょっとした工夫で実現できるのもiOSプログラミングの良いところです。
皆さんも工夫してプログラムしてみるのも良いと思います。