高畑 匡秀

2012.06.27

Facebookアプリのメニューらしきものをandroidで実装してみた

お久しぶりです。高畑です。

前回にandroidのことをちょろっと書きましたが、今回もandroidネタを書きます。

今回はタイトルの通り、iphoneやandroidのFacebookアプリにある左側からにょいーんとなるメニューを実装してみたいと思います。

実装のイメージとしては、メニューとなるレイアウトと、メインとなるレイアウトを重ねあわせて。メインのレイアウトを右ににょいーんとスライドさせることで下に隠れていたメニューを表示するというものです。

実際にFacebookのアプリ側はどうやって実装しているのかはわかりませんが、ここでやる方法でかなり良い感じになります。

今回使用するレイアウトのxmlファイルです

FrameLayoutでメインとメニューのレイアウトを重ねています。

このメニューのレイアウトの上に

メインのレイアウトが重なっています。

ここからActivityのソースです

長くなってしまいましたがこれでメインレイアウトをタッチすると、右ににょいーんとずれて、下に隠れていたメニューのレイアウトが見えます。

もう一度メインレイアウトをタッチすると左ににょいーんして元の状態に戻ります。

アニメーション後、こんな感じの見た目になります。

今回のポイントはアニメーションの動作完了後に

で物理的にレイアウトを移動させています

アニメーションは見た目だけ動いて、レイアウトのタッチ位置の座標までは移動していません。なので、物理的にレイアウトを移動させないと、画面のタッチイベントの取得位置が「アレ?なんでここで反応するの?」って感じになります。

アライドアーキテクツでは、一緒に働く仲間を随時募集しています。是非一度採用サイトをにょいーんと覗いてみてください。