AndroidでConstraintLayout 2.0.0以降でMotionLayoutというビューを動かすためのレイアウトが追加されています。
今回、初めてMotionLayoutを使ってモーションを組んだのですが画面幅のレイアウトがあって、その中にボタンなどが配置されていて、そのレイアウトを画面外からスライドするように表示させたかったのですが、どうやってよいかわからなかったので色々試した結果、それっぽく動くようになりました。
言葉では説明しにくいので、以下の見た目を見てもらえればと思います。
見た目
結果的に以下のような感じになります。
概要
ACTIONボタンをタップすると画面外からボタンが配置されているレイアウトがスライドしてきます。
このときレイアウト内のボタンの位置は画面サイズの左と右に固定しています。
ボタンだけを適当に配置してしまうと、スライドしてきたときのボタンのアニメーションが不自然になってしまうので、画面枠外で画面幅のレイアウトを作っておいてMotionLayoutのトランジションで制約を変更してアニメーションしております。
このとき、難しかったのが画面外に配置するボタンが乗っているレイアウトの横幅をどうやって画面幅に合わせるかということです。
結果的にlayout_constraintWidth_defaultとlayout_constraintWidth_percentを使いました。
layout_constraintWidth_defaultの値をpercentにすることで、割合を指定することができます。layout_constraintWidth_percentには1.0を指定して横幅を100%にして画面外にいながらも横幅を画面幅に設定します。
アニメーションのXMLは以下のようになります。
これで、目的の動作はするようになりました。
MotionLayoutにするとAndroidStudioのレイアウトエディタでレイアウトが少し変更しにくくなるのですがMotionLayoutはすごい便利だと思います。
今回のサンプルコードはGitHubにおいておきました。
まとめ
正しいやり方かどうかわからないのですが、もし他によいやり方があったら是非教えてもらえると幸いです。