FramerでScroll要素を作る ~Twitterのタイムラインを例に~

プロトタイプ制作でScroll要素を作りたいシーンはかなりあると思います。

スクロール要素を作るのに必要なのは、
ざっくり言ってこの２つです。

• ScrollComponent（スクロール要素の入れ物）を作る
• スクロールさせたい要素をcontentレイヤーの子要素に指定する

Twitterのタイムラインを例に見ていきます。

サンプルFramer　サンプルSketch
※ sketchファイルはTwitterUIKitを元に作成しています。

ScrollComponentの作成

まずはScrollComponentを作成します。
要素を詰め込む入れ物だと思ってください。下のような書き方で指定していきます。

scroll = new ScrollComponent
    width: Screen.width              # <=①
    height: Screen.height - sketch.navbar.height - sketch.tabbar.height # <=②
    y: sketch.navbar.height          # <=③
    scrollHorizontal: false          # <=④

1. 横幅はScreen.width、つまりスクリーンの横幅に合わせます。

2. スクロールエリアの高さは下の図のように定義したいので、スクリーン全体の幅から、navbarとtabbarの高さを引いています。
   

3. スクリーンの一番上(y=0)からnavbarの高さ分下がったところにスクロール要素のy座標を設定します。

4. scrollHorizontal: falseは水平方向のスクロールをなくすために指定することができます

これでScrollComponentが設定できました。scrollという名前のレイヤーの中に.contentという名前のレイヤーがあることにも注目してください。

スクロールさせたい要素をscroll.contentレイヤーの子要素に指定する

scroll.contentの子要素になったレイヤーは、スクロールできるようになります。
ScrollComponentそのものではなく、.contentというレイヤーを親要素とすることに注意です。
レイヤーの.parentまたは.superLayerというプロパティを取り出してくることで子要素への追加が可能になります。

sketch.tweet1.parent = scroll.content
sketch.tweet2.parent = scroll.content
sketch.tweet3.parent = scroll.content
sketch.tweet4.parent = scroll.content
sketch.tweet5.parent = scroll.content
sketch.tweet6.parent = scroll.content
sketch.tweet7.parent = scroll.content
sketch.tweet8.parent = scroll.content

tweet1~7の親要素をscroll.contentの中に集約することでtweet1~7がスクロールレイヤーの中に組み込まれました。

これで最低限、スクロール要素が実装できたことになります。

発展編

ところで、上で書いた、子レイヤーを指定する箇所、いちいち8行も同じようなコードを書くの、面倒ですよね。

sketch.tweet1.parent = scroll.content
sketch.tweet2.parent = scroll.content
sketch.tweet3.parent = scroll.content
sketch.tweet4.parent = scroll.content
sketch.tweet5.parent = scroll.content
sketch.tweet6.parent = scroll.content
sketch.tweet7.parent = scroll.content
sketch.tweet8.parent = scroll.content

実は、for文を使うと、このように一行でシンプルに書き換えることができます。

for i in [0..7]
    sketch.Timeline.children[0].parent = scroll.content