ほぼほぼXMLで済ませているので簡単です今回メニューに階層があるんでアニメーションするようにしてみた— Anadreline@新作アプリ開発中 (@Anadreline) 2017年11月9日
わりといい感じ、あとでブログにまとめよう pic.twitter.com/Iuqc59yzCU
画面レイアウトの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>
0 件のコメント:
コメントを投稿