Animation main menu for Android

At present, users have higher and higher requirements on the UI design of Android applications. Therefore, it is necessary to master some novel designs. For example, the traditional menus cannot meet users' requirements. The disk rotation menu is better implemented. The menu is divided into three layers of navigation menu. you can turn off the three-tier menu from the external to the external, or open it in reverse, with the animated effect of the disc rotation. First, you can see the effect:

Source code download: http://download.csdn.net/detail/weidi1989/4588807

The code and explanation are as follows:
1. Menu layout file:
We can see that there are three major ralativelayout layers, that is, the three layers we can see. But how is the image skew achieved? In fact, it is an illusion that the image is placed in the front, and the image inside is skewed.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <RelativeLayout        android:layout_width="100dip"        android:layout_height="50dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageButton            android:id="@+id/home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout>    <RelativeLayout        android:layout_width="180dip"        android:layout_height="90dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:id="@+id/level2"        android:background="@drawable/level2" >        <ImageButton            android:id="@+id/search"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_margin="10dip"            android:background="@drawable/icon_search" />        <ImageButton            android:id="@+id/menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/icon_menu" />        <ImageButton            android:id="@+id/myyouku"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_margin="10dip"            android:background="@drawable/icon_myyouku" />    </RelativeLayout>    <RelativeLayout        android:layout_width="280dip"        android:layout_height="140dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:id="@+id/level3"        android:background="@drawable/level3" >        <ImageButton            android:id="@+id/c1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/channel1" />        <ImageButton            android:id="@+id/c2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c1"            android:layout_marginBottom="12dip"            android:layout_marginLeft="28dip"            android:background="@drawable/channel2" />        <ImageButton            android:id="@+id/c3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c2"            android:layout_marginBottom="6dip"            android:layout_marginLeft="8dip"            android:layout_toRightOf="@id/c2"            android:background="@drawable/channel3" />        <ImageButton            android:id="@+id/c4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/channel4" />                        <ImageButton            android:id="@+id/c5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@+id/c6"            android:layout_marginBottom="6dip"            android:layout_marginRight="8dip"            android:layout_toLeftOf="@+id/c6"            android:background="@drawable/channel5" />                        <ImageButton            android:id="@+id/c6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@+id/c7"            android:layout_marginBottom="12dip"            android:layout_marginRight="28dip"            android:layout_alignParentRight="true"            android:background="@drawable/channel6" />                                <ImageButton            android:id="@+id/c7"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginRight="12dip"            android:layout_alignParentRight="true"            android:background="@drawable/channel7" />    </RelativeLayout></RelativeLayout>

2. mainactivity:

Package CN. OCE. youku; import CN. itcast. youku. r; import android. OS. bundle; import android. app. activity; import android. view. view; import android. view. view. onclicklistener; import android. widget. imagebutton; import android. widget. relativelayout; public class mainactivity extends activity {private imagebutton home; private imagebutton menu; private relativelayout level2; private relativelayout level3; private boo Lean islevel2show = true; private Boolean islevel3show = true; @ overridepublic void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. activity_main); home = (imagebutton) findviewbyid (R. id. home); menu = (imagebutton) findviewbyid (R. id. menu); level2 = (relativelayout) findviewbyid (R. id. level2); level3 = (relativelayout) findviewbyid (R. id. level3); menu. setoncli Cklistener (New onclicklistener () {@ overridepublic void onclick (view v) {If (islevel3show) {// hide Level 3 navigation menu myanimation. startanimationout (level3, 500, 0);} else {// display Level 3 navigation menu myanimation. startanimationin (level3, 500);} islevel3show =! Islevel3show;}); home. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {If (! Islevel2show) {// display Level 2 navigation menu myanimation. startanimationin (level2, 500);} else {If (islevel3show) {// hide Level 3 navigation menu myanimation. startanimationout (level3, 500, 0); // hide Level 2 navigation menu myanimation. startanimationout (level2, 500,500); islevel3show =! Islevel3show;} else {// hide Level 2 navigation menu myanimation. startanimationout (level2, 500, 0) ;}} islevel2show =! Islevel2show ;}});}}

3. Custom Animation class myanimation:

Package CN. OCE. youku; import android. view. view; import android. view. viewgroup; import android. view. animation. animation; import android. view. animation. animation. animationlistener; import android. view. animation. rotateanimation; public class myanimation {// enter the animation public static void startanimationin (viewgroup, int duration) {for (INT I = 0; I <viewgroup. getchildcount (); I ++) {viewgroup. getchildat (I ). setvisibility (view. visible); // sets display viewgroup. getchildat (I ). setfocusable (true); // obtain the focus viewgroup. getchildat (I ). setclickable (true); // you can click} animation;/*** rotation animation * rotateanimation (fromdegrees, todegrees, effectxtype, effectxvalue, effectytype, and effectyvalue) * fromdegrees start Rotation Angle * todegrees rotation to angle * pivotxtype X axis reference * pivotxvalue X axis rotation reference point * pivotytype Y Axis reference object * pivotyvalue Y axis rotation reference point */animation = new rotateanimation (-180, 0, animation. relative_to_self, 0.5f, animation. relative_to_self, 1.0f); animation. setfillafter (true); // stay at the animation end position of the animation. setduration (duration); viewgroup. startanimation (animation);} // public static void startanimationout (final viewgroup, int duration, int startoffset) {animation; animation = new rotateanimation (0,-180, animation. relative_to_self, 0.5f, animation. relative_to_self, 1.0f); animation. setfillafter (true); // stay at the animation end position of the animation. setduration (duration); animation. setstartoffset (startoffset); animation. setanimationlistener (New animationlistener () {@ overridepublic void onanimationstart (animation) {// todo auto-generated method stub} @ overridepublic void Merge (animation) {// todo auto-generated method stub} @ overridepublic void onanimationend (animation) {for (INT I = 0; I <viewgroup. getchildcount (); I ++) {viewgroup. getchildat (I ). setvisibility (view. gone); // set to display viewgroup. getchildat (I ). setfocusable (false); // obtain the focus viewgroup. getchildat (I ). setclickable (false); // click }}); viewgroup. startanimation (animation );}}

In this way, a three-level navigation disc rotation menu is complete, and you can fully learn from these excellent uidesigns in the future, and even make a better UI based on new requirements.