for iOSendai

1. UITableViewで無限CoverFlowを作る
Hidetoshi Mori
12年11月17日土曜日

2. 自己紹介
• 森 英寿
• フリーランスプログラマ
hidetoshi.mori
@h_mori
12年11月17日土曜日

3. 自己紹介
• 主開発言語
Java/.net/Objective-C/Ruby/PHP
• アプリ開発実績
SOICHA/TweetMe
ATND暦/生存連絡
12年11月17日土曜日

4. 元ネタ
• @fladdictさんの「UITableViewハック」
https://s3-ap-northeast-1.amazonaws.com/
slidrs.t1/1338005297280_5734dda2c903f5b359b209804920c189/
UITableViewHack.pdf
12年11月17日土曜日

5. 何故UITableView？
• Cell再利用機構を実装する必要がない
12年11月17日土曜日

6. CoverFlowモジュール
• FlowCover (http://www.chaosinmotion.com/flowcover.html)
• iCarousel (https://github.com/nicklockwood/iCarousel)
• OpenFlow (http://apparentlogic.com/openflow/)
• Tapku (https://github.com/devinross/tapkulibrary)
12年11月17日土曜日

7. Infinite UITableView
• 表示データを４セット用意する
• scrollViewDidScroll: でHook
• 限界位置でUIScrollView.contentOffsetを調整
12年11月17日土曜日

8. 12年11月17日土曜日

9. UITableViewのカスタマイズ
• 左90度回転
12年11月17日土曜日

10. Cellのカスタマイズ
• CATransform3D処理
• Z座標の固定
• 右90度回転
• スケールの調整
• 角度の調整
• 位置の調整
• 影の調整
12年11月17日土曜日

11. カスタマイズタイミング
• scrollViewDidScroll:(UIScrollView *)
• UITableView#layoutSubviews
12年11月17日土曜日

12. Cellのソート
• 中央から遠い順にソートして再配置
• 対象CellはVisibleRowsのみ
12年11月17日土曜日

13. 変形の基準
• 調整の関数化
• IN:中央からCellまでの距離の相対値
• OUT:スケール、角度、位置、影の透明度
12年11月17日土曜日

14. 関数作成のコツ
• 線を連続させる
• 単純な区分線形関数にする
• 挙動を確認しながら非線形曲線にする
12年11月17日土曜日

15. スケール調整関数
12年11月17日土曜日

16. 角度調整関数
12年11月17日土曜日

17. 位置調整関数
12年11月17日土曜日

18. 影調整関数
12年11月17日土曜日

19. UIImageViewのカスタマイズ
• 反射Layer、影Layerの配置
• 反射Layerのcontents設定 (setImage: overwride)
12年11月17日土曜日

20. スクロール停止時の位置調整
• 停止時に近いCellを中央にFit
• scrollViewDidEndDragging:
• scrollViewDidEndDecelerating:
12年11月17日土曜日

21. その他調整
• 初期表示時に中央にFit
• デバイス向き変更時に中央にFit
12年11月17日土曜日

22. UITableViewハック時のポイント
• UIScrollViewDelegateを利用
• 処理対象CellはvisibleRowsを使用する
• Cell再利用に注意
• subviewの配置順、ガベージデータ等
• frame設定のタイミングに注意
• Offset等の調整タイミングを意識
12年11月17日土曜日

23. まとめ
• CoverFlow程度であれば簡単
• UITableViewの再利用の仕組みさえ把握
すれば応用可能
12年11月17日土曜日

24. Demo
• http://www.youtube.com/watch?
feature=player_embedded&v=FsiI3hMjedo
12年11月17日土曜日