Android high imitation Youku disc rotation menu implementation

At present, users have higher and higher requirements on the uidesign of Android applications.,Therefore, it is necessary to master some novel designs.

For example, the traditional menu can no longer meet the user's needs. The implementation of the disk rotation menu in Youku is excellent. Here I provide my ideas and implementation for your reference only.

This menu is divided into three levels of navigation menus inside and outside. You can turn off the three levels of menus from the external menu, or you can turn them on in reverse order, with the animation effect of rotating the disc.

First, check the effect:

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? It is actually an illusion that the image is placed in front of the image, 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;

Import android. OS. bundle; import android. app. activity; import android. view. menu; 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 Boolean islevel2show = T Rue; 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. setonclicklistener (New onclic Klistener () {@ 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:

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 high imitation Youku third-level navigation disc rotating menu is completed. In the future, we can fully learn from these excellent UI design, and even make a better UI based on new requirements.

Source code

Http://download.csdn.net/detail/t12x3456/4518220