Android programming to achieve the effect of imitation cool rotating menu (with demo source code) _android

Source: Internet
Author: User

This article illustrates the effect of Android programming to achieve a cool rotating menu. Share to everyone for your reference, specific as follows:

First, look at the effect:

Sorry, will not make dynamic picture, had to upload static, if who will, please teach me.

First, look at the XML file:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/"  
  Android "Android:layout_width=" Fill_parent "android:layout_height=" fill_parent "android:background=" #c9c9c9 "> <relativelayout android:id= "@+id/relate_level3" android:layout_width= "280DP" android:layout_height= " 140DP "android:layout_alignparentbottom=" true "android:layout_centerhorizontal=" true "android:background=" @ Drawable/level3 "> <imagebutton android:id=" @+id/c1 "android:layout_width=" Wrap_content "Andr" 
     oid:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" android:layout_marginbottom= "6dip" android:layout_marginleft= "12dip" android:background= "@drawable/channel1"/> <imagebutton Andro Id: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= "28dip" 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_marginbottom=" 8dip "android:layout_marginleft=" 6d 
     IP "android:layout_torightof=" @+id/c2 "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/c5" android:layout_width= wrap_content "android:layout_height=" Wrap_co Ntent "android:layout_above=" @+id/c6 "android:layout_marginbottom=" 8dip "android:layout_marginright=" 6di P "Android:layout_toleftof= "@+id/c6" android:background= "@drawable/channel5"/> <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= "28di P "android:background=" @drawable/channel6 "/> <imagebutton android:id=" @+id/c7 "android:layou T_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Andr 
     Oid:layout_alignparentright= "true" android:layout_marginbottom= "6dip" android:layout_marginright= "12dip" android:background= "@drawable/channel7"/> </RelativeLayout> <relativelayout android:id= "@+id/rela Te_level2 "android:layout_width=" 180DP "android:layout_height=" 90DP "android:layout_alignparentbottom=" true "Android:layout_ceNterhorizontal= "true" android:background= "@drawable/level2" > <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 A Ndroid:id= "@+id/search" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android : Layout_alignparentbottom= "true" android:layout_margin= "10dip" android:background= "@drawable/icon_search"/&gt 
    ; <imagebutton android:id= "@+id/myyouku" android:layout_width= wrap_content "android:layout_height=" Wra P_content "android:layout_alignparentbottom=" true "android:layout_alignparentright=" true "android:layout 
    _margin= "10dip" android:background= "@drawable/icon_myyouku"/> </RelativeLayout> <relativelayout Android:id= "@+id/relate_level1 "android:layout_width=" 100DP "android:layout_height=" 50DP "Android:layout_alignparentbott  
     Om= "true" android:layout_centerhorizontal= "true" android:background= "@drawable/level1" > <imagebutton Android:id= "@+id/home" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" a Ndroid:layout_alignparentbottom= "true" android:layout_centerhorizontal= "true" android:layout_marginbottom= "10d

 P "android:background=" @drawable/icon_home "/> </RelativeLayout> </RelativeLayout>

We see that there are three main ralativelayout, that is, we see three layers, but about the image of the tilt is how to achieve it? is actually a false impression, the picture is placed, the image inside is tilted. The following figure:

This can probably understand, the following is the beginning of animation effect, first look at the main activity:

The public class Testyoukuactivity extends activity {/** called the ' when the ' is ' the activity ' is the ' the '. * * Private Boolean 
  Arelevel2showing = True, arelevel3showing = true; 
  Private Relativelayout Relate_level2, Relate_level3; 
  Private ImageButton home, menu; 
    @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
    Setcontentview (R.layout.main); 
    Findviews ();  
  Setlistener (); 
    private void Findviews () {Relate_level2 = (relativelayout) Findviewbyid (R.ID.RELATE_LEVEL2); 
    Relate_level3 = (relativelayout) Findviewbyid (R.ID.RELATE_LEVEL3); 
    Home = (ImageButton) Findviewbyid (r.id.home); 
  menu = (ImageButton) Findviewbyid (R.id.menu); 
     The private void Setlistener () {//To the large button set Click event Home.setonclicklistener (New Onclicklistener () {@Override  public void OnClick (View v) {if (!arelevel2showing) {myanimation.startanimationsin (Relate_level2), 
       500); 
 } else {       if (arelevel3showing) {myanimation.startanimationsout (Relate_level2, 500, 500); 
          Myanimation.startanimationsout (RELATE_LEVEL3, 500, 0); 
        arelevel3showing =!arelevel3showing; 
        else {myanimation.startanimationsout (Relate_level2, 500, 0); 
     } arelevel2showing =!arelevel2showing; 
    } 
    }); Menu.setonclicklistener (New Onclicklistener () {@Override public void OnClick (View v) {if!arelevel3 
       Showing) {Myanimation.startanimationsin (RELATE_LEVEL3, 500); 
       else {myanimation.startanimationsout (relate_level3, 500, 0); 
     } arelevel3showing =!arelevel3showing; 
  } 
    });

 } 
}

It should be noted that:

Copy Code code as follows:
Myanimation.startanimationsin (Relate_level2, 500);

Take a look at the implementation of this static method:

public static void Startanimationsin (ViewGroup viewgroup, int durationmillis) {
    viewgroup.setvisibility (0); 
    for (int i = 0; i < Viewgroup.getchildcount (); i++) { 
     viewgroup.getchildat (i); setvisibility (0); 
     Viewgroup.getchildat (i). Setclickable (true); 
     Viewgroup.getchildat (i). Setfocusable (True); 
    } 
    Animation Animation; 
    Animation = new Rotateanimation ( -180, 0, animation.relative_to_self, 
       0.5f, animation.relative_to_self, 1.0f); 
    Animation.setfillafter (true); 
    Animation.setduration (Durationmillis); 
    Viewgroup.startanimation (animation); 
}

Rotateanimation is the picture transfer rotation animation effect, look at its construction method:

Rotateanimation (context, AttributeSet attrs)
Constructor used when a rotateanimation was loaded from a resource.
Rotateanimation (float fromdegrees, float todegrees)
constructor to use when building a rotateanimation from code.
Rotateanimation (float fromdegrees, float todegrees, float pivotx, float pivoty)
constructor to use when building a rotateanimation from code
Rotateanimation (float fromdegrees, float todegrees, int pivotxtype, float pivotxvalue, int pivotytype, float pivotyvalue)
constructor to use when building a rotateanimation from code

Here is the fourth construction method:

Fromdegrees: The starting angle of rotation.
Todegrees: The end angle of the rotation.
Pivotxtype:x axis of the telescopic mode, you can take the value of absolute, relative_to_self, relative_to_parent.
The scaling value of the pivotxvalue:x coordinate.
Pivotytype:y axis of the telescopic mode, you can take the value of absolute, relative_to_self, relative_to_parent.
The scaling value of the pivotyvalue:y coordinate.

Regarding the angle question:

When the angle is negative--Indicates a counter-clockwise rotation
When the angle is positive--it means clockwise rotation
(Negative from--to positive number: clockwise rotation)
(Negative from--to negative: rotate counterclockwise)
(Positive from--to positive: clockwise rotation)
(Positive from--to negative: counterclockwise rotation)

About Pivotxvalue: This point of the x-coordinate object is rotated, at the specified absolute number 0 is the left edge. If the Pivotxtype number is absolute this value can be an absolute, in addition can also be a percentage (in 1.0 for 100%). 50% is the x midpoint and 100% is the right edge.
Similarly, Pivotyvalue: this point of the y-coordinate object is rotated, at the specified absolute number 0 is the top edge. If the Pivotytype number is absolute this value can be an absolute, in addition can also be a percentage (in 1.0 for 100%). 50% is the y midpoint, 100% is the lower edge.

Then look at the other ways to cut down:

Setfillafter:
If Fillafter is true, the transformation so this animation performed would persist when it is finished. Defaults to False if not set. This is the applies when using a animationset to chain animations. The transformation is not applied before the animationset itself starts.

If Fillafter is true, the transformation animation will run until it completes. The default setting is False. Note: This applies when using a Animationset chain animation. Transformation is not applicable before the Animationset itself begins.

Setduration: Sets the animation time.

Check out again:

Icon Animation (out of the picture) public static void Startanimationsout (final viewgroup viewgroup, int durationmillis, int startoffset 
    ) {Animation Animation; 
    Animation = new Rotateanimation (0, -180, animation.relative_to_self, 0.5f, Animation.relative_to_self, 1.0f); 
    Animation.setfillafter (TRUE); 
    Animation.setduration (Durationmillis); 
    Animation.setstartoffset (Startoffset); Animation.setanimationlistener (New Animation.animationlistener () {@Override public void Onanimationstart (Anim ation arg0) {} @Override public void Onanimationrepeat (Animation arg0) {} @Override public void on 
       Animationend (Animation arg0) {viewgroup.setvisibility (8); 
        for (int i = 0; i < Viewgroup.getchildcount (); i++) {viewgroup.getchildat (i); setvisibility (8); 
        Viewgroup.getchildat (i). Setclickable (false); 
       Viewgroup.getchildat (i). Setfocusable (false); 
    } 
     } 
    }); Viewgroup.startanimation (Animation);

 }

There is a animation.setstartoffset (startoffset); it is set animation how long to execute later.

Last: Code download address:

Here to download the site.

I hope this article will help you with the Android program.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.