FacebookやGoogle+みたいにヘッダーのアイコンを押したら画面の左側にメニューを表示するやり方。
参考記事
上の記事のままでももちろん動作しますが、ちょっと手を加えました。
記事では画面をどこかタッチしたらメニューを表示するというサンプルでしたが、
ヘッダーにボタンを配置して、そのボタンをタッチしたらメニューに表示するというやり方に変えました。
先にレイアウト（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);
}
}
}
こんなかんじです。
長くはなりましたが何も難しいことはしてないので簡単に試すことができると思います。
実行イメージは、こんなかんじ。
続きも書いたんで参考までにどうぞ
http://teru2-bo2.blogspot.jp/2012/08/androidfacebookgoogle_22.html
0 件のコメント:
コメントを投稿