0
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を作る

2,861

Published on

for iOSendai

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,861
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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日土曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×