モバイルアプリ ギャラリー フリック操作を作る その①

はじめに

コンテナーを使ってモバイルアプリでよくあるフリック（スワイプ？）してメニュー出すやつができないか？
と少し前から思っていたんですが、やってみたらできたので記事にしました。
水平コンテナーと普通コンテナーを使って実装しています。

その①は右側のフリック表示対応までの実装を解説します。

ぴーたくん

水平、垂直コンテナーにはスクロールプロパティがあるから、それを使って横スクロールを可能にしているんだね！

Twitterで思ったより反響をいただいたので、追加で左側にも出す方法を検証し、
ひとまずは出来たのでこちらもサンプルに含めました。

左右作ってみて、個人的には以下の点で右側だけでよさそうな印象もあります。
・左側のフリック（スワップ）はアプリの終了スワップがやりずらい
・流れでアプリを左スワップして間違って終了させてしまいがち
・左側の実装の方が複雑、繊細だったので微調整などで想定より時間がかかるかもしれない。

せっかく調べたので、左側の実装と右側もあわせてニュルっと感出した（スライドした分大きくなる）別パターンも用意しました。
動画にはどちらも含めてますが、左側部分とパターン２の記事はその②で記載予定です。

NOTEイメージでやってみたらなんかできたという内容なので、もっと良い方法があるかもしれませんがそのあたりご了承ください。
また、この実装はモバイル限定のサンプルとなります。確認したデバイスはiPhoneXRのみなので、他デバイスでどうなるか確認出来てはおりません。
PC版で見るとスクロールバーが見えていまいち、プレビューでの動きも実機と異なる挙動でした。（PC版だと左側が出てこないなど）
また、その他の部分への影響についても確認しきれてはおりませんのでご了承の上ご参考ください。

ぴーたくん

コンテナーをうまく使って、ドロップシャドウで浮かしたり、フリックしておしゃれモバイルアプリを作ろう！

動画イメージ

実装

さっそく実装の部分ですが、今回はSPOリストから自動生成するアプリに適用しました。
デザイン的に微調整している箇所などは割愛してますので、それぞれ調整いただければと思います。

SPOリスト

こちらはサンプル用に以下のようなリストを作っています。本筋とはズレるので割愛します。
説明はこちらを前提にしていますが、基本的に任意のリストからギャラリーを作れば応用できます。

自動生成アプリのギャラリーにコンテナー適用

以下ギャラリー部分の最終的な内容です。

まずはギャラリーにコンテナーを入れる部分までを解説いたします。

1. ギャラリーの中に水平コンテナーを入れる
2. その中に普通のコンテナーを入れる
3. 普通のコンテナーの中にギャラリー内のコントロールを入れる（切り取って貼り付け）
4. エラーが出るので調整する
5. 今回は自動生成されたギャラリーから適宜カスタマイズした

①～②まで

ギャラリーの中に水平コンテナーを入れます。続いてその中に普通のコンテナーを入れます。

③～④まで

ギャラリー内の他のコントロールを切り取って普通コンテナーの中に貼り付けます。
そうするとエラーがいろいろ出るので調整します。

NOTEこの段階ではなぜか中身のコンテナーが違うところに表示（右上の方）に表示されてますが、いったんスルーします。後々の調整で自動で戻ります。

1. Select(Parent)のエラー　→同様にするならSelect(ギャラリー名)、不要ならいったん空にする※自分はいったん空にして後で調整してます。
2. Parent.TemplateHeightのエラー　→Parent.Heightに置換する
3. Parent.TemplateWidthのエラー　→Parent.Widthに置換する

TIPS別の記事で紹介しているエラー解消法と同様です。
コンテナーでドロップシャドウ ! ダイアログ・ボタン・アイコン・ギャラリーにも適用する！ | Power Apps Tips ログ (youseibubu.com)

エラー解消後

自動生成アプリからのカスタマイズ

・水平コンテナーの幅が貼り付け時にずれているのでギャラリーと同じ幅にする

今回のサンプルでは以下のように調整しています。
（元からある横と下の選択した場合の図形を削除、＞アイコン削除してカテゴリや売り切れ、ハートを追加、位置調整など）
→カスタマイズは任意です。とりあえず試されたい場合はそのままでもOKです。

右側のフリックエリアの追加

ここからがフリック操作エリアの追加となります。水平コンテナーにもう一つ普通コンテナーを入れます。
→この段階で水平コンテナーが勝手に2分割してくれます。※後々調整

そしてそのコンテナーの中にアイコンを2つ入れます。今回はラベルも入れています。
※①の中に水平コンテナーを入れてその中にアイコン2つを入れて2等分にレイアウトするでもＯＫです。

NOTE今回はあらかじめ作ったものを入れ込んだ画面ショットですが、実際には任意のアイコンを1こ～複数入れて背景やパディング、大きさの調整など行ってください。例では2個入れた内容で進めています。

1. 親水平コンテナーにコンテナーを追加
2. 配下にアイコンを2つ入れる
3. 大きさを合わせて背景色やパディングなどを付けてデザインする

水平コンテナー内の幅を再調整します。

いまは2分割になっているので、最初のコンテナーを選択してプロパティから幅（伸縮可能）をオフにします。
そして幅を親（水平コンテナー）の幅にします。

TIPSデフォルトでは幅伸縮可能で２のうち１などの設定で自動でポジショニングしてくれるのですが、これを切ると普通に幅設定できるようになります。全体を埋める幅にして次の部分をはみ出すように調整しています。

続いて、追加したアイコンのコンテナーもプロパティから幅（伸縮可能）をオフにします。
そして幅を任意の幅にします。（サンプルでは2つ分の120×240にした）

水平コンテナーの「水平報告のオーバーフロー」をスクロールに変更

ぴーたくん

ここがキモだよ！

次に親の水平コンテナーのプロパティの「水平方向のオーバーフロー」を非表示 から スクロールに変更します。

そうすると横スクロールが出ます。水平コンテナーの幅に収まらない場合はスクロールを出せます。
プレビューで横にスクロールするとアイコンのエリアが出てくると思います。

TIPS水平、垂直コンテナーはこのオーバーフローの縦、横のスクロールプロパティでスクロールが出せるようになっています。
これを活用すればギャラリー全体を入れ込み、データテーブルのように全体的な横スクロールも対応できます！これはまた別で記事にでもしようかと思います。

NOTEプレビューで見るとブラウザ版では各レコードにスクロールが表示されます。（エミュレーターでも同様）そのためこのテクニックはモバイル限定での見た目調整となります。
モバイルの場合（iPhoneで確認）はスクロールは見えずにフリック操作できるようになりいい感じになります。

この段階でおおむね出来上がりました。
あとはアイコンやラベルの幅・パディングなどを調整していい感じにします。

ドロップシャドウ、ギャラリーパディングの調整など

その他サンプルではざっと以下のように調整してます。この辺りは好みに合わせて調整ください。

1. ギャラリーのテンプレートパディングを調整　→10pxくらいに
2. この際にコンテナーの幅がはみ出るので再度ギャラリーと同じに収まるように調整
3. 水平コンテナーのドロップシャドウを強くする

アイコンの処理を実装

この部分も本筋ではないので割愛しますが、サンプルでは1つ目を「売り切れ/入荷」、2つ目を「削除」にしています。
売り切れ/入庫はクリックでPatchしてSoldoutフラグを更新、状態に合わせてテキストやFill、アイコンを変更しています。
削除の方はダイアログを出して、削除をクリックすると削除フラグを更新します。

上記で右側のフリックエリア部分については一通り調整出来たと思います。
プレビューではスクロールが出ていてわかりずらいので、公開して実機での確認を行います。

TIPSサンプルではレコードの画像とタイトルをクリックすると標準の閲覧ビューに移動するようにしています。
普通にコンテナーを入れているだけなので、うわかぶせして操作が出来ないということはありません。

レコードの位置を戻す方法

現在の課題としては、メイン部分の位置を初期値に戻すのがクリックなどでは出来てないことです。

Patchを行いギャラリー表示が更新されると自動で初期状態に戻るのですが、変数などを使ってメイン部分のXを調整はやってみた限り出来ませんでした。ギャラリー初期化やRefleshなども効かず。
ただＸの値は取れたのでその情報をもとに左側エリアはを出す出さないの調整をしています。
その②では左側の実装と応用した右側の別バージョンを投稿予定です。

NOTEフリック後の初期位置に戻すのは同じようにスライドして戻すか、Patchなどでレコード更新のタイミングで一律位置が戻るか。という挙動でした。
※調査不足の可能性もあるのでお分かりの方いらっしゃったら教えていただければ幸いです。

追記：ギャラリーの切り替えとの併用はしない方が良い

今回のフリック対応と合わせて、ギャラリーの選択時の切り替え（Transition）でポップやプッシュを使ってみたのですが、これを入れるとスラッとフリックしてくれない場合が頻発したので横スクロールと相性悪いようでした。
フリック対応を入れる場合はここはなしにした方が良いです。

おわりに

今回はモバイル版アプリでのギャラリーのフリック操作サンプルのその①をご紹介しました。
以前はこういったことは出来なかったと思うんですが（出来たとしてもPCF必要など）コンテナーなどのコントロールが追加され、簡単な調整でできることが広がってうれしい限りです。デフォルトのギャラリーも前よりおしゃれになりましたしね。

ドロップシャドウも組み合わせてギャラリーのカードタイプの表示もいい感じにできますし、今後のスタンダードな実装に広まっていけばと思います。
なんかPower Appsのアプリはデザインがいまいち。。と言われないように！

その②に続きます。それでは。

その②を書きました。

2023.07.13

モバイルアプリ ギャラリー フリック操作を作る その②

はじめに コンテナーを使ってモバイルアプリでよくあるフリック（スワイプ？）してメニュー出すやつができないか？と少し前から思っていたんですが、やってみたらできたので記事にしました。今回は前回の続きのその②です。その①は右側のフリック表示対応までの実装を解説しました。 水平コンテナーと普通コンテ...