Android Metro menu

Let's continue with the android menu today. We have previously introduced :. I believe everyone is familiar with the Metro style. The following describes how to implement this effect on the Android platform,

Implementation ideas:

Animation is used to achieve the moving effect. The translateanimation method is used. Take a look at the layout file:

Activity_main.xml

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "#000000" Android: orientation = "vertical"> <! -- Layer 1 --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: Orientation = "horizontal"> <! -- Level 1 Horizontal --> <! -- First layer horizontal left --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: orientation = "vertical"> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: Orientation = "horizontal"> <! -- 1 --> <relativelayout Android: Id = "@ + ID/nine_one" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# FFFF00"> </relativelayout> <! -- 2 --> <relativelayout Android: Id = "@ + ID/nine_two" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# ffc0cb"> </relativelayout> </linearlayout> <! -- 4 --> <relativelayout Android: Id = "@ + ID/nine_four" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# ee30a7"> </relativelayout> <! -- 5 --> <relativelayout Android: Id = "@ + ID/nine_five" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# ee4000"> </relativelayout> </linearlayout> <! -- Horizontal right of the first layer --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "2" Android: Orientation = "vertical"> <! -- 3 --> <relativelayout Android: Id = "@ + ID/nine_three" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "2" Android: background = "# ff8c69"> </relativelayout> <! -- 6 --> <relativelayout Android: Id = "@ + ID/nine_six" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# 8c8c8c"> </relativelayout> </linearlayout> <! -- Layer 2 --> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "3" Android: baselinealigned = "false" Android: orientation = "horizontal"> <! -- 7 --> <relativelayout Android: Id = "@ + ID/nine_seven" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# 8b3e2f"> </relativelayout> <! -- 8 --> <! -- 9 --> <relativelayout Android: Id = "@ + ID/nine_nine" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1" Android: background = "# a52a2a"> </relativelayout> </linearlayout>

Its effect is as follows:

After that, you can perform animation movement on each layout in mainactivity to achieve the translation effect.

Mainactivity. Java:

Import android. app. activity; import android. content. intent; import android. OS. bundle; import android. util. displaymetrics; import android. view. layoutinflater; import android. view. menu; import android. view. view; import android. view. view. onclicklistener; import android. view. window; import android. view. animation. translateanimation; import android. widget. relativelayout; import android. widget. toast;/***/public class mainactivity extends activity {private view viewnine; private comment Inflater; private comment nine_one, nine_two, nine_three, nine_four, nine_five, nine_six, nine_seven, nine_nine; private translateanimation myanimation_right, myanimation_bottom; private translateanimation myanimation_left, myanimation_top; @ overrideprotected void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); requestwindowfeature (window. feature_no_title); Inflater = layoutinflater. from (this); viewnine = Inflater. inflate (R. layout. activity_main, null); nine_one = (relativelayout) viewnine. findviewbyid (R. id. nine_one); nine_two = (relativelayout) viewnine. findviewbyid (R. id. nine_two); nine_three = (relativelayout) viewnine. findviewbyid (R. id. nine_three); nine_four = (relativelayout) viewnine. findviewbyid (R. id. nine_four); nine_five = (relativelayout) viewnine. findviewbyid (R. id. nine_five); nine_six = (relativelayout) viewnine. findviewbyid (R. id. nine_six); nine_seven = (relativelayout) viewnine. findviewbyid (R. id. nine_seven); nine_nine = (relativelayout) viewnine. findviewbyid (R. id. nine_nine); setcontentview (viewnine); nine_four.setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {intent = new intent (mainactivity. this, oneactivity. class); startactivity (intent) ;}}); nine_six.setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {}}); myanimation (); addanimation () ;}// start the animation private void addanimation () {animation (myanimation_right); animation (animation); animation (myanimation_left); animation (myanimation_bottom); animation (myanimation_left ); values (myanimation_top); values (myanimation_left);} // animation definition private void myanimation () {displaymetrics = new displaymetrics (); displaymetrics = This. getresources (). getdisplaymetrics (); // get the screen width int screenwidth = displaymetrics. widthpixels; // get the screen height int screenheight = displaymetrics. heightpixels; myanimation_right = new translateanimation (screenwidth, 0, 0); weight (1800); myanimation_bottom = new translateanimation (0, 0, screenheight, 0); weight (1500 ); myanimation_left = new translateanimation (-screenwidth, 0, 0); myanimation_left.setduration (2000); myanimation_top = new translateanimation (0, 0,-screenheight, 0 ); myanimation_top.setduration (2500);} @ overridepublic Boolean oncreateoptionsmenu (menu) {// inflate the menu; this adds items to the action bar if it is present. // getmenuinflater (). inflate (R. menu. activity_main, menu); Return true ;}}

Although the effect is acceptable, the layout file is nested, which leads to performance problems when drawing windows. Therefore, you have strict program requirements. We recommend that you use relativewlayout for layout and reduce nesting.