TinderUIのカードをスクロールできるようにした時に苦労した話です。

1. TinderUIとスクロール
potatotips 22

2. Who?
• takahito_morinaga_5
• GitHub：ipacho
Twitter：ipa_cho
• iOSとAndroidエンジニア
• アニメ好き

3. ＿人人人人人＿
＞ Tinder ＜
￣Y^Y^Y^Y￣

4. 圧倒的におしゃれ

5. TinderUI
• リア充アプリで火がついた
• 2択の選択をするためのUI
• スマホ特有のスワイプで振り分けできる
• カードを振り分けるって楽しい

6. つかってみたい！

7. https://github.com/
modocache/
MDCSwipeToChoose

8. ＿人人人人人＿
＞ 神降臨 ＜
￣Y^Y^Y^Y￣

10. ありがとうございました！

11. 注：宣伝

12. 今回は求人票の
振り分けを行うUIでした

13. スマイループス
会社名
求人タイトル
職種
を入れます
エンジニア
アプリ開発を支えてくれる
エンジニア募集！

14. 完璧。

15. TinderUI
• 2択の選択をするためのUI
• スマホ特有のスワイプで振り分けできる
• カードを振り分けるって楽しい

16. これだけではいい求人
かどうか分からない！

17. 「雇用形態」
「給与」
「福利厚生」
「勤務地」
「ポエム」
などが必要
更に

18. 伝家の宝刀
タップして詳細

19. スマイループス
エンジニア
アプリ開発を支えてくれる
エンジニア募集！
カードを
タップ！

20. TinderUIとは
なんだったのか！！

21. これスクロールすれば
いいんじゃね？

22. よし、UIScrollViewを
入れてみよう

23. https://github.com/
modocache/
MDCSwipeToChoose
＿人人人人人＿
＞ 神再降臨 ＜
￣Y^Y^Y^Y￣

25. あれ？

26. 慣性スクロール中
には
スワイプできない

27. ／(^o^)＼

28. UIScrollViewのUIPanGestureRecognizer
と
TinderUIのUIPanGestureRecognizer
が干渉してる？
慣性スクロール中UIScrollViewの
GestureRecognizerを切ろう

29. 慣性スクロール？
• UIScrollViewにはdeceleratingというプロパ
ティがある。
public var decelerating: Bool { get }
// returns YES if user isn't dragging (touch up) but
scroll view is still moving

30. スワイプのタップタイミングで
これをチェックしよう。
UITapGestureRecognizerが反応しない
touchesBeginでも上手くいかない

31. なにか間違ってる

32. 単に複数の
PanGestureRecognizerを
使いたいだけなんだ！

33. • shouldRecognizeSimultaneouslyWithGestur
eRecognizer
→ダメ
• shouldReceiveTouch
→ダメ
スクロール制御を切ると追加スクロール判定とか面倒
そもそも

34. 別々のRecognizerで
制御するのは無理では？

35. UIScrollViewの
UIPanGestureRecognizerを
使わずにやろう
慣性スクロールの実装が大変
実際に慣性スクロールを作ってみても気持ち悪い

36. スクロールを口走った
自分を呪う

37. たしかタッチイベントは外のViewから伝わって、
中のViewから上がってくるようになっていた
ような気がする・・・
UIWindow側で制御しよう

38. UIWindowのsendEventメソッドを
オーバライドする

39. 画面内にボタンもあるので、
ドラッグ中以外で領域外のタップは
superで処理を行う

40. 各タッチイベントを処理していく

41. 指を動かしている時
rotateAngleFunctionを定義して、
横方向の移動量に合わせて角度をつける

42. 指を動かしている時
layerのpositionには、タップ位置に合わせて
verticalYAxisFunctionで横方向の移動量に対して
縦方向の移動量にプラスαで加算して移動する

44. • 最終的にはコンテンツはWebViewで表示
• loadHTMLStringだとたまにCSSが反映されな
い
→CSSをstyleタグで中に埋め込むと解決
• 派手なリアクションアニメーション
→CALayerとKeyFrameAnimationで対応

45. まとめ
• UIScrollViewとPanを組み合わせると面倒
• 頑張ればできる

46. Xcode7で作ったViewが
iOS7、8の時に
インスタンス化が遅い現象に
見舞われている方
いらっしゃいましたら、
是非お声がけください！