Android--The simplest rotating menu in history to achieve results

Reprint Please specify source: http://blog.csdn.net/l1028386804/article/details/48048323

Because of the physical reasons, the previous few days did not update the blog, then, today we come together to achieve a very cool rotation menu effect bar. In many apps, it is not difficult to find that the menu effect of the design of the call a cool Ah, one of the design is to design the menu to rotate the effect. OK, so how is this cool menu effect implemented? Below, let's get this cool menu effect together.

First, the principle

The usual, or the first to nag at the principle level of things.

The implementation of this example is simple, using the relative layout of Android in the interface to implement a nested three-layer prototype menu, a first-level menu in the most inner layer, the level two menu, and the level three menu at the outermost.

1, a first-class menu is always displayed;

2, click the first menu, if the menu is all displayed, then rotate disappears level three menu, then rotate disappears two level menu, if only show two level menu, the rotation disappears two level menu, if there is no menu display, then rotate show two level menu;

3, click on the level two menu, if the three level menu display, the rotation disappears three level menu, if the level three menu does not display, the rotation shows the level three menu.

The principle of long-winded, is not very simple? Below, let's come together to achieve these effects.

II. realization of 1, Custom animation class Myanimation

There are two main animation methods in this class, one is into the animation method Startanimationin, and the other is the animation method startanimationout

1) into the animation method

This animation effect is achieved with a rotation effect, from 180 to 0

The specific implementation code is as follows:

Into the animation effect public static void Startanimationin (ViewGroup viewgroup, int duration) {for (int i = 0; i < Viewgroup.getchildcoun T (); i++) {View view = Viewgroup.getchildat (i); view.setvisibility (view.visible); view.setclickable (true); View.setfocusable (TRUE);} Animation Animation = new Rotateanimation ( -180, 0, Animation.relative_to_self, 0.5f, Animation.relative_to_self, 1.0f); Animation.setfillafter (True); animation.setduration (duration); viewgroup.startanimation (animation);}

2) Out Animation method

This method is basically the same as the animation effect, the only difference is that the rotation is from 0 to 180, and at the end of the rotation to set the control's display effect

The specific implementation code is as follows:

Animation effect public static void Startanimationout (final viewgroup 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); animation.setduration (duration); Animation.setstartoffset (Startoffset); Animation.setanimationlistener (New Animation.animationlistener () {@Overridepublic void Onanimationstart (animation Animation) {} @Overridepublic void Onanimationrepeat (animation animation) {} @Overridepublic void Onanimationend ( Animation Animation) {//TODO auto-generated method stubfor (int i = 0; i < Viewgroup.getchildcount (); i++) {View view = Viewgroup.getchildat (i); view.setvisibility (View.gone); view.setclickable (false); view.setfocusable (false);} Viewgroup.setvisibility (View.gone);}}); Viewgroup.startanimation (animation);}

3) The complete code is as follows:

Package Com.lyz.youku_menu.activity;import Android.view.view;import Android.view.viewgroup;import Android.view.animation.animation;import android.view.animation.rotateanimation;/** * Custom animation effects * @author Liuyazhuang * * /public class Myanimation {//Into animation effect public static void Startanimationin (ViewGroup viewgroup, int duration) {for (int i = 0; i < Viewgroup.getchildcount (); i++) {View view = Viewgroup.getchildat (i); view.setvisibility (view.visible); view.setclickable (true); View.setfocusable (TRUE);} Animation Animation = new Rotateanimation ( -180, 0, Animation.relative_to_self, 0.5f, Animation.relative_to_self, 1.0f); Animation.setfillafter (True); animation.setduration (duration); viewgroup.startanimation (animation);} Animation effect public static void Startanimationout (final viewgroup 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); animation.setduration (duration); animatioN.setstartoffset (Startoffset); Animation.setanimationlistener (new Animation.animationlistener () {@Overridepublic void Onanimationstart (Animation Animation) {} @Overridepublic void Onanimationrepeat (Animation Animation) {}@ overridepublic void Onanimationend (Animation Animation) {//TODO auto-generated method stubfor (int i = 0; i < ViewGroup . Getchildcount (); i++) {View view = Viewgroup.getchildat (i); view.setvisibility (View.gone); view.setclickable (false); view.setfocusable (false);} Viewgroup.setvisibility (View.gone);}}); Viewgroup.startanimation (animation);}}

2, Mainactivity

All implementations are implemented in Mainactivity, where first we find all the controls on the interface and then set two Boolean identifiers to indicate whether the level two and level three menus are displayed, and then set the click events for the Home and menu two menus. Complete the animation of the menu in the Click event.

The specific implementation code is as follows:

Package Com.lyz.youku_menu.activity;import Android.app.activity;import Android.os.bundle;import android.view.Menu; Import Android.view.view;import android.widget.imagebutton;import android.widget.relativelayout;/** * Main Page implementation * @author Liuyazhuang * */public class Mainactivity extends Activity {private ImageButton home;private ImageButton search;private Im Agebutton menu;private ImageButton myyouku;private ImageButton c1;private ImageButton c2;private ImageButton c3;private ImageButton c4;private ImageButton c7;private ImageButton c6;private ImageButton c5;private relativelayout level1; Private Relativelayout level2;private relativelayout level3;private Boolean islevel2show = True;private Boolean Islevel3show = true; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); home = (ImageButton) Findviewbyid (r.id.home); search = (ImageButton) Findviewbyid (r.id.search); menu = (ImageButton) Findviewbyid (r.id.menu); MyyoukU = (ImageButton) Findviewbyid (r.id.myyouku), C1 = (ImageButton) Findviewbyid (R.ID.C1); c2 = (ImageButton) Findviewbyid ( R.ID.C2); c3 = (ImageButton) Findviewbyid (r.id.c3); c4 = (ImageButton) Findviewbyid (r.id.c4); c7 = (ImageButton) Findviewbyid (R.ID.C7); c6 = (ImageButton) Findviewbyid (R.ID.C6); c5 = (ImageButton) Findviewbyid (r.id.c5); level1 = ( Relativelayout) Findviewbyid (r.id.level1); Level2 = (relativelayout) Findviewbyid (r.id.level2); level3 = ( Relativelayout) Findviewbyid (R.ID.LEVEL3) Menu.setonclicklistener (new View.onclicklistener () {@Overridepublic void OnClick (View v) {//TODO auto-generated method stubif (islevel3show) {myanimation.startanimationout (LEVEL3, 500, 0);} Else{myanimation.startanimationin (LEVEL3, 500);} Islevel3show =!islevel3show;}}); Home.setonclicklistener (New View.onclicklistener () {@Overridepublic void OnClick (View v) {//TODO auto-generated method STUBIF (!islevel2show) {Myanimation.startanimationin (Level2, 500);} Else{if (islevel3show) {myanimation.startanimationout (level3, 500, 0); Myanimation.startanimationout (Level2, $); islevel3show =!islevel3show;} Else{myanimation.startanimationout (Level2, 500, 0);}} Islevel2show =!islevel2show;}});} @Overridepublic boolean Oncreateoptionsmenu (Menu menu) {//Inflate the menu; This adds items to the action bar if it is PR Esent.getmenuinflater (). Inflate (R.menu.main, menu); return true;}}

3. Interface Layout Activity_main.xml

The specific implementation code is as follows:

<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 "Android:paddi ngbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: Context= ". Mainactivity "> <relativelayout android:id=" @+id/level1 "android:layout_width=" 100dip "Andro        id: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:id=" @+id/level2 "android:layout_width=" 180d IP "android:layout_height=" 90dip "android:layout_alignparentbottom=" true "Android:layout_centerhorizo            Ntal= "true" android:background= "@drawable/level2" > <imagebutton android:id= "@+id/search" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_al            Ignparentbottom= "true" android:layout_marginbottom= "6dip" android:layout_marginleft= "12dip"            android:background= "@drawable/ic_action_search"/> <imagebutton android:id= "@+id/menu" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_centerhor Izontal= "true" android:layout_margin= "6dip" android:background= "@drawable/icon_menu"/> &L           T;imagebutton Android:id= "@+id/myyouku" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentbottom= "true" android:layout_alignparentright= "true" Android:la Yout_marginbottom= "6dip" android:layout_marginright= "12dip" android:background= "@drawable/icon_myyou Ku "/> </RelativeLayout> <relativelayout android:id=" @+id/level3 "Android:layout_width=" 28 0dip "android:layout_height=" 140dip "android:layout_alignparentbottom=" true "Android:layout_centerhor            Izontal= "true" android:background= "@drawable/level3" > <imagebutton android:id= "@+id/c1" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_ali            Gnparentbottom= "true" android:layout_marginbottom= "6dip" android:layout_marginleft= "12dip" Android:background= "@dRawable/channel1 "/> <imagebutton android:id=" @+id/c2 "android:layout_width=" WR Ap_content "android:layout_height=" wrap_content "android:layout_above=" @id/c1 "Android:la Yout_marginbottom= "12dip" android:layout_marginleft= "30dip" 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_torightof= "@i D/c2 "android:layout_marginbottom=" 12dip "android:layout_marginleft=" 8dip "android:backgr ound= "@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/c7" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentbottom= "true" android:layout_alignparentright= "true" Android:layout_                    Marginbottom= "6dip" android:layout_marginright= "12dip" android:background= "@drawable/channel7"/>            <imagebutton android:id= "@+id/c6" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_above= "@id/c7" Android:layout_alignparentrigh T= "true" android:layout_marginbottom= "12dip" android:layout_marginright= "30dip" android:b ackground= "@drawable/channel6"/> <imagebutton android:id= "@+id/c5" Android : Layout_width= "Wrap_contEnt "android:layout_height=" wrap_content "android:layout_above=" @id/c6 "android:layout_to leftof= "@id/c6" android:layout_marginbottom= "12dip" android:layout_marginright= "8dip" and roid:background= "@drawable/channel5"/> </RelativeLayout></RelativeLayout>

4, Androidmanifest.xml

This file does not add anything, it is automatically generated by Android file content.

Specific as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><manifest xmlns:android= "http://schemas.android.com/apk/res/ Android "    package=" com.lyz.youku_menu.activity "    android:versioncode=" 1 "    android:versionname=" 1.0 " >    <uses-sdk        android:minsdkversion= "8"        android:targetsdkversion= "/>    <application"        android:allowbackup= "true"        android:icon= "@drawable/ic_launcher"        android:label= "@string/app_name"        android:theme= "@style/apptheme" >        <activity            android:name= "com.lyz.youku_ Menu.activity.MainActivity "            android:label=" @string/app_name ">            <intent-filter>                < Action android:name= "Android.intent.action.MAIN"/>                <category android:name= " Android.intent.category.LAUNCHER "/>            </intent-filter>        </activity>    </ Application></manifest>

Third, the Operation effect

Four, warm tips

You can download the full rotation menu to link http://download.csdn.net/detail/l1028386804/9057109 to implement the sample source code

In this example, for the sake of the aspect, I write some text directly in the layout file and the related class, Everyone in the real project to write these words in the String.xml file, in the external reference to these resources, remember, this is the most basic development knowledge and specifications as an Android programmer, I am here just to facilitate directly written in the class and layout files.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android--The simplest rotating menu in history to achieve results