新作アプリオタマーズ（仮）作ってます
タイトルメニューに階層があって、切り替えにアニメーションをつけてみたので紹介します
ほぼほぼXMLで済ませているので簡単です
画面レイアウトのXMLがこちら
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ImageView
<FrameLayout
<LinearLayout
<ImageButton
android:id="@+id/setting"
<ImageButton
android:id="@+id/mission"
・・・
</LinearLayout>
</FrameLayout>
</LinearLayout>
くっそ長いので全文は下のほうに追いやりました
メニュー部分はFrameLayoutで直下のLinearLayoutに1階層目のボタン3つ
id="@+id/stageの部分が2階層目になっててvisible=goneで隠してます
次にAnimation用のXMLがこちら
// 1階層目メニュースライドイン
// res/anim/menu_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:fromXDelta="-100%p"
android:toXDelta="0%p"
android:fillAfter="true"
android:duration="800" />
// 1階層目メニュースライドアウト
// res/anim/menu_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:fromXDelta="0%p"
android:toXDelta="120%p"
android:fillAfter="true"
android:duration="800" />
// 2階層目メニューズームイン
// res/anim/zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:fromXScale="0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="600" />
で、ボタンを押したときの処理がこちら
動かすViewに上記のstartAnimationをセットしてやるだけです
@Override public void onClick(View v) {
switch (v.getId()) {
case R.id.mission : //2階層目表示
menu_off = true;
findViewById(R.id.stage).startAnimation(AnimationUtils.loadAnimation(this, R.anim.zoom_in));
findViewById(R.id.setting).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_out));
findViewById(R.id.mission).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_out));
findViewById(R.id.challenge).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_out));
break;
case R.id.title1 : //1階層目に戻る
menu_off = false;
findViewById(R.id.stage).clearAnimation(); //これやらんとなぜか変に表示が残る
findViewById(R.id.stage).setVisibility(View.GONE);
findViewById(R.id.setting).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_in));
findViewById(R.id.setting).setVisibility(View.VISIBLE);
findViewById(R.id.mission).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_in));
findViewById(R.id.mission).setVisibility(View.VISIBLE);
findViewById(R.id.challenge).startAnimation(AnimationUtils.loadAnimation(this, R.anim.menu_in));
findViewById(R.id.challenge).setVisibility(View.VISIBLE);
break;
}
}
メニューを消すときにstartAnimation直後に.setVisibility(View.GONE)をやってしまうと
アニメーションする前に消えてしまうので、AnimationListenerをimplementsして
onAnimationEndで消してます
public class Menu extends Activity implements View.OnClickListener, Animation.AnimationListener {
@Override public void onAnimationStart(Animation animation) { }
@Override public void onAnimationRepeat(Animation animation) { }
@Override public void onAnimationEnd(Animation animation) {
if (menu_off) {
findViewById(R.id.setting).setVisibility(View.GONE);
findViewById(R.id.mission).setVisibility(View.GONE);
findViewById(R.id.challenge).setVisibility(View.GONE);
}
}
以上
res/layout/menu.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/title_back"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="32dp"
android:src="@drawable/title" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center">
<ImageButton
android:id="@+id/setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:background="@null"
android:onClick="onClick"
android:src= "@drawable/menu_sg"/>
<ImageButton
android:id="@+id/mission"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:background="@null"
android:onClick="onClick"
android:src= "@drawable/menu_mi"/>
<ImageButton
android:id="@+id/challenge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:background="@null"
android:onClick="onClick"
android:src= "@drawable/menu_ch"/>
</LinearLayout>
<LinearLayout
android:id="@+id/stage"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:visibility="gone">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<LinearLayout
android:id="@+id/stage1"
android:tag="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_u"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage1"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:id="@+id/stage2"
android:tag="2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_l"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage2"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:id="@+id/stage3"
android:tag="3"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_u"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage3"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<LinearLayout
android:id="@+id/stage4"
android:tag="4"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_u"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage4"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:id="@+id/stage5"
android:tag="5"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_u"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage5"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:id="@+id/stage6"
android:tag="6"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:onClick="onClick"
android:gravity="center_horizontal">
<ImageView
android:scaleType="matrix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mission_u"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stage6"
android:gravity="center"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"/>
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:background="@null"
android:onClick="onClick"
android:src= "@drawable/menu_tt"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
