Skip to content

Instantly share code, notes, and snippets.

@jiro
Last active November 9, 2022 08:50
Show Gist options
  • Save jiro/9162487 to your computer and use it in GitHub Desktop.
Save jiro/9162487 to your computer and use it in GitHub Desktop.
UICollectionView + UIKIt Dynamics ではじめるグラフ描画(発表メモ)

UICollectionView + UIKIt Dynamics ではじめるグラフ描画(発表メモ)

ゴール

UICollectionView + UIKit DynamicsForce-Directed Layout の実装を試みる

アジェンダ

  1. Force-Directed Layout
  2. UICollectionView + UIKit Dynamics
  3. 実装の解説(試作段階)
  4. 今後の展望

1. Force-Directed Layout

Examples

関連アプリ

関連ライブラリ

Force-Directed Layoutとは

2. UICollectionView + UIKit Dynamics

WWDC

  • 206 - Getting Started with UIKit Dynamics
  • 221 - Advanced Techniques with UIKit Dynamics

Examples

UIKit Dynamics

UICollectionView + UIKit Dynamics

UIDynamicBehavior

  • 動作
    • UIDynamic Gravity Behavior(重力)
    • UIDynamic Collision Behavior(衝突)
    • UIDynamic Attachment Behavior(接合)
    • UIDynamic Snap Behavior(移動)
    • UIDynamic Push Behavior(圧力)
  • 設定
    • UIDynamic Item Behavior

3. 実装の解説

ソースコード

実装にあたって

要点

  • UIDynamicBehavior のサブクラスを正しく定義
    • クーロンの法則フックの法則 により作用する力を定義
    • クーロンの法則 → UIDynamicPushBehavior
    • フックの法則 → UIDynamicAttachmentBehavior

クラス

  • FDDGraphViewController
    • UICollectionViewControllerのサブクラス
  • FDDGraphViewNode
    • UICollectionViewCellのサブクラス
  • FDDForceBehavior
    • UIDynamicBehaviorのサブクラス
  • FDDForceDirectedLayout
    • UICollectionViewLayoutのサブクラス

4. 今後の展望

  • ノード間のリンク描画を追加
  • Discovrアプリの再現
  • d3のデモの再現
  • d3のような高速化手法の導入
  • 切り出してオープンソースに?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment