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

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

もうちょっとだけ UIScrollView 調べてみて、やりたいページングができないようだったら自前で実装する。

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

普通に UIScrollView使ったんじゃダメっぽいんで、やっぱり自前で処理することにした。だいぶ良い感じになったけど、ちゃんとページング機構のほうで対応してないと無理出てくる部分があったので。。やりたいことは iPad版の Keynote書類選択画面のようなやつ。

2010-10-05 21:10:07
hirobe @hirobe

@whitedev KeyNoteの書類選択画面的ページングのやり方、Developer Forumで以前見つけましたよ。230220で今年のを検索。はずしてたらごめんなさい。

2010-10-05 21:35:05
テルさん(ONODA Teruaki) @whitedev

@hirobe おー、ありがとうございます!実は SpeedText HD でも同じような画面あるので聞いてしまおうか悩んでました。。(・_・; 明日すぐにForum確認してみます~

2010-10-06 01:17:19
Mobile Kaz @mobilekaz

@whitedev まったくやったことはないですが、UIScrollViewを画面中央において、大きさは書類ひとつ分くらいにして、clipsToBoundsをNOにしてページングすると、それらしくならないですか?http://goo.gl/ieal

2010-10-06 10:41:24
テルさん(ONODA Teruaki) @whitedev

@mobilekaz お!こちらもズバリな情報ありがとうございます!なるほど、Viewを小さくして、という発想には至りませんでした。。勉強不足を再認識しました。精進します。ありがとうございました!

2010-10-06 11:48:57
Mobile Kaz @mobilekaz

@whitedev 記事にもありますが、この方法だとUIScrollViewの枠外の書類のTouchEventが拾えないので、hitTest:(CGPoint)point withEvent:をオーバーライドして、というのが必要になるみたいですね。でもそれさえやれば大丈夫かと。

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

@mobilekaz なるほど、より深く仕組みが理解できました!オーバーライドの部分はこれから対応しますが、@hirobe さんにも教えていただいたForum(http://bit.ly/c22dUC) も参照しながら実現したいと思います!ありがとうございました!!

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

@hirobe UIScrollView の件、さっそくForumを確認して、あと @mobilekaz さんの情報とも合わせて、サブクラス化等々進めればいけそうなところまで近づきました! ちょっと込み入ったノウハウのところの情報ありがとうございました。助かりました!

2010-10-06 13:26:06
Hiroshi Hashiguchi @xcatsan

ブログ書きました >> Cocoaの日々: UIScrollView - ページスクロールで空白を挟む http://bit.ly/cfFKyM

2010-10-06 16:00:31
テルさん(ONODA Teruaki) @whitedev

むー、タッチイベントこないからもうひと工夫必要だな〜。単にページングのサイズを指定できればいいのに、と無いものねだりしたくなっちゃう(;´∩`)

2010-10-07 00:27:54
じんたん @sin_jintan

@whitedev 自身のサイズを大きめに取れば、ページングサイズ変えられません?

2010-10-07 00:37:28
じんたん @sin_jintan

@whitedev やりたい事詳しくわかってないけど(汗

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

@sin_jintan 昨日いろいろ教えてもらってやりかたは分かったところでしたが、ちょっと不便を感じて…(汗 やりたいことは→ http://bit.ly/9hFl0n

2010-10-07 00:41:10
じんたん @sin_jintan

@whitedev ふむふむ。不便は、各写真へのタッチのさばき方ですか?

2010-10-07 01:09:40
kishikawa katsumi @k_katsumi

@sin_jintan @whitedev hitTestを上書きしちゃうと、タッチが全部そっちにいっちゃいますからね。スクロールビューのサブビューにはタッチが届かなくなっちゃう。

2010-10-07 01:14:30
kishikawa katsumi @k_katsumi

@sin_jintan @whitedev この方法でサブビューのタッチを処理するには、スクロールビューでタッチイベントを受けて、どのサブビューの座標に含まれるか調べて、各ビューにタッチとイベントを送ってやるとかですかね。

2010-10-07 01:16:57
テルさん(ONODA Teruaki) @whitedev

@k_katsumi @sin_jintan iPadではあんな感じのプレビュー&選択画面って有効なので、もっと標準で素直に使えるようになると嬉しいですね。。

2010-10-07 01:18:11
じんたん @sin_jintan

@k_katsumi @whitedev 個々のサブビューにtouchBeganとか書いてもダメなんでしたっけ?なんかそんな実装した様な…

2010-10-07 01:24:04
kishikawa katsumi @k_katsumi

@sin_jintan @whitedev このコードは細かいページングのために小さいスクロールビューを使ってて、でもどこを触ってもスクロールするようにhitTestを上書きしてスクロールビューのタッチに変換してるので、サブビューに来るべきタッチがスクロールビューに行っちゃうです

2010-10-07 01:30:10
kishikawa katsumi @k_katsumi

@sin_jintan @whitedev なので、本来はsubview->superviewというふうにチェーンしていくのが、いきなりスクロールビューに届くので、サブビューはタッチに反応できないのです。このビューの上にボタンやテキストビューを載せてみると現象がわかりやすいです。

2010-10-07 01:35:31
kishikawa katsumi @k_katsumi

まあでもUIKitだったらconvertRect:〜やconvertPoint:〜、CGRectContainsPoint、CGRectContainsRectなんかがあるので意外に簡単である。

2010-10-07 01:43:13
shachi@江古田,東京 @shachi

@k_katsumi superviewにしかtouchってかえってこなかったっけ?(確認

2010-10-07 01:45:05
kishikawa katsumi @k_katsumi

@shachi 件のコードだと特にif (!CGRectContainsPoint(scrollView.frame, point)) {return self.scrollView} こう書いてるんでどこを触ってもself.scrollViewにタッチしたことになっちゃいます。

2010-10-07 01:47:47