Android Youku Menu Component Customization

The main thing is to imitate the Youku Mobile client's bottom menu control implementation. First, a few pictures, click on the middle of the home, the display level two menu, click on the menu of level two to show the level three menu.

This is the simplest implementation of the layout, but learned from the custom animation and some of the basic knowledge of the layout, from which the harvest is very large.

The first is to define the layout file, the three menu bar is actually three relativelayout,level1,level2,level3, and then each menu bar of the small title is added to the corresponding 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.test.youku.mainactivity$placeholderfragment" > <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "@string/hello_world"/> <relativelayout android: Id= "@+id/level1" android:layout_width= "100DP" android:layout_height= "50DP" Android:layout_alignparentbott Om= "true" android:layout_centerhorizontal= "true" android:background= "@drawable/level1" > &lt ; ImageView android:id= "@+id/icon_home" android:layout_width= "Wrap_content" Android:layout_h           eight= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_centerhorizontal= "true" android:background= "@drawable/icon_hoMe "/> </RelativeLayout> <relativelayout android:id=" @+id/level2 "android:layout_width = "180DP" android:layout_height= "90DP" android:layout_alignparentbottom= "true" Android:layout_centerhorizo Ntal= "true" android:background= "@drawable/level2" > <imageview android:id= "@+id/icon_ Search "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:lay Out_alignparentbottom= "true" android:layout_margin= "10DP" android:background= "@drawable/icon_search"/&                Gt <imageview android:id= "@+id/icon_menu" android:layout_width= "Wrap_content" android:layou t_height= "Wrap_content" android:layout_centerhorizontal= "true" android:background= "@drawable/icon_menu "/> <imageview android:id=" @+id/icon_myyouku "android:layout_width=" wrap_content    "       android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Android:layout_mar    Gin= "10DP" android:layout_alignparentright= "true" android:background= "@drawable/icon_myyouku"/>    </RelativeLayout> <relativelayout android:id= "@+id/level3" android:layout_width= "280DP"         android:layout_height= "145DP" android:layout_alignparentbottom= "true" android:layout_centerhorizontal= "true"           android:background= "@drawable/level3" > <imageview android:id= "@+id/channel1" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_alignpare Ntbottom= "true" android:layout_marginleft= "10DP" android:layout_marginbottom= "10DP" Android: background= "@drawable/channel1"/> <imageview android:id= "@+id/channel2" Android:layout_    Width= "Wrap_content"        android:layout_height= "Wrap_content" android:layout_centervertical= "true" Android:layout_abo            Ve= "@id/channel1" android:layout_alignleft= "@id/channel1" android:layout_marginbottom= "6DP"            android:layout_marginleft= "20DP" android:background= "@drawable/channel2"/> <imageview Android:id= "@+id/channel3" android:layout_width= "wrap_content" android:layout_height= "Wrap_conten T "android:layout_above=" @id/channel2 "android:layout_alignleft=" @id/channel2 "Android:la Yout_marginbottom= "6DP" android:layout_marginleft= "30DP" android:background= "@drawable/channel3"/&G        T <imageview android:id= "@+id/channel4" android:layout_width= "Wrap_content" Android:layo            ut_height= "Wrap_content" android:layout_centerhorizontal= "true" android:layout_margintop= "5DP" Android:background= "@drawable/channel4"/> <imageview android:id= "@+id/channel7" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:background= "@drawab            Le/channel7 "android:layout_alignparentbottom=" true "android:layout_alignparentright=" true "                       Android:layout_marginbottom= "10DP" android:layout_marginright= "10DP"/> <imageview android:id= "@+id/channel6" android:layout_width= "Wrap_content" Android:layo ut_height= "Wrap_content" android:layout_above= "@id/channel7" android:layout_alignright= "@id/channel7 "Android:layout_marginbottom=" 6DP "android:layout_marginright=" 20DP "android:background= "@drawable/channel6"/> <imageview android:id= "@+id/channel5" android:l Ayout_width= "Wrap_contenT "android:layout_height=" wrap_content "android:layout_above=" @id/channel6 "android:layou            t_alignright= "@id/channel6" android:layout_marginbottom= "6DP" android:layout_marginright= "30DP" android:background= "@drawable/channel5"/> </RelativeLayout></RelativeLayout>

Then there is the definition of entering and exiting the animation:

Because it is rotated into, all to define a rotateanimation, and to configure:

Import Android.view.animation.rotateanimation;import Android.widget.relativelayout;public class MyUtils {/** * Lets the specified view perform a rotation away from the animation * @param view */public static void Startanimout (Relativelayout view) {startanimout (view, 0);} /** * Allows the specified view delay to perform a rotation away animation, * @param level3 * @param offset delay time */public static void Startanimout (Relativelayout view, lo ng offset) {/* * The default circle is the upper-left corner of the view, * horizontal to the right 0 degrees * Clockwise rotation degrees increase */rotateanimation animation =new rotateanimation (0, view.ge Twidth ()/2, View.getheight ()) animation.setduration (500);//Set Run time Animation.setfillafter (true);//After the animation is executed, Keep the last state animation.setstartoffset (offset);//Set time View.startanimation (animation) for deferred execution;} /** * Allows the specified view to perform a rotation into the animation * @param view */public static void Startanimin (Relativelayout view) {startanimin (view, 0);} /** * Allow the specified view delay to perform a rotation into the animation * @param level2 * @param i delay time */public static void Startanimin (relativelayout view, int i) { /* * The default circle is the upper left corner of the view, * horizontal to the right 0 degrees * Clockwise rotation degrees increase */rotateanimation animation =new rotateanimation (180, 360, View.getwidth ()/2, View.getheight ()); animation.setduration (500);//Set the run time Animation.setfillafter (true);//After the animation finishes executing , keep the last state animation.setstartoffset (i);//Set the time delay to execute view.startanimation (animation);}}

The last is the main class of space display, this class is not difficult, is based on logic, call the above written into the movement, to pay attention to the clarity of logic:

public class Mainactivity extends Activity implements Onclicklistener {private ImageView icon_menu;private ImageView icon  _home;private relativelayout level1;private relativelayout level2;private relativelayout level3;/** * Determine if the 3rd level menu is displayed * True To display */private Boolean islevel3show = true;/** * Determine whether the 2nd level menu is displayed * True for display */private boolean islevel2show = true;/** * Judge 1th Whether the level menu displays * True for display */private Boolean islevel1show = true; @Overrideprotected void OnCreate (Bundle savedinstancestate) {Supe R.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); icon_home = (ImageView) Findviewbyid ( R.id.icon_home); Icon_menu = (ImageView) Findviewbyid (r.id.icon_menu); level1 = (relativelayout) Findviewbyid ( R.ID.LEVEL1); Level2 = (relativelayout) Findviewbyid (r.id.level2); level3 = (relativelayout) Findviewbyid (R.ID.LEVEL3) ; Icon_home.setonclicklistener (this); Icon_menu.setonclicklistener (this);} @Overridepublic void OnClick (View v) {switch (V.getid ()) {Case r.id.icon_menu://handles the Click event of the menu icon//If the 3rd level menu is display state,Then hide it if (islevel3show) {//Hide 3rd Level menu Myutils.startanimout (LEVEL3);} else{//if the 3rd level menu is hidden, display it myutils.startanimin (LEVEL3);} Islevel3show =!islevel3show;break;case r.id.icon_home://handles the Click event of the Home icon//If the 2nd level menu is display state, then hide, 2, Level 3 menu if (islevel2show) {myutils.startanimout (level2); islevel2show = False;if (islevel3show) {//If at this point the 3rd level menu is also displayed, it is also hidden myutils.startanimout ( level3,200); islevel3show = false;}} else{//if the 2nd level menu is hidden, the Level 2 menu Myutils.startanimin (LEVEL2) is displayed, Islevel2show = true;} Break;}} /** * Change the status of the 1th level menu */private void Changelevel1state () {//If the 1th level menu is a display state, then hide the. Myutils.startanimout (level1); islevel1show = False;if (islevel2show) {//Determines whether the Level 2 menu shows myutils.startanimout (level2,100); Islevel2show = False;if (islevel3show) {//Determines whether the Level 3 menu shows myutils.startanimout (level3,200); islevel3show = false;}}} else{//if the 1th level menu is hidden, then display 1, Level 2 menu myutils.startanimin (level1); islevel1show = true; Myutils.startanimin (level2,200); islevel2show = True;}} @Override/** * Response button Action */public boolean onKeyDown (int keycode, KeyevenT event) {if (keycode = = Keyevent.keycode_menu) {//Monitor MENU key Changelevel1state ();} Return Super.onkeydown (KeyCode, event);}}

Finally, the feeling of custom components is still very powerful and dazzling, tomorrow to continue to learn to summarize this knowledge. Go to bed..

Android Youku Menu Component Customization