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

• 表示データを４セット用意する

• 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日土曜日