UI review exercise _ Youku layout and ui review Layout

UI review exercise _ Youku layout and ui review Layout

I still remember the previous week. I carefully read my own code and read the code specification. A good code habit should be added to my usual practice.

Check the UI.

I want to deliberately review the previously neglected UI knowledge today. In fact, as a developer, we need to get used to relative layout. First, we can drag it into a layout. Second, we can compare the layout with Android performance, far better than linear layout,

This layout is formed by three relative la S and images.

A relative layout. The background is an image and an Imageview. I have hidden other la s for you to see.

    <RelativeLayout        android:id="@+id/level1"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageView            android:id="@+id/icon_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout>

Android: layout_alignParentBottom = "true" whether to display at the bottom of the container

Android: layout_centerHorizontal: The child control used for RelativeLayout is centered.

These two attributes are also frequently used later.

I believe you can also know how the second layer is implemented.

A relatively layout of three imageviews, but the image processing is skewed.

<RelativeLayout        android:id="@+id/level2"        android:layout_width="180dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2" >        <ImageView            android:id="@+id/icon_search"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_margin="10dp"            android:background="@drawable/icon_search" />        <ImageView            android:id="@+id/icon_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            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_alignParentRight="true"            android:layout_margin="10dp"            android:background="@drawable/icon_myyouku" />    </RelativeLayout>

Android: layout_margin = "10dp" describes the problem from the perspective of the user, specifying the distance between the user and other views (up and down ).

The main difficulty of the third layer lies in how to deal with it. The solution is to align the component left, and then solve the problem by setting the margin value.

All code ~~~~

<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" >    <RelativeLayout        android:id="@+id/level1"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageView            android:id="@+id/icon_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="180dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2" >        <ImageView            android:id="@+id/icon_search"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_margin="10dp"            android:background="@drawable/icon_search" />        <ImageView            android:id="@+id/icon_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            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_alignParentRight="true"            android:layout_margin="10dp"            android:background="@drawable/icon_myyouku" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level3"        android:layout_width="280dp"        android:layout_height="140dp"        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_alignParentBottom="true"            android:layout_marginBottom="10dp"            android:layout_marginLeft="10dp"            android:background="@drawable/channel1" />        <ImageView            android:id="@+id/channel2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@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_content"            android:layout_above="@id/channel2"            android:layout_alignLeft="@id/channel2"            android:layout_marginBottom="6dp"            android:layout_marginLeft="30dp"            android:background="@drawable/channel3" />        <ImageView            android:id="@+id/channel4"            android:layout_width="wrap_content"            android:layout_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="@drawable/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:layout_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:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/channel6"            android:layout_alignRight="@id/channel6"            android:layout_marginBottom="6dp"            android:layout_marginRight="30dp"            android:background="@drawable/channel5" />    </RelativeLayout></RelativeLayout>

Okay, now that the UI is implemented, let's look at the java code.

The idea is to click the Imageview to display the next-level menu SO, and display it in a hidden way through the animation effect.

------------------------------ The first step is to instantiate the control -----------------------------------------

private ImageView icon_menu;private ImageView icon_home;private RelativeLayout level1;private RelativeLayout level2;private RelativeLayout level3;

/*** Initialize the control and add the Click Event */private void initView () {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 );}

The most important thing is the processing of click events.

Step 2: identify whether to display the next level list

/* Click Event Processing * @ see android. view. view. onClickListener # onClick (android. view. view) */@ Overridepublic void onClick (View v) {switch (v. getId () {case R. id. icon_menu: // click event processing of the menu icon // if the level 3rd menu is displayed, hide it if (isLevel3Show) {// hide level 3rd menu AnimUtils. startAnimOut (level3);} else {// if the level 3rd menu is hidden, display it AnimUtils. startAnimIn (level3);} // returns the reversed result. hao isLevel3Show =! IsLevel3Show; break; case R. id. icon_home: // processing of click events on the home icon // if the 2nd-level menu is displayed, it is hidden. if (isLevel2Show) {AnimUtils. startAnimOut (level2); isLevel2Show = false; if (isLevel3Show) {AnimUtils. startAnimOut (level3, 300); isLevel3Show = false ;}} else {// Level 2 menu AnimUtils is displayed if Level 2 menu is hidden. startAnimIn (level2); isLevel2Show = true;} break; default: break ;}}

-------------------------- Step 3: Create an animation tool -------------------------

There is a class of RotateAnimation for animation rotation. I will use it to rotate the relative layout to see if it is displayed.

Package com. xiaoxin. youkuDemo; import android. view. animation. RotateAnimation; import android. widget. RelativeLayout;/** float fromDegrees: rotation start angle. Float toDegrees: the end angle of the rotation. Int limit txtype: The scaling mode of the X axis. values include ABSOLUTE, RELATIVE_TO_SELF, and RELATIVE_TO_PARENT. Float limit txvalue: The scaling value of X coordinates. Int equaltytype: The scaling mode of the Y axis. values include ABSOLUTE, RELATIVE_TO_SELF, and RELATIVE_TO_PARENT. Float tytyvalue: The scaling value of Y coordinates. * @ Author Administrator */public class AnimUtils {/*** execute rotation and exit animation for the specified view * @ param view */public static void startAnimOut (RelativeLayout view) {startAnimOut (view, 0);} public static void startAnimOut (RelativeLayout view, long offest) {// The first parameter is the starting rotation angle, // The second parameter is the end angle // The third parameter. The four parameters are the coordinates of the center RotateAnimation animation = new RotateAnimation (0,180, view. getWidth ()/2, view. getHeight (); // 1. set the running event animation. setDuration (500); // 2. animation is saved after execution. setFillAfter (true); // 3. sets the animation for delayed execution. setStartOffset (offest); // 4. run view. startAnimation (animation);}/*** run the animation * @ param view */public static void startAnimIn (RelativeLayout view) {startAnimIn (view, 0);}/*** enables the specified view to be delayed to execute the animation that rotates into * @ 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, * the horizontal to the right is 0 degrees * The clockwise rotation degree increases */RotateAnimation animation = new RotateAnimation (180,360, view. getWidth ()/2, view. getHeight (); animation. setDuration (500); // set the running time to animation. setFillAfter (true); // After the animation is executed, the animation remains in the final state. setStartOffset (I); // sets the view of the delayed execution time. startAnimation (animation );}}

------------------ Added user-friendly operations in the last step. The menu key is monitored to stimulate the function of displaying and hiding menus.

// --------------------------- Use the menu key to control the layout ------------------- @ Override/*** responds to the button action */public boolean onKeyDown (int keyCode, KeyEvent event) {if (keyCode = KeyEvent. KEYCODE_MENU) {// listens to the menu key changeLevel1State ();} return super. onKeyDown (keyCode, event );}

Private void changeLevel1State () {// if the level 1 menu is displayed, the level 1, 2, and 3 menu if (isLevel1show) {AnimUtils is hidden. startAnimOut (level1); isLevel1show = false; if (isLevel2Show) {// determine whether the Level 2 Menu displays AnimUtils. startAnimOut (level2, 100); isLevel2Show = false; if (isLevel3Show) {// determine whether the Level 3 Menu displays AnimUtils. startAnimOut (level3, 200); isLevel3Show = false ;}} else {// if the level 1st menu is hidden, AnimUtils is displayed. startAnimIn (level1); isLevel1show = true; AnimUtils. startAnimIn (level2, 200); isLevel2Show = true ;}}

End ------------

Click to download source code