Android Imitation cool Round menu learning notes sharing _android

First look at the effect:

The first is to analyze:

This menu can be divided into three menus:

1. First level menu (that is, the most inner circle that menu)

2. Level two menu (that is, the middle loop menu)

3. Level three menu (that is, the most outer ring menu)

First, you can use a relative layout for these three menus

The first level menu has only one button (that is, home), you can control the level two and three menus

The second level menu has three buttons (that is, menu), the middle button can control the level three menu

Level Three Menu has seven buttons

First write out the layout file and use three relative layouts (that is, each menu takes a relative layout)

<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.youkumenu.MainActivity" > <!--Level three menu--> <relativelayout android:id= "@+id/level3_rl" Android:layout_width= "220DP" android:layout_height= "110DP" android:layout_alignparentbottom= "true" android:l Ayout_centerhorizontal= "true" android:background= "@drawable/level3" > <imageview android:id= "@+id/cha" Nnel1 "android:layout_marginleft=" 5DP "android:layout_alignparentbottom=" true "android:layout_width=" WR
      Ap_content "android:layout_height=" wrap_content "android:src=" @drawable/channel1 "/> <imageview Android:id= "@+id/channel2" android:layout_marginbottom= "10DP" android:layout_marginleft= "25DP" Android: Layout_above= "@id/channel1" android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/channel2"/> <Image View android:layout_marginbottom= "1DP" android:layout_marginleft= "52DP" android:layout_above= "@id/channe L2 "Android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:src=" @drawable/chan
      Nel3 "/> <imageview android:layout_centerhorizontal=" true "android:layout_width=" Wrap_content " android:layout_height= "Wrap_content" android:src= "@drawable/channel4"/> <imageview android:id= "@+id/ Channel7 "android:layout_marginright=" 5DP "android:layout_alignparentright=" true "Android:layout_alignpa Rentbottom= "true" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:src=
      "@drawable/channel7"/> <imageview android:id= "@+id/channel6" android:layout_alignparentright= "true" Android:layout_marGinbottom= "10DP" android:layout_marginright= "25DP" android:layout_above= "@id/channel7" Android:layout_wi Dth= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/channel6"/> <ImageVie W android:layout_marginbottom= "1DP" android:layout_marginright= "52DP" android:layout_alignparentright= "t Rue "android:layout_above=" @id/channel6 "android:layout_width=" wrap_content "android:layout_height=" wrap _content "android:src=" @drawable/channel5 "/> </RelativeLayout> <!--level two menu--> <relativelayo UT android:id= "@+id/level2_rl" android:layout_width= "140DP" android:layout_height= "70DP" Android:layout_al Ignparentbottom= "true" android:layout_centerhorizontal= "true" android:background= "@drawable/level2" > <i Mageview android:layout_marginleft= "3DP" android:layout_alignparentbottom= "true" Android:layout_width= "W Rap_content "Android:layout_height= "Wrap_content" android:src= "@drawable/icon_search"/> <imageview android:id= "@+id/me Nu_iv "android:layout_centerhorizontal=" true "android:layout_width=" Wrap_content "android:layout_height= "Wrap_content" android:src= "@drawable/icon_menu"/> <imageview android:id= "@+id/myyouku_iv" and
      roid:layout_marginright= "3DP" android:layout_alignparentbottom= "true" android:layout_alignparentright= "true" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/icon_myyo Uku "/> </RelativeLayout> <!--level menu--> <relativelayout android:layout_width=" 80DP "Andro id:layout_height= "40DP" android:layout_alignparentbottom= "true" Android:layout_centerhorizontal= "true" Android : background= "@drawable/level1" > <imageview android:id= "@+id/home_iv" android:layout_centerinparent = "true" Android:laYout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/icon_home"/> </

 Relativelayout> </RelativeLayout>

Well, the layout is written well, you can see this effect, but now only static, no logic.

Here's how to analyze the logic, first look at home (that is, the first level of the menu in the middle of the button)

Click Home, there will be three kinds of circumstances, the following considerations:

conditions 1. Two-level, three-level menus are displayed, the Tertiary menu is hidden away

2. When the tertiary menu is not displayed, the level two menu is displayed

conditions 3. When the second level menu is displayed and the level three menu is not displayed, the level two menu is hidden

Of course we know, to know that the menu is hidden or displayed, only need to set a mark bit

How to hide or display the menu, of course, using animation, you can use motion tween and

Property animation, I use motion tweens here

The following is the logic of the analysis, first look at menu (that is, the two-level menu in the middle of that button)

Click menu, there will be three kinds of circumstances, the following considerations:

conditions 1. Level three display, the level three menu is hidden

conditions 2. Level three hides, the level three menu is displayed

This is relatively simple, in two cases.

The public class Mainactivity extends activity implements onclicklistener{//Level menu of the home button private ImageView Home_iv;
  The menu button in the second level is private ImageView menu_iv;
  Used to determine the display status of level two menus, true to display, false to hidden private Boolean level2listplay = true;
  Used to determine the display status of level two menus, true to display, false to hidden private Boolean level3listplay = true;
  Two-level and three-level menu private relativelayout level2_rl,level3_rl;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
  Initview ();
    }//Initialize component private void Initview () {Home_iv = (ImageView) Findviewbyid (R.ID.HOME_IV);

    Home_iv.setonclicklistener (this);
    LEVEL2_RL = (relativelayout) Findviewbyid (R.ID.LEVEL2_RL);

    LEVEL3_RL = (relativelayout) Findviewbyid (R.ID.LEVEL3_RL);
    Menu_iv = (ImageView) Findviewbyid (R.ID.MENU_IV);
  Menu_iv.setonclicklistener (this); @Override public void OnClick (View v) {switch (V.getid ()) {case R.ID.HOME_IV://click HThe logical code of the ome button Clickhomeiv ();
    Break   Case R.id.menu_iv:clickmenuiv ();
    Click the menu button's logical code break in level two.
    Default:break; The logical code for the menu button in the Level two menu, private void Clickmenuiv () {//) {/////1. Three level display, the level three menu is hidden if (level3listplay)
      {Hidemenu (level3_rl,0);
      Level3listplay = false;
    Return
      When//2 level three is hidden, the level three menu displays the if (!level3listplay) {showmenu (LEVEL3_RL);
      Level3listplay = true;
    Return The logical code for the home button in the first menu is private void Clickhomeiv () {////1. Two, level three menus are displayed, and the Tertiary menu is hidden away if (level2list
      Play && Level3listplay) {//To hide the level two or three menu and change the Mark Hidemenu (level2_rl,300);
      Hidemenu (level3_rl,500);
      Level2listplay = false;
      Level3listplay = false;
    Return
      When the//2. Tertiary menu is not displayed, the level two menu is displayed if (!level2listplay &&!level3listplay) {showmenu (LEVEL2_RL);
      Level2listplay = true;
    Return When the//3 level two menu is displayed and the level three menu is not displayed, the level two menu is hiddenPossession if (Level2listplay &&!level3listplay) {hidemenu (level2_rl,0);
      Level2listplay = false;
    Return }/** * Display menu * @param View menu to display */private void ShowMenu (Relativelayout view) {//View.setvisibilit
    Y (view.visible); Rotary animation Rotateanimation animation = new Rotateanimation ( -180, 0, Animation.relative_to_self, 0.5f, ANIMATION.R
    Elative_to_self, 1.0f);   Animation.setduration (500); Set the duration of the animation animation.setfillafter (true);
  Animation stays at the end of the animation position view.startanimation (animation); /** * Hide Menu * @param view to hide the menu, startoffset animation delay Execution Time * * private void Hidemenu (Relativelayout View,long St
    Artoffset) {//View.setvisibility (View.gone);  /** * Rotating Animation * Rotateanimation (Fromdegrees, Todegrees, Pivotxtype, Pivotxvalue, Pivotytype, Pivotyvalue) * Fromdegrees Start Rotation angle * todegrees rotation End angle * pivotxtype X-axis reference (the x-axis scaling mode, which can be value for absolute, relative_to_self) * pi Votxvalue The reference point of the x-axis rotation (the scale value of the X-coordinate) * Pivotytype y-axis reference (telescopic mode of the y-axis, which can be absolute, relative_to_self) * Pivotyvalue y-Axis rotation point ((telescopic value of y-coordinate)) rotateanimation animation = new Rotateanimation (0, -180, animation.relative_to_self, 0.5f, animation.relative_t
    O_self, 1.0f);
    Animation.setduration (500); Animation.setfillafter (TRUE);   Animation stays at the end of the animation position animation.setstartoffset (Startoffset);
  Set the animation's deferred execution view.startanimation (animation);

 }
}

Writing here, you should almost see the effect, but the careful partner should find two bugs:

First: When you quickly click on the first Level menu Home button or Level two menu button, you will find a level two menu or three-level menu animation has not finished, and then perform a second animation, looks like shaking. (Reason: The animation is executed for a certain period of time, you click faster than the animation execution time)

Solution:

Listen to the animation, and when the animation begins to execute and end, listen to it, we should think of a mark to judge, but we know a mark can only judge two states, but there are two kinds of animation (display animation and hidden animation), a mark bit definitely not, you can use an int value to control

Used to record how many animations are executing
  private int annimationcount = 0;
  When listening to an animation
  Animation.setanimationlistener (new Animationlistener () {
      @Override public
      Void Onanimationstart (Animation Animation) {
//       Menu_iv.setonclicklistener (null);       home_iv.setonclicklistener (null);
        Annimationcount + +;
      }
      @Override public
      void Onanimationrepeat (Animation Animation) {

      }
      @Override public
      Void Onanimationend (Animation Animation) {
//       Menu_iv.setonclicklistener (mainactivity.this);       Home_iv.setonclicklistener (mainactivity.this);
        Annimationcount--;
      }
    When you click on it can be judged, as long as the Annimationcount value is greater than 0, indicating that there are animations in the execution
    if (Annimationcount > 0) {return
      ;
    }

Second: when the level two menu is hidden, you will be surprised to find that the level three menu is displayed when you click the menu button in level two (although it is not visible now). (Reason: tweened animation, there is no real change in component properties, and property animation is not the same, we have time to try the properties of animation to do)

Solution:

As long as the level two menu hidden, let the level two menu of all the option buttons are not point. Because the level two menu can have more than one button, get the parent container so that its child controls lose focus.

If you want to display a menu, set the corresponding control to have focus
    //Get several child controls
    int childcount = View.getchildcount () in the parent container;
    for (int i = 0; i < ChildCount i++) {
      view.getchildat (i) setenabled (true);
    

It's about the same here, you can try it.

Here's the complete code I wrote:

The public class Mainactivity extends activity implements onclicklistener{//Level menu of the home button private ImageView Home_iv;
  The menu button in the second level is private ImageView menu_iv;
  Used to determine the display status of level two menus, true to display, false to hidden private Boolean level2listplay = true;
  Used to determine the display status of level two menus, true to display, false to hidden private Boolean level3listplay = true;
  Two-level and three-level menu private relativelayout level2_rl,level3_rl;
  Used to record how many animations are executing private int annimationcount = 0;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
  Initview ();
    }//Initialize component private void Initview () {Home_iv = (ImageView) Findviewbyid (R.ID.HOME_IV);

    Home_iv.setonclicklistener (this);
    LEVEL2_RL = (relativelayout) Findviewbyid (R.ID.LEVEL2_RL);

    LEVEL3_RL = (relativelayout) Findviewbyid (R.ID.LEVEL3_RL);
    Menu_iv = (ImageView) Findviewbyid (R.ID.MENU_IV);
  Menu_iv.setonclicklistener (this);
  @Override public void OnClick (View v) {  Switch (V.getid ()) {case R.ID.HOME_IV://Click the logical Code of the home button Clickhomeiv ();
    Break   Case R.id.menu_iv:clickmenuiv ();
    Click the menu button's logical code break in level two.
    Default:break; The logical code for the menu button in the Level two menu, private void Clickmenuiv () {//When clicked can be judged, as long as the Annimationcount value is greater than 0, indicating that there is animation in the execution if (a
    Nnimationcount > 0) {return;
      ///When considering//1 level three display, the level three menu is hidden if (level3listplay) {hidemenu (level3_rl,0);
      Level3listplay = false;
    Return
      When//2 level three is hidden, the level three menu displays the if (!level3listplay) {showmenu (LEVEL3_RL);
      Level3listplay = true;
    Return The logical code for the home button in the level menu private void Clickhomeiv () {//When clicked can be judged, as long as the Annimationcount value is greater than 0, indicating that there is animation in the execution if (a
    Nnimationcount > 0) {return;
      }//The situation consider//1 two level, level three menu are displayed, the Tertiary menu will be hidden out if (level2listplay && level3listplay) {//To hide the level two or three menu and change the mark
      Hidemenu (level2_rl,300);
      Hidemenu (level3_rl,500); LEvel2listplay = false;
      Level3listplay = false;
    Return
      When the//2. Tertiary menu is not displayed, the level two menu is displayed if (!level2listplay &&!level3listplay) {showmenu (LEVEL2_RL);
      Level2listplay = true;
    Return
      When the//3 level two menu is displayed and the level three menu is not displayed, the level two menu is hidden if (level2listplay &&!level3listplay) {hidemenu (level2_rl,0);
      Level2listplay = false;
    Return }/** * Display menu * @param View menu to display */private void ShowMenu (Relativelayout view) {//View.setvisibilit
    Y (view.visible);
    If you want to display a menu, set the corresponding control to have focus//get several child controls int childcount = View.getchildcount () in the parent container;
    for (int i = 0; i < ChildCount i++) {view.getchildat (i). SetEnabled (True); }//Rotate animation rotateanimation animation = new Rotateanimation ( -180, 0, Animation.relative_to_self, 0.5f, Anima tion.
    Relative_to_self, 1.0f);   Animation.setduration (500); Set the duration of the animation animation.setfillafter (true); The animation stays where the animation ends View.startanimation (animatiON); Animation.setanimationlistener (New Animationlistener () {@Override public void Onanimationstart (animation anim
        ation) {/////Menu_iv.setonclicklistener (NULL) at the start of the animation;//Home_iv.setonclicklistener (NULL);
      Annimationcount + +;
      @Override public void Onanimationrepeat (Animation Animation) {//Animation execution procedure Call} @Override public void Onanimationend (Animation Animation) {///Menu_iv.setonclicklistener at the end of the animation (Mainactivi
Ty.this);
        Home_iv.setonclicklistener (Mainactivity.this);
      Annimationcount--;
  }
    }); /** * Hide Menu * @param view to hide the menu, startoffset animation delay Execution Time * * private void Hidemenu (Relativelayout View,long St
    Artoffset) {//View.setvisibility (View.gone);
    If you want to hide the menu, set the corresponding control to have no focus//get several child controls int childcount = View.getchildcount () in the parent container;
    for (int i = 0; i < ChildCount i++) {view.getchildat (i). SetEnabled (false); }
    /* * * Rotating animation * Rotateanimation (Fromdegrees, Todegrees, Pivotxtype, Pivotxvalue, Pivotytype, Pivotyvalue) * Fromdegrees Start Rotation angle * todegrees rotation End angle * pivotxtype x Axis Reference (the x-axis scaling mode, which can be value absolute, relative_to_self) * PIV Otxvalue reference point for x-axis rotation (value of x-coordinate) * Pivotytype y-axis reference (stretch mode of y-axis, which can be absolute, relative_to_self) * Pivotyvalue y-Axis rotation 
        Point ((telescopic value of y-coordinate)) * * Rotateanimation animation = new Rotateanimation (0, -180, animation.relative_to_self,
    0.5f, Animation.relative_to_self, 1.0f);
    Animation.setduration (500); Animation.setfillafter (TRUE);   Animation stays at the end of the animation position animation.setstartoffset (Startoffset);
    Set the animation's deferred execution view.startanimation (animation); Animation.setanimationlistener (New Animationlistener () {@Override public void Onanimationstart (animation anim
        ation) {//Menu_iv.setonclicklistener (NULL);//Home_iv.setonclicklistener (NULL);
      Annimationcount + +; } @Override public void OnanimAtionrepeat (Animation Animation) {} @Override public void Onanimationend (Animation Animation) {//
Menu_iv.setonclicklistener (Mainactivity.this);
        Home_iv.setonclicklistener (Mainactivity.this);
      Annimationcount--;
  }
    });

 }
}

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.youkumenu.MainActivity" > <!--Level three menu--> <relativelayout android:id= "@+id/level3_rl" Android:layout_width= "220DP" android:layout_height= "110DP" android:layout_alignparentbottom= "true" android:l Ayout_centerhorizontal= "true" android:background= "@drawable/level3" > <imageview android:id= "@+id/cha" Nnel1 "android:layout_marginleft=" 5DP "android:layout_alignparentbottom=" true "android:layout_width=" WR
      Ap_content "android:layout_height=" wrap_content "android:src=" @drawable/channel1 "/> <imageview Android:id= "@+id/channel2" android:layout_marginbottom= "10DP" android:layout_marginleft= "25DP" Android: Layout_above= "@id/channel1" android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/channel2"/> <Image View android:layout_marginbottom= "1DP" android:layout_marginleft= "52DP" android:layout_above= "@id/channe L2 "Android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:src=" @drawable/chan
      Nel3 "/> <imageview android:layout_centerhorizontal=" true "android:layout_width=" Wrap_content " android:layout_height= "Wrap_content" android:src= "@drawable/channel4"/> <imageview android:id= "@+id/ Channel7 "android:layout_marginright=" 5DP "android:layout_alignparentright=" true "Android:layout_alignpa Rentbottom= "true" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:src=
      "@drawable/channel7"/> <imageview android:id= "@+id/channel6" android:layout_alignparentright= "true" Android:layout_marGinbottom= "10DP" android:layout_marginright= "25DP" android:layout_above= "@id/channel7" Android:layout_wi Dth= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/channel6"/> <ImageVie W android:layout_marginbottom= "1DP" android:layout_marginright= "52DP" android:layout_alignparentright= "t Rue "android:layout_above=" @id/channel6 "android:layout_width=" wrap_content "android:layout_height=" wrap _content "android:src=" @drawable/channel5 "/> </RelativeLayout> <!--level two menu--> <relativelayo UT android:id= "@+id/level2_rl" android:layout_width= "140DP" android:layout_height= "70DP" Android:layout_al Ignparentbottom= "true" android:layout_centerhorizontal= "true" android:background= "@drawable/level2" > <i Mageview android:layout_marginleft= "3DP" android:layout_alignparentbottom= "true" Android:layout_width= "W Rap_content "Android:layout_height= "Wrap_content" android:src= "@drawable/icon_search"/> <imageview android:id= "@+id/me Nu_iv "android:layout_centerhorizontal=" true "android:layout_width=" Wrap_content "android:layout_height= "Wrap_content" android:src= "@drawable/icon_menu"/> <imageview android:id= "@+id/myyouku_iv" and
      roid:layout_marginright= "3DP" android:layout_alignparentbottom= "true" android:layout_alignparentright= "true" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/icon_myyo Uku "/> </RelativeLayout> <!--level menu--> <relativelayout android:layout_width=" 80DP "Andro id:layout_height= "40DP" android:layout_alignparentbottom= "true" Android:layout_centerhorizontal= "true" Android : background= "@drawable/level1" > <imageview android:id= "@+id/home_iv" android:layout_centerinparent = "true" Android:laYout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/icon_home"/> </
 Relativelayout> </RelativeLayout>

The above is the entire content of this article, I hope to help you learn, but also hope that we continue to pay attention to the cloud-dwelling community more wonderful content!