Allied ArchitectsAllied ArchitectsEngineer Blog

Androidで「Path」のメニューっぽいものを実装してみる

2013/06/4 言語

お久しぶりです。アライドのザックこと高畑です。

以前からかっこいいなぁと思っていたPathの「ヒュン!ヒュン!ヒュン!」って飛び出るのメニュー部分をAndroidで実装してみたいと思っていたので、今回このブログを書くにあたって
良い機会なので、それっぽく動くように頑張って実装してみました。

とりあえず、完成系はこんな感じになりました。

Pathっぽいメニューのレイアウトを用意

レイアウトプレビューで見るとこんな感じです。

ベースとなるボタンの下に、メニューとなるボタンを5個重ねています。
下に重なっているメニュー画像達






PathっぽいメニューのFragmentのソースコード

このFragmentをActivityに追加するだけで動くようになります。

やっていることは
開くアニメーションが走る前に、先に各メニューを移動先までマージンを取る
開くアニメーションが走るときに、各メニューはすでにマージンを取った後なので
アニメーションのfromXとfromYの位置をマージンを取る前の位置にしてアニメーションを実行する
という流れになっています。

閉じるアニメーションも同様に、先にマージンを元の位置に戻してから
アニメーションを実行しています。

先にマージンを取ってからアニメーションを実行しているのは
アニメーション後にマージンを設定すると、どうしても画像がチラついたり
アニメーション完了後の位置からさらにマージンを取って変な位置にメニューが表示されたり
色々と問題があったので、先にマージン取ってからアニメーションするようにしました。

実行してみる

上記で作成したFragmentをActivityに貼付けて実行してメニューを開くと

この様に広がります

開く角度を180度にした場合

180度にメニューが広がります

開く角度を270度にして、メニューの個数を4個にした場合

十字に広がってかっこいいです

最後に・・・

今回のサンプルのアニメーションではTranslateするだけですが
これにRotateやAlphaのアニメーションなどを追加すれば、さらにかっこ良くなります。

機会があればどこかで使ってみたいです。

今回のソースコードをgithubに上げておきました。

高畑 匡秀
  • 高畑 匡秀
  • Android?エンジニア
  • iOSに浮気を始めたAndroidエンジニア? Androidはほとんど書いてない…

RELATION ENTRY

JetBrains製DBツール「DataGrip」の基本操作

JetBrains製DBツール「Data...

2017/04/13 SQL

ネイティブアプリの開発からすっかり離れてWebエンジニアの世界にどっぷり使っています。 phpの開発にずっとintelliJを使っていたのですが、やっぱりphpやるときはPhpStorm使いたくなったりiOSやるときにAppCodeもあったほうがいいかなとか 色々考えてもうせっかくだからAll Pr...

続きを読む

SharedPreferenceを使って学ぶkotlin

SharedPreferenceを使って...

2015/12/11 kotlin

Kotlin Advent Calendar 2015の11日目の記事です 昨日は red_fat_daruma さんによるJavaからの利用を視野に入れたKotlinコードで何をするべきかでした 久しぶりのブログ更新です。最近Androidをあまり触らずiOSに浮気をしています。 浮気をしてる最中...

続きを読む

高畑 匡秀の記事一覧へ

ページTOPへ