Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UITableViewで無限CoverFlowを作る                       Hidetoshi Mori12年11月17日土曜日
自己紹介               • 森 英寿               • フリーランスプログラマ                  hidetoshi.mori                  @h_mori12年11月17日土曜日
自己紹介               • 主開発言語                Java/.net/Objective-C/Ruby/PHP               • アプリ開発実績                SOICHA/Twe...
元ネタ               • @fladdictさんの「UITableViewハック」                 https://s3-ap-northeast-1.amazonaws.com/                 s...
何故UITableView?               • Cell再利用機構を実装する必要がない12年11月17日土曜日
CoverFlowモジュール               •   FlowCover (http://www.chaosinmotion.com/flowcover.html)               •   iCarousel (https...
Infinite UITableView               • 表示データを4セット用意する               • scrollViewDidScroll: でHook               • 限界位置でUIScrol...
12年11月17日土曜日
UITableViewのカスタマイズ               • 左90度回転12年11月17日土曜日
Cellのカスタマイズ               •   CATransform3D処理                   •   Z座標の固定                   •   右90度回転                   ...
カスタマイズタイミング               • scrollViewDidScroll:(UIScrollView *)               • UITableView#layoutSubviews12年11月17日土曜日
Cellのソート               • 中央から遠い順にソートして再配置               • 対象CellはVisibleRowsのみ12年11月17日土曜日
変形の基準               •   調整の関数化                   •   IN:中央からCellまでの距離の相対値                   •   OUT:スケール、角度、位置、影の透明度12年11月...
関数作成のコツ               • 線を連続させる               • 単純な区分線形関数にする               • 挙動を確認しながら非線形曲線にする12年11月17日土曜日
スケール調整関数12年11月17日土曜日
角度調整関数12年11月17日土曜日
位置調整関数12年11月17日土曜日
影調整関数12年11月17日土曜日
UIImageViewのカスタマイズ               •   反射Layer、影Layerの配置               •   反射Layerのcontents設定 (setImage: overwride)12年11月17日...
スクロール停止時の位置調整               • 停止時に近いCellを中央にFit                • scrollViewDidEndDragging:                • scrollViewDidE...
その他調整               • 初期表示時に中央にFit               • デバイス向き変更時に中央にFit12年11月17日土曜日
UITableViewハック時のポイント               •   UIScrollViewDelegateを利用                   •   処理対象CellはvisibleRowsを使用する            ...
まとめ               • CoverFlow程度であれば簡単               • UITableViewの再利用の仕組みさえ把握                すれば応用可能12年11月17日土曜日
Demo               • http://www.youtube.com/watch?                 feature=player_embedded&v=FsiI3hMjedo12年11月17日土曜日
Upcoming SlideShare
Loading in …5
×

UITableViewで無限CoverFlowを作る

5,362 views

Published on

for iOSendai

Published in: Technology
  • Login to see the comments

UITableViewで無限CoverFlowを作る

  1. 1. UITableViewで無限CoverFlowを作る Hidetoshi Mori12年11月17日土曜日
  2. 2. 自己紹介 • 森 英寿 • フリーランスプログラマ hidetoshi.mori @h_mori12年11月17日土曜日
  3. 3. 自己紹介 • 主開発言語 Java/.net/Objective-C/Ruby/PHP • アプリ開発実績 SOICHA/TweetMe ATND暦/生存連絡12年11月17日土曜日
  4. 4. 元ネタ • @fladdictさんの「UITableViewハック」 https://s3-ap-northeast-1.amazonaws.com/ slidrs.t1/1338005297280_5734dda2c903f5b359b209804920c189/ UITableViewHack.pdf12年11月17日土曜日
  5. 5. 何故UITableView? • Cell再利用機構を実装する必要がない12年11月17日土曜日
  6. 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. 7. Infinite UITableView • 表示データを4セット用意する • scrollViewDidScroll: でHook • 限界位置でUIScrollView.contentOffsetを調整12年11月17日土曜日
  8. 8. 12年11月17日土曜日
  9. 9. UITableViewのカスタマイズ • 左90度回転12年11月17日土曜日
  10. 10. Cellのカスタマイズ • CATransform3D処理 • Z座標の固定 • 右90度回転 • スケールの調整 • 角度の調整 • 位置の調整 • 影の調整12年11月17日土曜日
  11. 11. カスタマイズタイミング • scrollViewDidScroll:(UIScrollView *) • UITableView#layoutSubviews12年11月17日土曜日
  12. 12. Cellのソート • 中央から遠い順にソートして再配置 • 対象CellはVisibleRowsのみ12年11月17日土曜日
  13. 13. 変形の基準 • 調整の関数化 • IN:中央からCellまでの距離の相対値 • OUT:スケール、角度、位置、影の透明度12年11月17日土曜日
  14. 14. 関数作成のコツ • 線を連続させる • 単純な区分線形関数にする • 挙動を確認しながら非線形曲線にする12年11月17日土曜日
  15. 15. スケール調整関数12年11月17日土曜日
  16. 16. 角度調整関数12年11月17日土曜日
  17. 17. 位置調整関数12年11月17日土曜日
  18. 18. 影調整関数12年11月17日土曜日
  19. 19. UIImageViewのカスタマイズ • 反射Layer、影Layerの配置 • 反射Layerのcontents設定 (setImage: overwride)12年11月17日土曜日
  20. 20. スクロール停止時の位置調整 • 停止時に近いCellを中央にFit • scrollViewDidEndDragging: • scrollViewDidEndDecelerating:12年11月17日土曜日
  21. 21. その他調整 • 初期表示時に中央にFit • デバイス向き変更時に中央にFit12年11月17日土曜日
  22. 22. UITableViewハック時のポイント • UIScrollViewDelegateを利用 • 処理対象CellはvisibleRowsを使用する • Cell再利用に注意 • subviewの配置順、ガベージデータ等 • frame設定のタイミングに注意 • Offset等の調整タイミングを意識12年11月17日土曜日
  23. 23. まとめ • CoverFlow程度であれば簡単 • UITableViewの再利用の仕組みさえ把握 すれば応用可能12年11月17日土曜日
  24. 24. Demo • http://www.youtube.com/watch? feature=player_embedded&v=FsiI3hMjedo12年11月17日土曜日

×