仿的一个动画菜单效果

http://gundumw100.iteye.com/blog/1299953

 

记得在eoe上有人发过，但代码质量不好。我重写了一下，抽成了控件。但没有经过各种控件的相容性测试，如果和其他控件的相容性不好，就直接在activity中写代码吧，应该差不多的。

我用的是平板，所以效果还行，不知道手机如何。





代码：

Java代码







package com.ql.view; 
 
import android.R.anim; 
import android.content.Context; 

import android.util.AttributeSet; 

import android.util.Log; 
import android.view.LayoutInflater; 

import android.view.View; 
import android.view.animation.Animation; 

import android.view.animation.RotateAnimation; 

import android.view.animation.ScaleAnimation; 

import android.view.animation.TranslateAnimation; 

import android.view.animation.Animation.AnimationListener; 

import android.widget.Button; 

import android.widget.RelativeLayout; 

 
import com.ql.app.R; 
 
public class AnimButtons
extends RelativeLayout{ 
 
    private Context context; 

    private int leftMargin=0,bottomMargin=0; 

    private final
int buttonWidth=58;//图片宽高 

    private final
int r=180;//半径 

    private final
int maxTimeSpent=200;//最长动画耗时 

    private final
int minTimeSpent=80;//最短动画耗时 

    private int intervalTimeSpent;//每相邻2个的时间间隔 

    private Button[] btns; 
    private Button btn_menu; 

    private RelativeLayout.LayoutParams params; 

    private boolean isOpen =
false;//是否菜单打开状态 

    private float angle;//每个按钮之间的夹角 

    public AnimButtons(Context context) { 

        super(context); 
        // TODO Auto-generated constructor stub 

        this.context=context; 

    } 
    public AnimButtons(Context context, AttributeSet attrs) { 

        super(context, attrs); 

        // TODO Auto-generated constructor stub 

        this.context=context; 

    } 
     
    @Override 
    protected void onFinishInflate() { 

        // TODO Auto-generated method stub 

        super.onFinishInflate(); 

        View view=LayoutInflater.from(context).inflate(R.layout.anim_buttons,
this); 
         
        initButtons(view); 
         
    } 
 
    private void initButtons(View view){ 

        // TODO Auto-generated method stub 

        //6个按钮，具体视情况而定 
        btns=new Button[6]; 

        btns[0] = (Button) view.findViewById(R.id.btn_camera); 

        btns[1] = (Button) view.findViewById(R.id.btn_with); 

        btns[2] = (Button) view.findViewById(R.id.btn_place); 

        btns[3] = (Button) view.findViewById(R.id.btn_music); 

        btns[4] = (Button) view.findViewById(R.id.btn_thought); 

        btns[5] = (Button) view.findViewById(R.id.btn_sleep); 

        btn_menu = (Button) view.findViewById(R.id.btn_menu); 
         
        leftMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).leftMargin; 

        bottomMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).bottomMargin; 

         
        for(int i=0;i<btns.length;i++){ 

            btns[i].setLayoutParams(btn_menu.getLayoutParams());//初始化的时候按钮都重合 

            btns[i].setTag(String.valueOf(i)); 
            btns[i].setOnClickListener(clickListener); 
        } 
         
        intervalTimeSpent=(maxTimeSpent-minTimeSpent)/btns.length;//20 

        angle=(float)Math.PI/(2*(btns.length-1)); 

    } 
     
    @Override 
    protected void onSizeChanged(int w,
int h, int oldw,
int oldh) { 
        // TODO Auto-generated method stub 

        super.onSizeChanged(w, h, oldw, oldh); 

        final int bottomMargins=this.getMeasuredHeight()-buttonWidth-bottomMargin; 

//      Log.i("tag", "bottomMargins====="+bottomMargins); 

        btn_menu.setOnClickListener(new OnClickListener() { 

             
            @Override 
            public void onClick(View v) { 

                // TODO Auto-generated method stub                 
 
                if(!isOpen){ 

                    isOpen = true; 

//                  btn_menu.startAnimation(animRotate(-45.0f, 0.5f, 0.45f)); 

                    for(int i=0;i<btns.length;i++){ 

                        float xLenth=(float)(r*Math.sin(i*angle)); 

                        float yLenth=(float)(r*Math.cos(i*angle)); 

//                      Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth); 

                        btns[i].startAnimation(animTranslate(xLenth, -yLenth, leftMargin+(int)xLenth, bottomMargins - (int)yLenth, btns[i], minTimeSpent+i*intervalTimeSpent)); 

                    } 
                     
                } 
                else{                    

                    isOpen = false; 

//                  btn_menu.startAnimation(animRotate(90.0f, 0.5f, 0.45f)); 

                    for(int i=0;i<btns.length;i++){ 

                        float xLenth=(float)(r*Math.sin(i*angle)); 

                        float yLenth=(float)(r*Math.cos(i*angle)); 

//                      Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth); 

                        btns[i].startAnimation(animTranslate(-xLenth, yLenth, leftMargin, bottomMargins, btns[i], maxTimeSpent-i*intervalTimeSpent)); 

                    } 
                } 
                     
            } 
        }); 
         
    } 
    private Animation animScale(float toX,
float toY){ 
        // TODO Auto-generated method stub 

        Animation animation = new ScaleAnimation(1.0f, toX,
1.0f, toY, Animation.RELATIVE_TO_SELF,
0.5f, Animation.RELATIVE_TO_SELF, 0.5f); 

        animation.setInterpolator(context, anim.accelerate_decelerate_interpolator); 

        animation.setDuration(400); 

        animation.setFillAfter(false); 

        return animation; 
         
    } 
     
    private Animation animRotate(float toDegrees,
float pivotXValue, float pivotYValue){ 

        // TODO Auto-generated method stub 

        final Animation animation =
new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue); 

        animation.setAnimationListener(new AnimationListener(){ 

             
            @Override 
            public void onAnimationStart(Animation animation){ 

                // TODO Auto-generated method stub 

                 
            } 
             
            @Override 
            public void onAnimationRepeat(Animation animation){ 

                // TODO Auto-generated method stub 

                 
            } 
             
            @Override 
            public void onAnimationEnd(Animation animation){ 

                // TODO Auto-generated method stub 

                animation.setFillAfter(true); 

            } 
        }); 
        return animation; 
    } 
     
     
    private Animation animTranslate(float toX,
float toY, final
int lastX, final
int lastY, 
            final Button button,
long durationMillis){ 
        // TODO Auto-generated method stub 

        Animation animation = new TranslateAnimation(0, toX,
0, toY);                
        animation.setAnimationListener(new AnimationListener(){ 

                         
            @Override 
            public void onAnimationStart(Animation animation){ 

                // TODO Auto-generated method stub 

                                 
            } 
                         
            @Override 
            public void onAnimationRepeat(Animation animation) { 

                // TODO Auto-generated method stub 

                             
            } 
                         
            @Override 
            public void onAnimationEnd(Animation animation){ 

                // TODO Auto-generated method stub 

                params = new RelativeLayout.LayoutParams(0,
0); 
                params.height = buttonWidth; 
                params.width = buttonWidth;                                          

                params.setMargins(lastX, lastY, 0,
0); 
                button.setLayoutParams(params); 
                button.clearAnimation(); 
                         
            } 
        });                                                                                              

        animation.setDuration(durationMillis); 
        return animation; 
    } 
     
    View.OnClickListener clickListener=new View.OnClickListener(){ 

 
        @Override 
        public void onClick(View v) { 

            // TODO Auto-generated method stub 

            int selectedItem=Integer.parseInt((String)v.getTag()); 

            for(int i=0;i<btns.length;i++){ 

                if(i==selectedItem){ 

                    btns[i].startAnimation(animScale(2.0f,
2.0f)); 
                }else{ 
                    btns[i].startAnimation(animScale(0.0f,
0.0f)); 
                } 
            } 
            if(onButtonClickListener!=null){ 

                onButtonClickListener.onButtonClick(v, selectedItem); 

            } 
        } 
         
    }; 
     
    public boolean isOpen(){ 

        return isOpen; 
    } 
     
    private OnButtonClickListener onButtonClickListener; 

    public interface OnButtonClickListener{ 

        void onButtonClick(View v,int id); 

    } 
    public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener){ 

        this.onButtonClickListener=onButtonClickListener; 

    } 
} 

package com.ql.view;

import android.R.anim;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.RelativeLayout;

import com.ql.app.R;

public class AnimButtons extends RelativeLayout{

private Context context;
private int leftMargin=0,bottomMargin=0;
private final int buttonWidth=58;//图片宽高
private final int r=180;//半径
private final int maxTimeSpent=200;//最长动画耗时
private final int minTimeSpent=80;//最短动画耗时
private int intervalTimeSpent;//每相邻2个的时间间隔
private Button[] btns;
private Button btn_menu;
private RelativeLayout.LayoutParams params;
private boolean isOpen = false;//是否菜单打开状态
private float angle;//每个按钮之间的夹角
public AnimButtons(Context context) {
super(context);
// TODO Auto-generated constructor stub
this.context=context;
}
public AnimButtons(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
this.context=context;
}

@Override
protected void onFinishInflate() {
// TODO Auto-generated method stub
super.onFinishInflate();
View view=LayoutInflater.from(context).inflate(R.layout.anim_buttons, this);

initButtons(view);

}

private void initButtons(View view){
// TODO Auto-generated method stub
//6个按钮，具体视情况而定
btns=new Button[6];
btns[0] = (Button) view.findViewById(R.id.btn_camera);
btns[1] = (Button) view.findViewById(R.id.btn_with);
btns[2] = (Button) view.findViewById(R.id.btn_place);
btns[3] = (Button) view.findViewById(R.id.btn_music);
btns[4] = (Button) view.findViewById(R.id.btn_thought);
btns[5] = (Button) view.findViewById(R.id.btn_sleep);
btn_menu = (Button) view.findViewById(R.id.btn_menu);

leftMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).leftMargin;
bottomMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).bottomMargin;

for(int i=0;i<btns.length;i++){
btns[i].setLayoutParams(btn_menu.getLayoutParams());//初始化的时候按钮都重合
btns[i].setTag(String.valueOf(i));
btns[i].setOnClickListener(clickListener);
}

intervalTimeSpent=(maxTimeSpent-minTimeSpent)/btns.length;//20
angle=(float)Math.PI/(2*(btns.length-1));
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// TODO Auto-generated method stub
super.onSizeChanged(w, h, oldw, oldh);
final int bottomMargins=this.getMeasuredHeight()-buttonWidth-bottomMargin;
//		Log.i("tag", "bottomMargins====="+bottomMargins);
btn_menu.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(!isOpen){
isOpen = true;
//					btn_menu.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));
for(int i=0;i<btns.length;i++){
float xLenth=(float)(r*Math.sin(i*angle));
float yLenth=(float)(r*Math.cos(i*angle));
//						Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);
btns[i].startAnimation(animTranslate(xLenth, -yLenth, leftMargin+(int)xLenth, bottomMargins - (int)yLenth, btns[i], minTimeSpent+i*intervalTimeSpent));
}

}
else{
isOpen = false;
//					btn_menu.startAnimation(animRotate(90.0f, 0.5f, 0.45f));
for(int i=0;i<btns.length;i++){
float xLenth=(float)(r*Math.sin(i*angle));
float yLenth=(float)(r*Math.cos(i*angle));
//						Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);
btns[i].startAnimation(animTranslate(-xLenth, yLenth, leftMargin, bottomMargins, btns[i], maxTimeSpent-i*intervalTimeSpent));
}
}

}
});

}
private Animation animScale(float toX, float toY){
// TODO Auto-generated method stub
Animation animation = new ScaleAnimation(1.0f, toX, 1.0f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setInterpolator(context, anim.accelerate_decelerate_interpolator);
animation.setDuration(400);
animation.setFillAfter(false);
return animation;

}

private Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue){
// TODO Auto-generated method stub
final Animation animation = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);
animation.setAnimationListener(new AnimationListener(){

@Override
public void onAnimationStart(Animation animation){
// TODO Auto-generated method stub

}

@Override
public void onAnimationRepeat(Animation animation){
// TODO Auto-generated method stub

}

@Override
public void onAnimationEnd(Animation animation){
// TODO Auto-generated method stub
animation.setFillAfter(true);
}
});
return animation;
}

private Animation animTranslate(float toX, float toY, final int lastX, final int lastY,
final Button button, long durationMillis){
// TODO Auto-generated method stub
Animation animation = new TranslateAnimation(0, toX, 0, toY);
animation.setAnimationListener(new AnimationListener(){

@Override
public void onAnimationStart(Animation animation){
// TODO Auto-generated method stub

}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationEnd(Animation animation){
// TODO Auto-generated method stub
params = new RelativeLayout.LayoutParams(0, 0);
params.height = buttonWidth;
params.width = buttonWidth;
params.setMargins(lastX, lastY, 0, 0);
button.setLayoutParams(params);
button.clearAnimation();

}
});
animation.setDuration(durationMillis);
return animation;
}

View.OnClickListener clickListener=new View.OnClickListener(){

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
int selectedItem=Integer.parseInt((String)v.getTag());
for(int i=0;i<btns.length;i++){
if(i==selectedItem){
btns[i].startAnimation(animScale(2.0f, 2.0f));
}else{
btns[i].startAnimation(animScale(0.0f, 0.0f));
}
}
if(onButtonClickListener!=null){
onButtonClickListener.onButtonClick(v, selectedItem);
}
}

};

public boolean isOpen(){
return isOpen;
}

private OnButtonClickListener onButtonClickListener;
public interface OnButtonClickListener{
void onButtonClick(View v,int id);
}
public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener){
this.onButtonClickListener=onButtonClickListener;
}
}

布局anim_buttons.xml：

Xml代码







<?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="#FFF" 

    > 
    <Button
android:id="@+id/btn_sleep" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_sleep" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_thought" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_thought" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_music" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_music" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_place" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_place" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_with" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_with" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_camera" 

        android:layout_width="wrap_content"  

        android:layout_height="wrap_content" 

        android:background="@drawable/composer_camera" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        /> 
 
    <Button
android:id="@+id/btn_menu" 

        android:layout_width="58dip"  

        android:layout_height="58dip" 

        android:background="@drawable/friends_delete" 

        android:layout_alignParentLeft="true" 

        android:layout_alignParentBottom="true" 

        android:layout_marginLeft="10dip" 

        android:layout_marginBottom="10dip" 

    /> 
</RelativeLayout> 

<?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="#FFF"
>
<Button android:id="@+id/btn_sleep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_sleep"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_thought"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_thought"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_music"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_place"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_with"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_with"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_camera"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
/>

<Button android:id="@+id/btn_menu"
android:layout_width="58dip"
android:layout_height="58dip"
android:background="@drawable/friends_delete"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dip"
android:layout_marginBottom="10dip"
/>
</RelativeLayout>

用法：

Java代码







public void onCreate(Bundle savedInstanceState){ 

        super.onCreate(savedInstanceState); 

        setContentView(R.layout.main); 
         
        AnimButtons animButtons=(AnimButtons)findViewById(R.id.animButtons); 

        animButtons.setOnButtonClickListener(new AnimButtons.OnButtonClickListener() { 

             
            @Override 
            public void onButtonClick(View v,
int id) { 
                // TODO Auto-generated method stub 

                Log.i("tag", "id============="+id); 

            } 
        }); 
         
    } 

public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

AnimButtons animButtons=(AnimButtons)findViewById(R.id.animButtons);
animButtons.setOnButtonClickListener(new AnimButtons.OnButtonClickListener() {

@Override
public void onButtonClick(View v, int id) {
// TODO Auto-generated method stub
Log.i("tag", "id============="+id);
}
});

}

 

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:orientation="vertical"
> 
 
    <TextView 

        android:layout_width="fill_parent" 

        android:layout_height="wrap_content" 

        android:text="@string/hello"
/> 
<!--  layout_width，layout_height最好是fill_parent参数 --> 

    <com.ql.view.AnimButtons 

        android:id="@+id/animButtons" 

        android:layout_width="fill_parent" 

        android:layout_height="fill_parent" 

        /> 
</LinearLayout> 

<?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:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<!--  layout_width，layout_height最好是fill_parent参数 -->
<com.ql.view.AnimButtons
android:id="@+id/animButtons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>