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

はじめに

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

2023.07.12

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

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

水平コンテナーと普通コンテナーを使って実装しています。
内容としてはフリック操作感は勝手にスマホ側が表現してくれているので、ただ水平コンテナーのスクロールを使っているだけですね。

その②では左側の実装と右側もあわせてニュルっと感出した（スライドした分大きくなる）別パターンの紹介記事です。
（掲載動画の後半部分がニュルッと感のパターンです）

TIPS個人的には右側だけでも十分かなという印象もありますが、
右だけバージョン＋右をもう少しにゅるっとさせたいというのもできるので必要に応じて参考ください。
（その場合は最後の部分だけ見ればOKかと）

左フリック実装時のデメリット
・左側のフリック（スワップ）はアプリの終了スワップがやりずらい
・流れでアプリを左スワップして間違って終了させてしまいがち
・左側の実装の方が複雑、繊細だったので微調整などで想定より時間がかかるかもしれない。
・初期位置に戻すが出来ていないので、工夫が必要（Patch後にWidthを0にするなど）

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

ぴーたくん

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

動画イメージ

その①同様の動画イメージです。ニュルッとバージョンは後半のヘッダが緑っぽい方です。

実装

さっそく実装の部分ですが、ここまでの過程は前回のその①をご確認ください。
その続きとして記載していきます。以下は最終的な配置の画面ショットです。

左フリックエリアを追加

左のフリックですが、内容は右側と同じです。右に追加したコンテナーをコピーして追加するのが手早いと思います。
コピーして追加後に、再配置 ＞先頭に移動 します。そうすると左に来ます。

この状態で用途に合わせてアイコン部分をカスタマイズします。今回はおもに以下のように調整しています。

1. 1つのアイコンにしたので1つ削除
2. アイコンをお気に入りにしてFillやColorを調整
3. OnSelectの処理などを調整
4. 1つにしたのでコンテナーの幅、アイコンの幅などを調整　→120PX

左を隠す調整

ここまではシンプルですが、ここからはすぐにはうまくいかずに試行錯誤して調整した部分です。
まず、この状態だと初期位置に左のアイコンが出たままとなっており隠れていません。

よく枠外に配置する場合はそのまま範囲外の位置を指定しても配置されないため、 計算式や変数などを使って配置したりしますが、（10 – 100 でー90の位置など）水平コンテナーの場合、並んでいるコントロールのＸはすべて0となっており、効かないようになってます。

左のコンテナーをー300に指定しても効かない。
メイン部分は本来はXは120の位置にいますが、表示上は0になっています。ここを調整しても移動しません。

NOTE水平コンテナーは中身を均等にそろえたりする感じなので、個別の調整は効かないようになっています。
※調整する方法があるかもしれないのですが調べ切れてません。そこまで水平コンテナーに詳しくなく。。

TIPS調べていたら、アクセスして本来のXやYの値を取ることは可能でした！
以下のようにコントロール.X とすれば実際の値「120」が取れます。
これを使って左側の位置を調整します。

左コンテナーの幅をメインのXを使って動的に調整する

NOTEここからはプレビュー画面では実際の動きが再現できませんでした。
プレビューではあてにならないので、都度公開して実機（スマホ）で確認します。

実際に横スクロールされた場合のメインのＸ位置を取り左の表示位置の調整を考えました。
実際に左側を出したい場合はＸが初期値の０より大きくなっているはずです。（右向きにフリックしている）

ぴーたくん

あれ？左を出すのが右フリックで、右を出すのが左フリックだった？
いままで説明反対だったかも？こんがらがっちゃいました。ニュアンスで！

そこでメインのXが0より大きい場合に表示するように最初はVisibleを調整しました。

Code左コンテナのVisible　に Container2.X > 1 0　的な
※0だとズレいているようである程度大きくないとダメだった

そうすると想定通りというか、一応最初は非表示になり、スライドするとひょっと出るようになりました。
※この辺りが特にプレビューでは全く動かないので実機でないと確認できません。

ただ、10くらいだとすぐに出てくるので最終的に Container2.X > 40 くらいである程度スライドしたらパッと表示されるようにはできました。

ただこれだとスライドした感が全くなく、右側ともだいぶ感じが違いました。
ある程度は徐々に広がるようにしたかったので、いろいろ試して、最終的には以下のようにWidthを調整しました。
※VisibleはTrueに戻す

Code// 左コンテナーのWidthプロパティ
If(Container2_2.X > 40 , Min(Container2_2.X,120),0)

メインのXが40より大きかったら、 メインのXか120かの小さい方の値を幅に指定する。それ以外は0

このようにしたところ、スライドした分左側が表示されるようになり120までで止まりました。
右側はスクロールしているだけなので、それよりもヌルッと出てくる感じになりました。
イメージした感じにはなったので完了！（この辺りのイメージは動画で確認ください）

更新時に残ったまま問題

寝ようと思ったら、この事象にあたりました。左側のアクションもPatch（お気に入り更新）処理で、勝手に最初の位置（左側は隠れる）と思ったのですが、一番最初のレコードでやったときにそのまま表示が残り、他のレコードも全部出たままになってしまいました。以下のようなイメージです。

右側のエリアはPatch後に自動で初期位置に戻ってくれたんですが、左はダメ。

NOTE一番上が初期位置の状態で途中のレコードでやったら全部初期位置で表示されたので、
おそらくギャラリー再描画時に1番目のレコードの位置をベースに表示される動きのようです。

ここもこねこねやって、最終的に以下で落ち着きました。

Patch前に幅を0にする

Code//お気に入りアイコンのOnSelect
UpdateContext({isLoading:true});
Set(leftclose,true);
Patch(商品リスト,ThisItem,{お気に入り:!ThisItem.お気に入り});
Set(leftclose,false);
UpdateContext({isLoading:false});

// 左コンテナーのWidth　
If(leftclose , 0 ,Container2.X > 40 , Min(Container2.X,120),0)

アイコンクリック時にWidthを0にするように調整、Patch後に元の状態にする。
こうしたところ、Patch後の再描画の時点では左側は見えない状態なので、初期位置の表示にすることが出来ました。
正直いまいちな動きですが、とりあえずここの対応は終了。

ぴーたくん

いまいちな点はローディング前にすぐに消えて初期位置に戻る点です。右側と動きが異なるので。
タイマーを使って遅らせるなどやればできるかなとも思いますが、気になる方はお好みに調整ください。

最後にこのサンプルではアイコンのFillに色付けしてアイコン部分はパディングを強めにかけて大きさ調整しているので、親の横幅と合わせてアイコンも小さい～大きいとなります。
この点がにゅるッと感とも言えますが、右側と異なるのでこのバージョンでは固定サイズのアイコンを上に追加して調整しました。

右側もヌルッとした（左と同じ）実装にしたバージョン

最後に別バージョンとして、右側も左の表示と同じように調整した別バージョンを追加しました。
内容は左のWitdhに対応したのを移植して再調整しています。

Code//右側コンテナーのWidth
If(Container2_1.X < 0 , Min( Container2_1.X * -1,240),0)

メインのXをプラスに変換した位置と240の小さい方のX、それ以外は空としています。
左側と逆でメインのXがマイナス位置以下にいる場合として調整となります。
メインが左にずれた分、右側の幅が広がっていき、240までで止まるようになります

NOTE上記だけだとピタッとどちらも出なくなりました。Xが0という位置が悪いようです。

またすぐに右側が出てくるので少し余裕を持たすようにメイン部分をはみ出すサイズに調整しました。
この対応を入れると想定通りに動いてくれました。

Code//メインコンテナーのWidth
Parent.Width ＋ 30　　　→もとより大きくしてはみ出す感じ

以下のように少しずつ幅が広がっていき、アイコン、文字も比例して大きくなります。
※こっち側はプレビュー画面でも実機同様の動きを確認できました。

TIPS実際の動きは動画の後半部分（緑ヘッダーの方の動き）をご参考ください。
アイコンとテキストが米粒のようなところから大きくなるのもどうかと思うので、一定のサイズから大きくする。
や固定サイズにしてヌルッと感だけは残す。などお好みで調整ください。

おわりに

以上で完了です。
説明が長くなりましたがやっている内容としては、水平コンテナーを入れ込んでスクロール出しているだけです。
あとはスマホがいい感じにフリック感を出してくれるので内容は難しくないと思います。

表示エリアの狭いスマホギャラリーで、見た目や操作エリアを拡大するいい手だと思いますので、
左だけでもいいですし、ニュルッとあり、左右ありのパターンでもお好みで調整いただけるかと思います。

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

パワ谷さん

ぬるっととかにゅるっととかニュル、ヌルとか入り混じってるとここで気づくがスルー。
左、右フリックも表記あっているか怪しいがニュアンスで！