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