UIScrollViewで、Safariのタブ管理画面を実現するテクニック

mobileSafariを使用しているときの、画面を切り替えるときに表示されるページが並んでいて横スクロールできるインタフェースを作るときのテクニックや、サンプルソースの在処色々。 貴重な情報でした。ご本人には告げずこっそりまとめていて、すみません。
8
shachi@江古田,東京 @shachi

@k_katsumi やっぱりそうかw いや「あれ、これだと全部SuperViewがもってっちゃわね?」とか思ったので

2010-10-07 01:48:37
stewie @griffin_stewie

@xcatsan WWDC 2010 の Session 104 "Designing Apps with Scroll Views" にも解説がありますね。

2010-10-06 22:01:29
Hiroshi Hashiguchi @xcatsan

情報どうも。解説があったんですね。後ほどみてみます。RT @griffin_stewie: WWDC 2010 の Session 104 "Designing Apps with Scroll Views" にも解説がありますね。

2010-10-07 07:14:57
Hiroshi Hashiguchi @xcatsan

ブログ書きました。 @hkato193さん情報提供ありがとうございました。 >> Cocoaの日々: UIScrollView - 隣の画像も表示する http://bit.ly/diSIQo

2010-10-07 11:35:55
テルさん(ONODA Teruaki) @whitedev

今回の件でスクロールビューについてだいぶ理解が深まったなあ。ちょっと特殊なViewだよね。

2010-10-07 13:31:33
テルさん(ONODA Teruaki) @whitedev

この感じだと、UIScrollViewってフレームバッファ作ってないんじゃないかなあ。じゃないと clipsToBounds をオフったり出来ないもんね。単にスクロールエリアの大きさとオフセットを管理するだけの空View的な。

2010-10-07 13:32:32
テルさん(ONODA Teruaki) @whitedev

@TeamMOSA2 Jobsが惚れ込んだという「滑らかスクロール」の根幹ですね。シンプルな設計でステキな挙動してます。

2010-10-07 13:37:19
テルさん(ONODA Teruaki) @whitedev

スクロール、ズーム、ページングあれだけサポートしてるのに(多少の不便はあれど)破綻してないんだからスゴイもんだよなあ。

2010-10-07 13:41:22
テルさん(ONODA Teruaki) @whitedev

@marvelph ですよね〜。 。。。いま試しにScrollViewのバックカラー設定してみたら色ついたのでもしかしたらバッファあるかも知れませんが(^^;; 、少なくとも contentSize の大きさで取られる事はないと踏んでます。

2010-10-07 14:15:00
テルさん(ONODA Teruaki) @whitedev

hitTest 取るためだけにサブクラス化して、基本アクセスはサブクラスの中のスクロールビューに直にすることで、無事にプレビュー画面として思い通りの挙動になりました……皆様ありがとうございます! ここで紹介されてるほぼそのままの方法です! http://bit.ly/9hFl0n

2010-10-07 14:19:58
テルさん(ONODA Teruaki) @whitedev

根底クラスとして UIView じゃなくて UIScrollView にしてみたけど、特に意味なさそうだし混乱するといけないから普通に UIViewに変えとこ。あとはテストコードを削除して調整し直し!

2010-10-07 14:21:59
もっさりさん @TeamMOSA2

@whitedev ほー。CAGradientLayerをこういう風に挿し込むとカコイイ再描画ができるんすね。

2010-10-07 14:22:37
テルさん(ONODA Teruaki) @whitedev

横にズラーっと並ぶときに途中でループさせて使い回そうかと当初は思ってたけど、スゲー長い contentSize にして大丈夫そうだったらそれで管理するようにしよう。両端はループさせないし、大きいバッファ取られなければそれの方がシンプルだよね。

2010-10-07 14:23:52
テルさん(ONODA Teruaki) @whitedev

ページごとの項目(UIImageViewとか)は画面外に消えた奴はどんどん削除してって、ってね。

2010-10-07 14:25:24
もっさりさん @TeamMOSA2

@whitedev やたら面倒ですが自分は画面から消えてタイルのライフサイクルが無効になったら使いまわす方向で作りました。

2010-10-07 14:26:41
じんたん @sin_jintan

@whitedev おめ!昨晩は変なツッコミでお騒がせしてすいませんでした〜。

2010-10-07 14:28:11
テルさん(ONODA Teruaki) @whitedev

@TeamMOSA2 影のやつですかー。さすが見るところが違いますね(^^;

2010-10-07 14:31:07
テルさん(ONODA Teruaki) @whitedev

@hkato193 ありがとうございます〜、これからが本番ですが、準備運動で色々な人に助けられました。この辺ずっと触れてこなかったので歩き方がまだギコチないです…(^^;

2010-10-07 14:32:53
もっさりさん @TeamMOSA2

@whitedev 機能優先で見栄えとかどうでも良く作るのでそういうのに無頓着です。

2010-10-07 14:32:55
kishikawa katsumi @k_katsumi

@whitedev contentSize はいくらでかくても大丈夫です。

2010-10-07 14:33:52
テルさん(ONODA Teruaki) @whitedev

@TeamMOSA2 なるほどです。実は別プロジェクトで似た感じの処理をするのにループバッファで使い回ししてたら、やたら管理が面倒だったのとスキップするときに無理矢理感が出てきたので、とにかくバッファはリニアで取ろうと。。現在の表示場所からの距離とかで破棄するとか工夫してみます!

2010-10-07 14:37:36
テルさん(ONODA Teruaki) @whitedev

@sin_jintan いえいえ、おかげで @k_katsumi さんの興味深いお話がきけましたので(ノ゚Д゚)八(゚Д゚ )ノイエーイ

2010-10-07 14:38:38
もっさりさん @TeamMOSA2

@whitedev 正にそんな感じで進む方向の反対側から先にタイルの寿命が亡くなる様にしてます。

2010-10-07 14:39:07
テルさん(ONODA Teruaki) @whitedev

@TeamMOSA2 自分も見栄えとか苦手です…。細かい表現とかに気が回る人とか関心しちゃいます!

2010-10-07 14:39:39
テルさん(ONODA Teruaki) @whitedev

@k_katsumi お!やはりそうでしたか。ありがとうございます!  昨日のお話もありがとうございました。とても勉強させていただいてます!

2010-10-07 14:41:17