android基础笔记——自定义控件和视图：优酷菜单:RotateAnimation

实现效果：



一、实现布局：
运用相对布局，由内向外，依次编写代码实现。
注意事项：



1、由内到外，每层菜单都处于一个 RelativeLayout 控件中，这样便于其他控件的定位；
2、红框中的各个图标，可按照父元素进行定位；
3、除了红框中的各个图标之外，就只剩下最外层菜单的4个图标，左右各两个，左边的两个图标应按照左下角的图标，由下向上，依次定位；右边两个同样按照右下角的图标，由下向上定位。
详细代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.youkumenu.MainActivity"
tools:ignore="MergeRootFrame" >

<RelativeLayout
android:id="@+id/level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level1" >

<ImageView
android:id="@+id/icon_home"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:background="@drawable/icon_home" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/level2"
android:layout_width="180dp"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level2" >

<ImageView
android:id="@+id/icon_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:background="@drawable/icon_search" />

<ImageView
android:id="@+id/icon_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:background="@drawable/icon_menu" />

<ImageView
android:id="@+id/icon_myyouku"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:background="@drawable/icon_myyouku" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/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_alignParentLeft="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/channel1" />

<ImageView
android:id="@+id/channel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel1"
android:layout_alignLeft="@id/channel1"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:background="@drawable/channel2" />

<ImageView
android:id="@+id/channel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel2"
android:layout_alignLeft="@id/channel2"
android:layout_marginBottom="6dp"
android:layout_marginLeft="35dp"
android:background="@drawable/channel3" />

<ImageView
android:id="@+id/channel4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:background="@drawable/channel4" />

<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_marginBottom="10dp"
android:layout_marginRight="13dp"
android:background="@drawable/channel7" />

<ImageView
android:id="@+id/channel6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel7"
android:layout_alignRight="@id/channel7"
android:layout_marginBottom="10dp"
android:layout_marginRight="15dp"
android:background="@drawable/channel6" />

<ImageView
android:id="@+id/channel5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel6"
android:layout_alignRight="@id/channel6"
android:layout_marginBottom="5dp"
android:layout_marginRight="35dp"
android:background="@drawable/channel5" />
</RelativeLayout>

</RelativeLayout>

二、实现功能
通过 RotateAnimation 类实现菜单的旋转。

// 设置旋转的开始位置和结束位置；以及旋转的圆心位置。
RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());
// 设置旋转的时间
animation.setDuration(500);
// 如果不设置该属性，系统默认在View完成旋转之后，会回到最初的状态。设置为true之后，就可以保持旋转之后的状态。
animation.setFillAfter(true);
// 设置延时
animation.setStartOffset(offset);
// 开始旋转
view.startAnimation(animation);

通过下图，进行旋转的开始位置以及圆心位置的设置。



详细代码：
MainActivity 类：

package com.example.youkumenu;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.os.Build;

public class MainActivity extends ActionBarActivity implements OnClickListener {
private boolean isLevel1show = true;
private boolean islevel3show = true;
private boolean islevel2show = true;
private ImageView icon_home;
private ImageView icon_menu;
private RelativeLayout level1;
private RelativeLayout level2;
private RelativeLayout level3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
icon_home = (ImageView) findViewById(R.id.icon_home);
icon_menu = (ImageView) findViewById(R.id.icon_menu);
level1 = (RelativeLayout) findViewById(R.id.level1);
level2 = (RelativeLayout) findViewById(R.id.level2);
level3 = (RelativeLayout) findViewById(R.id.level3);

icon_home.setOnClickListener(this);
icon_menu.setOnClickListener(this);

}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.icon_home:
// 2级菜单显示，点击home键之后，隐藏2、3级菜单。
if (islevel2show) {
MyUtils.startAnimOut(level2);
islevel2show = !islevel2show;
if (islevel3show) {
MyUtils.startAnimOut(level3, 100);
islevel3show = !islevel3show;
}
} else {
MyUtils.startAnimIn(level2);
islevel2show = !islevel2show;
}

break;
case R.id.icon_menu:
if (islevel3show) {
MyUtils.startAnimOut(level3);
} else {
MyUtils.startAnimIn(level3);
}
islevel3show = !islevel3show;
break;

}
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if (keyCode == KeyEvent.KEYCODE_MENU) {
changeLevel1State();
}
return super.onKeyDown(keyCode, event);
}

private void changeLevel1State() {
// TODO Auto-generated method stub
if (isLevel1show) {
MyUtils.startAnimOut(level1);
isLevel1show = !isLevel1show;
if (islevel2show) {
MyUtils.startAnimOut(level2, 100);
islevel2show = !islevel2show;
if (islevel3show) {
MyUtils.startAnimOut(level3, 200);
islevel3show = !islevel3show;
}
}
} else {
MyUtils.startAnimIn(level1);
isLevel1show = !isLevel1show;
}
}
}

MyUtils 类：

package com.example.youkumenu;

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

public class MyUtils {

public static void startAnimOut(RelativeLayout view) {
// TODO Auto-generated method stub
startAnimOut(view, 0);
}

public static void startAnimOut(RelativeLayout view, long offset) {
// 设置旋转的开始位置和结束位置；以及旋转的圆心位置。
RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());
// 设置旋转的时间
animation.setDuration(500);
// 如果不设置该属性，系统默认在View完成旋转之后，会回到最初的状态。设置为true之后，就可以保持旋转之后的状态。
animation.setFillAfter(true);
// 设置延时
animation.setStartOffset(offset);
// 开始旋转
view.startAnimation(animation);
}

public static void startAnimIn(RelativeLayout view) {
// TODO Auto-generated method stub
// 设置旋转的开始位置和结束位置；以及旋转的圆心位置。
RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());
// 设置旋转的时间
animation.setDuration(500);
// 如果不设置该属性，系统默认在View完成旋转之后，会回到最初的状态。设置为true之后，就可以保持旋转之后的状态。
animation.setFillAfter(true);
view.startAnimation(animation);

}

}