Android-the simplest menu rotation in history to achieve the effect, android rotation menu

Android-the simplest menu rotation in history to achieve the effect, android rotation menu

Reprinted please indicate the source: http://blog.csdn.net/l1028386804/article/details/48048323

For physical reasons, I didn't update my blog for you a few days ago. So today we will come together to implement a very cool menu rotation effect. Among many apps, it is not difficult to find that the menu design is cool. One of them is to design the menu into a Rotating effect. Well, how is this cool menu effect achieved? Next, let's work together to achieve this cool menu effect.

I. Principles

Old Rules: Let's get stuck with the principle-level stuff.

The implementation principle of this example is very simple. It uses the relative layout of Android to implement a nested three-layer prototype menu on the interface. The first-level menu is at the innermost layer, the second-level menu is at the second level, and the third-level menu is at the outermost layer.

1. The level-1 menu is always displayed;

2. Click the level-1 menu. If all menus are displayed, the level-3 menu is rotated first, and then the level-2 menu is rotated. If only the level-2 menu is displayed, the level-2 menu is rotated; if no menu is displayed, the second-level menu is displayed;

3. Click the level-2 menu. If the level-3 menu is displayed, the level-3 menu disappears. If the level-3 menu is not displayed, the level-3 menu is rotated.

The principle is exhausted, isn't it easy? Next, let's implement these effects together.

II. Implementation 1. Custom Animation class MyAnimation

There are two main animation methods in this class. One is the input animation method startAnimationIn, and the other is the output animation method startAnimationOut.

1) Input animation Method

This animation effect is achieved by rotating the effect, from-180 to 0.

The specific implementation code is as follows:

// Enter the animation effect public static void startAnimationIn (ViewGroup viewGroup, int duration) {for (int I = 0; I <viewGroup. getChildCount (); I ++) {View view = viewGroup. getChildAt (I); view. setVisibility (View. VISIBLE); view. setClickable (true); view. setFocusable (true);} Animation animation = new RotateAnimation (-180, 0, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 1.0f); animation. setFillAfter (true); animation. setDuration (duration); viewGroup. startAnimation (animation );}

2) animation Method

This method basically has the same effect as the input animation. The only difference is that the rotation ranges from 0 to-180, and the display effect of the control is set after the rotation ends.

The specific implementation code is as follows:

// Output the Animation effect public static void startAnimationOut (final ViewGroup viewGroup, int duration, int startOffSet) {animation Animation = new RotateAnimation (0,-180, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 1.0f); animation. setFillAfter (true); animation. setDuration (duration); animation. setStartOffset (startOffSet); animation. setAnimationListener (new Animation. animationListener () {@ Overridepublic void onAnimationStart (Animation animation) {}@ Overridepublic void Merge (Animation animation) {}@ Overridepublic void onAnimationEnd (Animation animation) {// TODO Auto-generated method stubfor (int I = 0; I <viewGroup. getChildCount (); I ++) {View view = viewGroup. getChildAt (I); view. setVisibility (View. GONE); view. setClickable (false); view. setFocusable (false);} viewGroup. setVisibility (View. GONE) ;}}); viewGroup. startAnimation (animation );}

3) The complete code is as follows:

Package com. lyz. youku_menu.activity; import android. view. view; import android. view. viewGroup; import android. view. animation. animation; import android. view. animation. rotateAnimation;/*** Custom Animation effect ** @ author liuyazhuang **/public class MyAnimation {// enter the animation effect public static void startAnimationIn (ViewGroup viewGroup, int duration) {for (int I = 0; I <viewGroup. getChildCount (); I ++) {View view = viewGroup. getChildAt (I); view. setVisibility (View. VISIBLE); view. setClickable (true); view. setFocusable (true);} Animation animation = new RotateAnimation (-180, 0, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 1.0f); animation. setFillAfter (true); animation. setDuration (duration); viewGroup. startAnimation (animation);} // public static void startAnimationOut (final ViewGroup viewGroup, int duration, int startOffSet) {Animation animation = new RotateAnimation (0,-180, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 1.0f); animation. setFillAfter (true); animation. setDuration (duration); animation. setStartOffset (startOffSet); animation. setAnimationListener (new Animation. animationListener () {@ Overridepublic void onAnimationStart (Animation animation) {}@ Overridepublic void Merge (Animation animation) {}@ Overridepublic void onAnimationEnd (Animation animation) {// TODO Auto-generated method stubfor (int I = 0; I <viewGroup. getChildCount (); I ++) {View view = viewGroup. getChildAt (I); view. setVisibility (View. GONE); view. setClickable (false); view. setFocusable (false);} viewGroup. setVisibility (View. GONE) ;}}); viewGroup. startAnimation (animation );}}

2. MainActivity

All implementations are implemented in MainActivity. In this class, we first find all the controls on the interface, and then set two boolean-type identifiers, specify whether the level-2 menu and level-3 menu are displayed, set click events for the home and menu menus, and complete the menu animation effect in the click events.

The specific implementation code is as follows:

Package com. lyz. youku_menu.activity; import android. app. activity; import android. OS. bundle; import android. view. menu; import android. view. view; import android. widget. imageButton; import android. widget. relativeLayout;/*** homepage implementation * @ author liuyazhuang **/public class MainActivity extends Activity {private ImageButton home; private ImageButton search; private ImageButton menu; private ImageButton myyouku; priv Ate ImageButton c1; private ImageButton c2; private ImageButton c3; private ImageButton c4; private ImageButton c7; private ImageButton c6; private ImageButton c5; private RelativeLayout level1; private RelativeLayout level2; private RelativeLayout level3; private boolean isLevel2Show = true; private boolean isLevel3Show = true; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (saved InstanceState); setContentView (R. layout. activity_main); home = (ImageButton) findViewById (R. id. home); search = (ImageButton) findViewById (R. id. search); menu = (ImageButton) findViewById (R. id. menu); myyouku = (ImageButton) findViewById (R. id. myyouku); c1 = (ImageButton) findViewById (R. id. c1); c2 = (ImageButton) findViewById (R. id. c2); c3 = (ImageButton) findViewById (R. id. c3); c4 = (ImageButton) findViewById (R. Id. c4); c7 = (ImageButton) findViewById (R. id. c7); c6 = (ImageButton) findViewById (R. id. c6); c5 = (ImageButton) findViewById (R. id. c5); level1 = (RelativeLayout) findViewById (R. id. level1); level2 = (RelativeLayout) findViewById (R. id. level2); level3 = (RelativeLayout) findViewById (R. id. level3); menu. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated Method stubif (isLevel3Show) {MyAnimation. startAnimationOut (level3, 500, 0);} else {MyAnimation. startAnimationIn (level3, 500);} isLevel3Show =! IsLevel3Show;}); home. setOnClickListener (new View. OnClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubif (! IsLevel2Show) {MyAnimation. startAnimationIn (level2, 500);} else {if (isLevel3Show) {MyAnimation. startAnimationOut (level3, 500, 0); MyAnimation. startAnimationOut (level2, 500,500); isLevel3Show =! IsLevel3Show;} else {MyAnimation. startAnimationOut (level2, 500, 0) ;}} isLevel2Show =! IsLevel2Show ;}}) ;}@ Overridepublic boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true ;}}

3. activity_main.xml

The specific implementation code is as follows:

<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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <RelativeLayout        android:id="@+id/level1"        android:layout_width="100dip"        android:layout_height="50dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageButton            android:id="@+id/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="180dip"        android:layout_height="90dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2" >        <ImageButton            android:id="@+id/search"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/ic_action_search" />        <ImageButton            android:id="@+id/menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/icon_menu" />        <ImageButton            android:id="@+id/myyouku"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="6dip"            android:layout_marginRight="12dip"            android:background="@drawable/icon_myyouku" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level3"        android:layout_width="280dip"        android:layout_height="140dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3" >        <ImageButton            android:id="@+id/c1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/channel1" />                <ImageButton            android:id="@+id/c2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c1"            android:layout_marginBottom="12dip"            android:layout_marginLeft="30dip"            android:background="@drawable/channel2" />                <ImageButton            android:id="@+id/c3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c2"            android:layout_toRightOf="@id/c2"            android:layout_marginBottom="12dip"            android:layout_marginLeft="8dip"            android:background="@drawable/channel3" />                 <ImageButton            android:id="@+id/c4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/channel4" />                           <ImageButton            android:id="@+id/c7"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="6dip"            android:layout_marginRight="12dip"            android:background="@drawable/channel7" />                   <ImageButton            android:id="@+id/c6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c7"            android:layout_alignParentRight="true"            android:layout_marginBottom="12dip"            android:layout_marginRight="30dip"            android:background="@drawable/channel6" />                    <ImageButton            android:id="@+id/c5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/c6"            android:layout_toLeftOf="@id/c6"            android:layout_marginBottom="12dip"            android:layout_marginRight="8dip"            android:background="@drawable/channel5" />              </RelativeLayout></RelativeLayout>

4. AndroidManifest. xml

NO content is added to this file, which is automatically generated by Android.

The details are as follows:

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.lyz.youku_menu.activity"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="18" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.lyz.youku_menu.activity.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

Iii. Running Effect

4. Tips

You can go to the link http://download.csdn.net/detail/l1028425804/9057.pdf to download the source code of the example code of a revolving menu.

In this example, for the purpose of writing some text directly in the layout file and related classes, you need to write these words in the real project. in xml files, reference these resources externally. Remember, this is the most basic development knowledge and specification for an Android programmer. I am writing these resources in the class and layout files for convenience.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.