功能描述：
实现旋转菜单按钮，效果图如下：
功能分析：
1. 内侧的home按钮的点击
2. 中间的menu按钮的点击
3. 解决动画频繁出现
4. 硬件菜单的实现
5. 动画后点击的bug
动画:
1. View Animation: 补间动画，（旋转，位移，缩放，透明度，set）
1. 原理: 通过父容器来绘制自己动画时的样子
2. Property Animation: 属性动画（补间动画可以做到的，都可以做到，做不到的也可以做到）
1. 原理: 通过改变自身的属性来显示动画的
3. Drawable Animation: 帧动画
- 布局界面
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cdw.archedmenu.MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<!--外测-->
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="280dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level3">
<ImageView
android:id="@+id/channel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="6dp"
android:src="@drawable/channel1"/>
<ImageView
android:id="@+id/channel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel1"
android:layout_marginLeft="30dp"
android:src="@drawable/channel2"/>
<ImageView
android:id="@+id/channel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel2"
android:layout_marginBottom="-8dp"
android:layout_marginLeft="64dp"
android:src="@drawable/channel3"/>
<ImageView
android:id="@+id/channel4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/channel4"/>
<ImageView
android:id="@+id/channel5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel2"
android:layout_alignParentRight="true"
android:layout_marginBottom="-8dp"
android:layout_marginRight="64dp"
android:src="@drawable/channel5"/>
<ImageView
android:id="@+id/channel6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel1"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:src="@drawable/channel6"/>
<ImageView
android:id="@+id/channel7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="6dp"
android:src="@drawable/channel7"/>
</RelativeLayout>
<!--中间-->
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="180dp"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level2">
<!--搜索-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:src="@drawable/icon_search"/>
<!--菜单按钮-->
<ImageView
android:id="@+id/leve2_iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/icon_menu"/>
<!--优酷按钮-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="2dp"
android:src="@drawable/icon_myyouku"/>
</RelativeLayout>
<!--内测-->
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level1">
<!--home的菜单按钮-->
<ImageView
android:id="@+id/level1_iv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/icon_home"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
- mainActivity页面
package com.cdw.archedmenu;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends Activity implements View.OnClickListener {
private ImageView mIvHome;
private RelativeLayout mRlLevel1;//一级菜单的容器
private RelativeLayout mRlLevel2;//二级菜单的容器
private RelativeLayout mRlLevel3;//三级菜单的容器
private ImageView mIvMenu;
private boolean isLevel1Display = true;//一级菜单是否显示的标记
private boolean isLevel2Display = true;//二级菜单是否显示的标记
private boolean isLevel3Display = true;//三级菜单是否显示的标记
private int mAnimationCount;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mRlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);
mRlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);
mRlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);
mIvHome = (ImageView) findViewById(R.id.level1_iv_home);
mIvMenu = (ImageView) findViewById(R.id.leve2_iv_menu);
//设置点击事件
mIvHome.setOnClickListener(this);
mIvMenu.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v == mIvHome) {
clickLevel1Home();
}else if (v == mIvMenu){
clickLevel2Menu();
}
}
private void clickLevel2Menu() {
if (mAnimationCount > 0){
return;
}
if (isLevel3Display){
hideLevel(mRlLevel3, 0);
isLevel3Display = false;
return;
}
if (!isLevel3Display){
showLevel(mRlLevel3, 0);
isLevel3Display = true;
return;
}
}
private void clickLevel1Home() {
if (mAnimationCount > 0){
return;
}
//点击home按钮，二级菜单和三级菜单都显示的情况下，二级菜单和三级菜单隐藏
if (isLevel2Display && isLevel3Display) {
//隐藏二级菜单
hideLevel(mRlLevel2, 100);
//隐藏三级菜单
hideLevel(mRlLevel3, 0);
//状态改变
isLevel2Display = false;
isLevel3Display = false;
return;
}
//点击home按钮，二级菜单和三级菜单都不显示的情况下，显示二级菜单
if (!isLevel2Display && !isLevel3Display) {
showLevel(mRlLevel2, 0);
//状态改变
isLevel2Display = true;
return;
}
//点击home按钮，二级菜单显示三级菜单不显示的情况下，隐藏二级菜单
if (isLevel2Display && !isLevel3Display) {
hideLevel(mRlLevel2, 0);
isLevel2Display = false;
return;
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU){
//点击menu按钮
clickHardwareMenu();
//消费menu点击事件
return true;
}
return super.onKeyUp(keyCode, event);
}
private void clickHardwareMenu() {
//如果三个菜单都可见，隐藏三个菜单
if (isLevel1Display && isLevel2Display && isLevel3Display){
hideLevel(mRlLevel3, 0);
hideLevel(mRlLevel2, 100);
hideLevel(mRlLevel1, 200);
isLevel1Display = false;
isLevel2Display = false;
isLevel3Display = false;
return;
}
//如果三个菜单不可见，显示三个菜单
if (!isLevel1Display && !isLevel2Display && !isLevel3Display){
showLevel(mRlLevel1, 0);
showLevel(mRlLevel2, 100);
showLevel(mRlLevel3, 200);
isLevel1Display = true;
isLevel2Display = true;
isLevel3Display = true;
return;
}
//如果三级菜单不可见，隐藏一二级菜单
if (!isLevel3Display && isLevel1Display && isLevel2Display){
hideLevel(mRlLevel1, 0);
hideLevel(mRlLevel2, 100);
isLevel1Display = false;
isLevel2Display = false;
return;
}
//如果二三级菜单不可见，隐藏一级菜单
if (!isLevel3Display && isLevel1Display && !isLevel2Display){
hideLevel(mRlLevel1, 0);
isLevel1Display = false;
return;
}
}
/**
* 隐藏菜单
*
* @param container
*/
private void hideLevel(RelativeLayout container, long startOffset) {
//container.setVisibility(View.GONE);
int count = container.getChildCount();
for (int i = 0; i < count; i++){
container.getChildAt(i).setEnabled(false);
}
RotateAnimation animation = new RotateAnimation(0f, -180f, RotateAnimation
.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
animation.setDuration(400);
animation.setFillAfter(true);
animation.setStartOffset(startOffset);//设置动画延迟
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mAnimationCount++;
}
@Override
public void onAnimationEnd(Animation animation) {
mAnimationCount--;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
container.startAnimation(animation);
}
/**
* 显示菜单
* @param container
* @param startOffset
*/
private void showLevel(RelativeLayout container, long startOffset) {
//container.setVisibility(View.VISIBLE);
int count = container.getChildCount();
for (int i = 0; i < count; i++){
container.getChildAt(i).setEnabled(true);
}
RotateAnimation animation = new RotateAnimation(-180f, 0f, RotateAnimation
.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
animation.setDuration(600);
animation.setFillAfter(true);
animation.setStartOffset(startOffset);//设置动画延迟
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mAnimationCount++;
}
@Override
public void onAnimationEnd(Animation animation) {
mAnimationCount--;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
container.startAnimation(animation);
}
}
项目链接：https://github.com/ChenDongWei/Android/tree/master/archedmenu
