【簡単】スクロールに反応するスティッキーヘッダーを作成する方法を解説

はじめに

多くのモバイルアプリがスティッキーヘッダーを採用していることにお気付きでしょうか？例えば、Webブラウザーでは、下方向にスクロールするとヘッダーとその周りのボタンが遠ざかり、上方向にスクロールするとスライドして戻ってきます。この体験によって、写真のフィードであろうと、興味をそそるブログ記事であろうと、あるいはショッピング中に探索すべきアイテムのリストであろうと、ユーザーはそのページに完全に没頭することができるようになります。

下方向にスクロールしている間、ヘッダーを部分的に（あるいは完全に）隠すことで、ユーザーは画面上のコンテンツをより多く見ることができます。これが、楽しくて人気のある体験となるのです。しかし、さらに楽しいのは、ProtoPieでそのようなリアルな体験を簡単に作れることです。必要なのは、スクロールの方向をチェックする条件だけです。ProtoPieに内蔵された数式と条件設定により、すぐにこの体験を完成させることができます！

習得できること

1. スクロール可能なビューを作成するためのスクロールコンテナの作成

2. スクロールコンテナのスクロールプロパティを検出する

3. 条件と $touchVelocityY > 0 と $touchVelocityY < 0 の式を使用してスクロール方向をチェックする

4. スクロールの方向によって個別のインタラクションを追加する

最終的に、上記のようなものを作ることができるようになります！

詳しい手順

1. スクロール可能なビューを作るためにスクロールコンテナを作成する

ここでは、スクロールが可能となるベーシックなページを作成します。

1. ツールバーの「Container」から「Scroll Container」を選択します。これで、スクロールが有効なコンテナが作成されます。このコンテナの名前を「Scroll」に変更しましょう。こうすることで、このコンテナを見つけやすくなります。

2. コンテナの角の1つをドラッグして、画面をカバーするのに十分な大きさになるまで「Scroll」を拡大縮小します。または、寸法に375 x 812を入力し、位置を0,0に設定する方法も使えます。コンテナが存在する場所でしかスクロール検出ができないため、画面に合わせてコンテナを拡大縮小する必要があります。この例では、フルスクリーンを使用します。

3. レイヤーパネルで「Scroll」をドラッグして、ScrollレイヤーをCard listレイヤーのすぐ上に配置します。こうすることで、カードが表示されていない場所での不要なタップを防ぐことができます。

4. 次に、レイヤーパネルの「Scroll」の中にCard listレイヤーをドラッグします。これでCard listレイヤーがスクロール可能になります。

5. ツールバーの「Preview」をクリックして試してみてください。

2. スクロールコンテナのScrollプロパティを検出する

このステップによって、シーン内でコンテンツがスクロールされるたびにインタラクションが動作するようになります。

1. インタラクションパネルで、「Add Trigger」をクリックし、「Detect」を追加します。トリガーのプロパティパネルで、選択されているレイヤーが「Scroll」であることを確認し、デフォルト値を「X」から「Scroll」に変更します。

値を「Scroll」に変更すると、トリガーは選択されたレイヤーのスクロール位置の変化を検出します。代わりに「X」を選択していれば、トリガーは選択されたレイヤーの「X」位置の変化を検出します。しかし、「Scroll」レイヤーの「X」位置は全く変化していないので、「Detect」トリガーは何も反応しません。

3. 条件と数式を使ってスクロールの方向をチェックする

レイヤーの「Scroll」を検出できるようになったので、スクロールの方向（上方向と下方向）に応じて異なるレスポンスを可能にする条件を設定します。

1. インタラクションパネルの「Detect trigger」の下にある「+」を押して、新しいレスポンスを追加し、「Condition」を選択します。

2. コンディションのプロパティパネルで、レイヤードロップダウンをクリックし、「Formula」に変更します。

3. 数式バーにて「fx」をクリックし、数式入力画面を表示させます。 $touchVelocityY を入力します。

 $touchVelocityY は、（Y軸に沿って）動いている指（またはマウス）を使ったタッチの速度を表します。このため、どの方向に移動しているのかもわかります。たとえば、下方向にスクロールする場合は < 0 となり、上方向にスクロールする場合は > 0 となります。

 $touchVelocityY は、画面全体のタッチをチェックします。

4. スクロール方向に応じたインタラクションを追加する

1. 最初の条件では、コンテンツが下方向にスクロールされるときのインタラクションを設定します。コンディションのプロパティパネルで、< (less than) を選択し、値を0に設定します。インタラクションパネルで、 $touchVelocityY < 0 というコンディションが表示されます。これは、タッチベロシティが負のとき、言い換えると、下方向にスクロールしているときに、この条件のすべてのレスポンスが機能することを意味します。

2. インタラクションパネルで、「Detect」の下にある「+」をクリックし、「Move」レスポンスを追加します。レイヤーの「tabBar」を選択し、「Move To」をY軸の812の位置に設定します。X 座標は空のままで構いません。これで、下方向にスクロールしたときに、tabBarレイヤーが画面下部に移動します。

3. Headerレイヤーも移動させたいので、インタラクションパネルの「Detect」の下にある「+」をクリックし、「Move」レスポンスをもうひとつ追加します。今回は、レイヤーのHeaderを選択し、「Move To」をY軸の0の位置に設定します。これで、Headerレイヤーが下スクロール時に画面上部に移動します。

最後に、上にスクロールしたときに2つのレイヤーを戻したいので、「Detect」の下にある「+」をクリックし、もう1つの「Condition」を追加します。もう一度、数式 $touchVelocityY を入力しましょう。ただし今回は > を選択し、値を0に設定します。

インタラクションパネルに、 $touchVelocityY > 0という別の条件が表示されます。

これで、スクロール方向が上向きのときのインタラクションを設定しやすくなります。あとは、先ほどの「Move」レスポンスを繰り返して、2つのレイヤーを元の位置に戻すか、先に説明したように、「Reset」レスポンスを使うことができます。

💡 豆知識

上方向へスクロールしている間に再び「Move」レスポンスを使用する代わりに、「Reset」レスポンスを使用することで効率を最大化できます。

1. 「Detect」の下にある「+」をクリックし、「Reset」を選択します。それをtabBarレイヤーに設定します。この場合、より現実的なトランジションにするために、「Easing」を「Ease out」に設定します。同じことを繰り返して、もう1つの「Reset」レスポンスを追加し、今度はHeaderレイヤーに設定します。

2. 「Reset」レスポンスは、選択されたレイヤーをリセットし、元の位置と状態に戻します。

終わりに

今回のユースケースのチュートリアルは参考になりましたか？ぜひ、1分程度で終わるアンケートにご協力ください。