Download as PDF, PPTX
UITableViewで無限CoverFlowを作る
- 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.
- 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.
- 16.
- 17.
- 18.
- 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日土曜日