画面がスライドするメニュー (Facebookアプリ風メニュー) を作成する - Android

画面がスライドしてメニューが表示される動作を実装します。

注意と補足

Androidの推奨ではNavigationDrawerを用いた実装が推奨されています。

アプリケーション作成情報

ProjectName : FacebookMenu
ApplicationName : FacebookMenu
PackageName : com.ipentec.FacebookMenu
Activity : MainActivity
Androidのバージョンは2.3.3にしました

UI

以下のUIを準備します。
LinearLayoutを配置し内部にボタンを一つ配置します。

LinearLayoutの下にもう一つLinearLayoutが配置してあります。こちらがメニュー部になります。メニュー部の作成が終わりましたら、先のLinearLayoutをメニュー部のLinearLayoutに重ねて配置します。

メニュー部に配置したTextViewの"Text Size"を20spに設定し、文字を大きくします。必要に応じて"Layout Parameter"の"Margin"の"Top"や"Bottom"に値を設定して余白をとります。

メニュー部に配置したTextViewのClickイベントが発生するよう"Clickable"プロパティを"true"に設定します。

コード

以下のコードを記述します。

MainActivity.java

package com.ipentec.facebookmenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.*;
import android.view.View.*;
import android.view.animation.*;
import android.view.animation.Animation.*;
import android.widget.*;
import android.util.*;
import android.media.*;

public class MainActivity extends Activity implements OnTouchListener{
  private int scrollX = 0;
  LinearLayout linerLayout2 = null;
  int dWidth, dHeight;
  boolean MenuOpen = false;
  int ll2w,ll2h,ll2x,ll2y;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    linerLayout2 = (LinearLayout)findViewById(R.id.linearLayout2);

    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    dWidth = metrics.widthPixels;;
    dHeight = metrics.heightPixels;
    scrollX = (int)(dWidth * 0.5f);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
  
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);

    TranslateAnimation animation = new TranslateAnimation(0, scrollX, 0, 0);
    animation.setAnimationListener(new AnimationListener() {
      public void onAnimationStart(Animation animation) {}
      public void onAnimationRepeat(Animation animation) {}
      public void onAnimationEnd(Animation animation) {
        
        linerLayout2.layout(scrollX, 0, dWidth, dHeight);
        linerLayout2.setAnimation(null);
      }
    });
    
    animation.setDuration(300);
    linerLayout2.startAnimation(animation);
    
    return false;
  }
  
  public void button1_onClick(View view){  
    //ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    //toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  
    
    if (MenuOpen == false){
      //最初に幅と高さを記録
      ll2w = linerLayout2.getWidth();
      ll2h = linerLayout2.getHeight();
      ll2x = linerLayout2.getLeft();
      ll2y = linerLayout2.getTop();
    
      MenuOpen = true;
      TranslateAnimation animation = new TranslateAnimation(0, scrollX, 0, 0);
      animation.setAnimationListener(new AnimationListener() {
        public void onAnimationStart(Animation animation) {}
        public void onAnimationRepeat(Animation animation) {}
        public void onAnimationEnd(Animation animation) {
          linerLayout2.layout(scrollX, ll2y, dWidth, dHeight);
          linerLayout2.setAnimation(null);
        }
      });
      
      animation.setDuration(300);
      linerLayout2.startAnimation(animation);
    }else{
      MenuOpen = false;
      
  
      //linerLayout2.layout(ll2x, ll2y, ll2w, ll2h);
      linerLayout2.layout(ll2x, ll2y, dWidth, dHeight);

      TranslateAnimation animation = new TranslateAnimation(scrollX, 0, 0, 0);
      animation.setAnimationListener(new AnimationListener() {
        public void onAnimationStart(Animation animation) {}
        public void onAnimationRepeat(Animation animation) {}
        public void onAnimationEnd(Animation animation) {
          linerLayout2.setAnimation(null);
        }
      });
      animation.setDuration(300);
      linerLayout2.startAnimation(animation);
    }
  }
  
  public void textbox1_onClick(View view){  
    if (MenuOpen == true){
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  
  
    Toast ts = Toast.makeText(this, "Menu1がタップされたよ", Toast.LENGTH_SHORT);
    ts.show();
    }
  }
  
  public void textbox2_onClick(View view){  
    if (MenuOpen == true){
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  

    Toast ts = Toast.makeText(this, "Menu2がタップされたよ", Toast.LENGTH_SHORT);
    ts.show();
    }
  }
  
  public void textbox3_onClick(View view){  
    if (MenuOpen == true){
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  

    Toast ts = Toast.makeText(this, "Menu3がタップされたよ", Toast.LENGTH_SHORT);
    ts.show();
    }
  }
  
  public void textbox4_onClick(View view){  
    if (MenuOpen == true){
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  

    Toast ts = Toast.makeText(this, "Menu4がタップされたよ", Toast.LENGTH_SHORT);
    ts.show();
    }
  }

  public void textbox5_onClick(View view){  
    if (MenuOpen == true){
    ToneGenerator toneGenerator = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);  

    Toast ts = Toast.makeText(this, "Menu5がタップされたよ", Toast.LENGTH_SHORT);
    ts.show();
    }
  }
}

解説

textbox1_onClick, textbox2_onClick, textbox3_onClick, textbox4_onClick, textbox5_onClickのメソッドはメニュー部のTextViewのクリックイベントです。TextViewはクリックイベントが発生するようにClickableプロパティを"true"に設定します。buttonがクリックされると、上部のメイン画面のLinerLayoutをアニメーションして右側にスライドさせています。