AndroidでFacebookやGoogle+みたいなメニューを表示する : てるてる坊主

題名の通りです。
FacebookやGoogle+みたいにヘッダーのアイコンを押したら画面の左側にメニューを表示するやり方。

参考記事

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

上の記事のままでももちろん動作しますが、ちょっと手を加えました。
記事では画面をどこかタッチしたらメニューを表示するというサンプルでしたが、
ヘッダーにボタンを配置して、そのボタンをタッチしたらメニューに表示するというやり方に変えました。

先にレイアウト（main.xml）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
        
    <-- Menu Layout -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/menuLayout"
        android:background="#666666" >
        
        <TextView
            android:id="@+id/textview01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@+string/menutext01" />
        
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#ffffff" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@+string/menutext02" />
            
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#ffffff" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@+string/menutext03" />
        
    </LinearLayout>
    
    <-- Main Layout -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/mainLayout"
        android:background="#ffffff" >
        
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:orientation="horizontal"
            android:background="#aaaaaa"
            android:id="@+id/header" >
            
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                android:id="@+id/headerButton"
                android:text="@+string/headerbutton" />
            
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textSize="25sp"
                android:textColor="#4f4f4f"
                android:text="@+string/headertext" />
            
        </LinearLayout>
        
        <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/header" >
            
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30sp"
                    android:textColor="#4f4f4f"
                    android:text="@+string/maintext" />
                
            </LinearLayout>
            
        </ScrollView>
        
    </RelativeLayout>

    
</FrameLayout>

一応、リソースファイルも（string.xml）

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">LeftMenuSample</string>
    
    <string name="menutext01">Menu1</string>
    <string name="menutext02">Menu2</string>
    <string name="menutext03">Menu3</string>
    
    <string name="headertext">サンプルアプリ</string>
    <string name="headerbutton"><</string>
    
    <string name="maintext">メインのレイアウト</string>

</resources>

Activityのソース（LeftMenuSampleActivity.java）

package jp.kuseful.leftmenusample;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.RelativeLayout;
public class LeftMenuSampleActivity extends Activity
    implements OnClickListener {
    
    private int displayWidth = 0;
    private int displayHeight = 0;
    private int scrollX = 0;
    private boolean isOpenMenu = false;
    private RelativeLayout mainLayout = null;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // メインレイアウトを取得
        mainLayout = (RelativeLayout)findViewById(R.id.mainLayout);
        
        // メニュー表示ボタンを取得しクリックイベントを追加
        Button headerButton = (Button)findViewById(R.id.headerButton);
        headerButton.setOnClickListener(this);
        
        // ディスプレイ情報を取得
        DisplayMetrics metrics = new DisplayMetrics();
        
        Display display = getWindowManager().getDefaultDisplay();
        display.getMetrics(metrics);
        displayWidth = display.getWidth();
        displayHeight = display.getHeight();
        
        // メニューをどのくらい表示するか
        scrollX = displayWidth - (int)(metrics.scaledDensity * 200);
    }

    @Override
    public void onClick(View v) {
        if (!isOpenMenu) {
            isOpenMenu = true;
            
            // メニューを表示するアニメーションを設定
            TranslateAnimation anim = new TranslateAnimation(0, scrollX, 0, 0);
            anim.setAnimationListener(new AnimationListener() {
                
                public void onAnimationStart(Animation animation) {}
                
                public void onAnimationRepeat(Animation animation) {}
                
                public void onAnimationEnd(Animation animation) {
                    mainLayout.layout(scrollX, 0, displayWidth + scrollX, displayHeight);
                    mainLayout.setAnimation(null);
                }
            });
            
            anim.setDuration(300);
            mainLayout.startAnimation(anim);
        } else {
            isOpenMenu = false;
            
            // メニューを非表示するアニメーションを設定
            mainLayout.layout(0, 0, displayWidth, displayHeight);
            TranslateAnimation anim = new TranslateAnimation(scrollX, 0, 0, 0);
            anim.setAnimationListener(new AnimationListener() {
                
                public void onAnimationStart(Animation animation) {}
                
                public void onAnimationRepeat(Animation animation) {}
                
                public void onAnimationEnd(Animation animation) {
                    mainLayout.setAnimation(null);
                }
            });
            
            anim.setDuration(300);
            mainLayout.startAnimation(anim);
        }
    }
}

こんなかんじです。
長くはなりましたが何も難しいことはしてないので簡単に試すことができると思います。

実行イメージは、こんなかんじ。