動画
要約
- AnimatedSwitcherを使えば、widgetの切り替えをアニメーション付きでできる
- アニメーションの種類も自由に選べる
内容
AnimatedSwitcherを使えば、複数のwidgetの表示をアニメーション付きで切り替えることができます。
まず最初に表示するwidgetをAnimatedSwicherの子widgetに設定します。さらにトランジションの長さも設定します。
これで準備完了です。
別のwidgetに表示を切り替えたい場合は、最初にセットしたmyAnimatedWidgetに別widgetをセットしてください。
それだけでAnimatedSwitcherがアニメーション付きで切り替えてくれます。
あとはAnimatedSwitcherがやってくれる
デフォルトでは、FadeTransitionでアニメートしますが、変更することも可能です。
transitionBuilderにScaleTransitionやRotationTransitionなどを設定することが可能です。
またlayoutBuilderを設定して、新しいwidgetの表示方法や位置を変更することもできます。
注意点として、切り替えるwidgetが直前のwidgetと同じ型の場合はkeyを設定することを忘れないでください。
まとめ
Widget of the Weekの#43 AnimatedSwitcherの日本語翻訳版でした。
AnimatedSwitcherによりwidgetの切り替えをアニメートでき、ユーザーがより理解しやすいUIになります。
切り替えが分かりにくい部分があれば、AnimatedSwitcherを検討してみてもいいかもしれません。
■ 次の記事はこちら
#44 – AnimatedPositioned
■Widget of the Week まとめ
Widget of the Week 一覧