Anadreline: XMLで作るアニメーションするメニュー

新作アプリオタマーズ（仮）作ってますタイトルメニューに階層があって、切り替えにアニメーションをつけてみたので紹介します

今回メニューに階層があるんでアニメーションするようにしてみた
わりといい感じ、あとでブログにまとめよう pic.twitter.com/Iuqc59yzCU
— Anadreline@新作アプリ開発中 (@Anadreline) 2017年11月9日

ほぼほぼ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>

Anadreline

2017年11月10日金曜日

XMLで作るアニメーションするメニュー

0 件のコメント:

コメントを投稿

自己紹介

Labels