Android custom control's imitation cool menu _android

Last year's Youku HD edition had such a menu as the following figure:

After the application is opened, a three-arc three-level menu is first click the Entity key menu, the three menus rotate and exit, then click the Entity key menu, the first level of menus will rotate into, click Level menu, Level two menu to rotate into, click Level Two menu, menu, Level Three, rotate into, Click again on the two level menu of the rotation key, three level menu will rotate exit, then click the first Level menu, two menu exit, and finally click Entity Menu key, the first-level menus exit.

In general, this functionality is implemented:
(1) Click the Entity menu key, if the interface has a menu display, no matter how many, all in turn exit, if the interface does not have a menu display, then show the first level menu.
(2) Click on the first level menu of the home button, if the interface is only one level menu, then show Level two menu, otherwise let the menu except the first level of the menu are all in turn exit.
(3) Click Level Two menu, if the level three menu has been shown, then let it rotate exit, if the level three menu does not show then let it rotate into.

Well, today we mainly achieve the above results.

First look at the layout file

<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.example.customwidget.MainActivity" > <relativelayout android:id= "@+id/menu_level1" Android:layout_ Width= "100DP" android:layout_height= "50DP" android:layout_alignparentbottom= "true" Android:layout_
   Centerhorizontal= "true" android:background= "@drawable/level1" > <imagebutton android:id= "@+id/level1_home" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true" a Ndroid:layout_marginbottom= "10DP" android:background= "@drawable/icon_home" android:onclick= "Myclick"/> </Re lativelayout> <relativelayout android:id= "@+id/menu_level2" android:layout_width= "200DP" Android:layout_heig ht= "100DP" android:layout_alignparentbottom= "true" Android:layout_centerhOrizontal= "true" android:background= "@drawable/level2" > <imagebutton android:layout_width= "wrap_content"
   android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_marginbottom= "10DP" android:layout_marginleft= "15DP" android:background= "@drawable/icon_search"/> <imagebutton android:id= "@+i D/level2_menu "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_centerHori" Zontal= "true" android:layout_margintop= "7DP" android:background= "@drawable/icon_menu" android:onclick= "MyClick"/ > <imagebutton android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_a Lignparentbottom= "true" android:layout_alignparentright= "true" android:layout_marginbottom= "10DP" Android:layout_ marginright= "15DP" android:background= "@drawable/icon_myyouku"/> </RelativeLayout> <relativelayout an Droid:id= "@+id/menu_leveL3 "Android:layout_width=" 320DP "android:layout_height=" 162DP "android:layout_alignparentbottom=" true "Android:lay Out_centerhorizontal= "true" android:background= "@drawable/level3" > <imagebutton android:id= "@+id/level3_cha" Nnel1 "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "android:layout_alignparentbottom=" "True" android:layout_marginbottom= "10DP" android:layout_marginleft= "12DP" android:background= "@drawable/channel1 "/> <imagebutton android:id=" @+id/level3_channel2 "android:layout_width=" Wrap_content "Android:layout_h" eight= "Wrap_content" android:layout_above= "@id/level3_channel1" android:layout_marginbottom= "17DP" android:layout _marginleft= " -5DP" android:layout_torightof= "@id/level3_channel1" android:background= "@drawable/channel2"/> & Lt;imagebutton android:layout_width= "wrap_content" android:layout_height= wrap_content "android:layout_above=" @id /level3_channel2 "andRoid:layout_marginbottom= "15DP" android:layout_marginleft= "13DP" android:layout_torightof= "@id/level3_channel2" a ndroid:background= "@drawable/channel3"/> <imagebutton android:layout_width= "Wrap_content" Android:layout_h eight= "Wrap_content" android:layout_centerhorizontal= "true" android:layout_margintop= 10dp "android:background=" @
   Drawable/channel4 "/> <imagebutton android:id= @+id/level3_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=" 12DP "android:background=" @drawable/channel7 "/> <imagebutton android:id=" @+id/level3_channel6 "android:layout_width=" Wrap_content "Android:layout_h" eight= "Wrap_content" android:layout_above= "@id/level3_channel7" android:layout_marginbottom= "17DP" android:layout _marginright= " -5DP" Android:layout_toleftof= "@id/level3_channel7" android:background= "@drawable/channel6"/> <imagebutton android:lay Out_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/level3_channel6" Android: Layout_marginbottom= "15DP" android:layout_marginright= "13DP" android:layout_toleftof= "@id/level3_channel6" Androi
 d:background= "@drawable/channel5"/> </RelativeLayout> </RelativeLayout>

Here is a relative layout nested in three relative layout, nested first relative layout is responsible for displaying a level menu, nested second relative layout is responsible for displaying level two menu, nested third relative layout is responsible for displaying level three menu. Three different levels of the menu background are arcs. We have different sizes for three-level menus by specifying a specific width and height.

The effect is as follows:

And look at Mainactivity.java.

/** * Imitation Cool menu * May 19, 2015/public class Mainactivity extends activity {//Get different levels of menu private relativelayout lv1;
 Private Relativelayout Lv2;
 Private Relativelayout Lv3;
 Private Animation Animation;
 All Levels menu is displayed, default all display private Boolean ISDISPLAYLV1 = true;
 Private Boolean IsDisplaylv2 = true;
 Private Boolean IsDisplaylv3 = true;

 The animation is executing, and the default animation does not execute private boolean isanimationrunning = false;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (R.layout.activity_main);
  LV1 = (relativelayout) This.findviewbyid (R.ID.MENU_LEVEL1);
  Lv2 = (relativelayout) This.findviewbyid (R.ID.MENU_LEVEL2);
 Lv3 = (relativelayout) This.findviewbyid (R.ID.MENU_LEVEL3); @Override public boolean onKeyDown (int keycode, keyevent event) {//If the animation is executing, do not process this event if (isanimationrunning) r
  Eturn Super.onkeydown (KeyCode, event); If you click on the menu key if (keycode = = Keyevent.keycode_menu) {//If the first level menu has been displayed, determine if the level two menu displays if (isdispLAYLV1) {//Set animation start delay time int startoffset = 0; If the level two menu is already displayed, determine if level three menu is displayed, and then exit level two menu if (ISDISPLAYLV2) {if (IsDisplaylv3) {//If level three menu already displayed, perform exit animation Exitanim
      ation (Lv3, Startoffset);
      Level three menu exit animation after the completion of the animation start time delayed 500ms Startoffset + = 500;
     IsDisplaylv3 =!isdisplaylv3;
     }//Level Two menu exit, at this time startoffset=500, that is, animation start time delay 500ms exitanimation (LV2, Startoffset);
     Second-level menu exit animation after the completion of the animation start time delay of 500ms startoffset + = 500;
    IsDisplaylv2 =!isdisplaylv2;
   //First level menu exit, at this time startoffset=1000, namely animation start time delay 1000ms exitanimation (LV1, Startoffset);
   If the first level menu is not displayed, the first level menu enters} else {enteranimation (LV1);
   } isDisplaylv1 =!isdisplaylv1;
  return true;
 Return Super.onkeydown (KeyCode, event);
  The public void Myclick (View v) {//If the animation is executing, does not handle this event if (isanimationrunning) return; Switch (V.getid ()) {/** * When you click menu Two, if level three menu is already displayed, perform an exit animation, * Otherwise execute into the animation/Case R.id.level2_menu:if (ISDI
 Splaylv3) {exitanimation (Lv3, 0);  else {enteranimation (LV3);
   } IsDisplaylv3 =!isdisplaylv3;
  Break Case R.id.level1_home://If the level two menu has already been displayed, then determine if the level three menu displays if (ISDISPLAYLV2) {//By setting the animation start delay time, to achieve the animation in turn exit effect int Startoff
    set = 0;
     If the level three menu is also displayed, let them exit if (IsDisplaylv3) {exitanimation (Lv3, Startoffset) in turn;
     Startoffset = 700;
    IsDisplaylv3 =!isdisplaylv3;
    } exitanimation (Lv2, Startoffset);
    IsDisplaylv2 =!isdisplaylv2;
    If the level two menu is not displayed, let the level two menu show up} else {enteranimation (LV2);
   IsDisplaylv2 =!isdisplaylv2;
  } break; }/** * Exit animation * @param layout The layout file for animation @param startoffset animation startup delay time/public void exitanimation (relativel
  Ayout layout, long startoffset) {animation = Animationutils.loadanimation (this, r.anim.exit_menu);
  Animation.setfillafter (TRUE);
  Animation.setstartoffset (Startoffset);
  Animation.setanimationlistener (New Myanimationlistener ());
 Layout.startanimation (animation);
 /** * Enter animation * @param layout The layout file that executes the animation */public void enteranimation (Relativelayout layout) {animation = Animationutils.loadanimation (This, r.anim.enter_men
  u);
  Animation.setfillafter (TRUE);
  Animation.setanimationlistener (New Myanimationlistener ());
 Layout.startanimation (animation); /** * To determine if the animation is executing * @author Wang Song * * */Private class Myanimationlistener implements Animationlistener {//Animation start
  Execution @Override public void Onanimationstart (Animation Animation) {isanimationrunning = true;
  }//Animation execution end @Override public void Onanimationend (Animation Animation) {isanimationrunning = false;

 @Override public void Onanimationrepeat (Animation Animation) {}}}

The comments in the code have been written in detail, and there is no more to repeat here. Finally, let's show you two animated files:

Enter_menu.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shareinterpolator=" true ">
 <rotate
  android:duration=" 1000 "
  android: Fromdegrees= " -180"
  android:todegrees= "0"
  android:pivotx= "50%"
  android:pivoty= "100%"/>
</ Set>

Exit_menu.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shareinterpolator=" true ">
 <rotate
  android:duration=" 1000 "
  android: fromdegrees= "0"
  android:todegrees= " -180"
  android:pivotx= "50%"
  android:pivoty= "
100%"/> </set>

About the animation if you don't know how to look here: Android Basics Tween animation effects Android Basics frame animation effect

SOURCE Download: Http://xiazai.jb51.net/201606/yuanma/Androidyouku (jb51.net). rar

Original link: http://blog.csdn.net/u012702547/article/details/45842963

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.