popupwindow实现炫酷动画UI

骑猪看日落 2024-02-17 16:07 78阅读 0赞

自定义弹窗按钮实现下过如下：动画多点，顺便加了点击有音乐效果

![Center][]

代码实现：MainActivity

package com.wsj.wsjdemo;
    
    
    import android.graphics.drawable.ColorDrawable;
    import android.media.AudioManager;
    import android.media.SoundPool;
    import android.os.Build;
    import android.os.Bundle;
    import android.annotation.SuppressLint;
    import android.annotation.TargetApi;
    import android.app.Activity;
    import android.view.Gravity;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup.LayoutParams;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationSet;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    import android.view.animation.Animation.AnimationListener;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.PopupWindow;
    import android.widget.Toast;
    
    public class MainActivity extends Activity implements OnClickListener{
    
    	private ImageView bt_add_main;
    	private SoundPool sp;// 声明一个SoundPool
    	private int music;// 定义一个整型用load（）；来设置suondIDf
    	private ImageView iv_createtask_center, iv_createproject_center,
    			iv_registration_center, iv_oa_center, iv_add_center;
    	private LinearLayout ll_createtask_center, ll_createproject_center,
    			ll_registration_center, ll_oa_center;
    	private PopupWindow menu;
    	private int y1, y2;// y1:新建弹出框中新建任务/新建项目的高度 y2:新建弹出框中签到/OA的高度
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		bt_add_main = (ImageView) findViewById(R.id.bt_add_main);
    		iv_createtask_center = (ImageView) findViewById(R.id.iv_createtask_center);
    		iv_createproject_center = (ImageView) findViewById(R.id.iv_createproject_center);
    		iv_registration_center = (ImageView) findViewById(R.id.iv_registration_center);
    		iv_oa_center = (ImageView) findViewById(R.id.iv_oa_center);
    
    		sp = new SoundPool(10, AudioManager.STREAM_SYSTEM, 5);// 第一个参数为同时播放数据流的最大个数，第二数据流类型，第三为声音质量
    		music = sp.load(this, R.raw.key_sound, 1); // 把你的声音素材放到res/raw里，第2个参数即为资源文件，第3个为音乐的优先级
    		
    		setListener();
    		
    		inipopmenu();
    	}
    	
    	private void setListener() {
    		// TODO Auto-generated method stub
    		bt_add_main.setOnClickListener(this);
    	}
    
    	@Override
    	public void onClick(View v) {
    		// TODO Auto-generated method stub
    		switch (v.getId()) {
    		case R.id.bt_add_main:
    			// 启动动画
    			sp.play(music, 1, 1, 0, 0, 1);// 播放音效
    			// 获取弹出框中两排按钮在屏幕上的高度
    			int[] locations1 = new int[2];
    			ll_createtask_center.getLocationOnScreen(locations1);
    			y1 = locations1[1];
    			int[] locations2 = new int[2];
    			ll_registration_center.getLocationOnScreen(locations2);
    			y2 = locations2[1];
    
    			// 显示新建弹出框
    			menu.showAtLocation(
    					MainActivity.this.findViewById(R.id.mainLayout),
    					Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);
    			rotate(iv_add_center);// 弹出框中最下方按钮添加旋转动画
    
    			// 弹出框中按钮弹出动画
    			tran(ll_createtask_center, y1, 0, true);
    			tran(ll_createproject_center, y1, 50, true);
    			tran(ll_registration_center, y2, 100, true);
    			tran(ll_oa_center, y2, 150, true);
    			break;
    			
    			//创建任务
    		case R.id.iv_createtask_center:
    			//Toast.makeText(this, "创建任务", 0).show();
    			//不能Toast，需要发送Handler，或者Intent跳转Activity
    			break;
    			//创建项目
    		case R.id.iv_createproject_center:
    			//Toast.makeText(this, "创建项目", 0).show();
    			break;
    			//签到
    		case R.id.iv_registration_center:
    			//Toast.makeText(this, "签到", 0).show();
    			break;
    			//表单
    		case R.id.iv_oa_center:
    			//Toast.makeText(this, "表单", 0).show();
    			break;
    		
    		default:
    			break;
    		}
    	}
    	/**
    	 * @方法名称:rotate
    	 * @描述: 旋转动画
    	 * @param view
    	 *            要添加动画的View
    	 * @返回类型：void
    	 */
    	public void rotate(View view) {
    		// 从0开始旋转360度，以图片中心为圆心旋转(0.5f,0.5f表示图片中心 1.0f,1.0f表示右下角0.0f,o.0f表示左上角)
    		RotateAnimation ra = new RotateAnimation(0, 135,
    				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
    				0.5f);
    		ra.setDuration(500);
    		// ra.setRepeatCount(1);
    		// ra.setRepeatMode(Animation.REVERSE);
    		ra.setFillAfter(true);
    		view.startAnimation(ra);
    	}
    	
    	/**
    	 * @方法名称:inipopmenu
    	 * @描述: 初始化新建弹出框
    	 * @返回类型：void
    	 */
    	@TargetApi(Build.VERSION_CODES.HONEYCOMB)
    	@SuppressLint("NewApi")
    	private void inipopmenu() {
    		// 初始化新建弹出框
    		View contentView = View.inflate(MainActivity.this,
    				R.layout.create_pop_menu, null);
    
    		/********************************************************************/
    		// 避免运行在Android 4.0上程序报空指针异常，原因是跟硬盘加速有关（？）
    		// contentView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    		/********************************************************************/
    		ll_createtask_center = (LinearLayout) contentView
    				.findViewById(R.id.ll_createtask_center);
    		ll_createproject_center = (LinearLayout) contentView
    				.findViewById(R.id.ll_createproject_center);
    		ll_registration_center = (LinearLayout) contentView
    				.findViewById(R.id.ll_registration_center);
    		ll_oa_center = (LinearLayout) contentView
    				.findViewById(R.id.ll_oa_center);
    		iv_createtask_center = (ImageView) contentView
    				.findViewById(R.id.iv_createtask_center);
    		iv_createproject_center = (ImageView) contentView
    				.findViewById(R.id.iv_createproject_center);
    		iv_registration_center = (ImageView) contentView
    				.findViewById(R.id.iv_registration_center);
    		iv_oa_center = (ImageView) contentView.findViewById(R.id.iv_oa_center);
    		iv_add_center = (ImageView) contentView
    				.findViewById(R.id.iv_add_center);
    
    		MyOnClickListener listener = new MyOnClickListener();
    		// 点击四个按钮其他位置隐藏弹出框
    		contentView.findViewById(R.id.pop_layout).setOnClickListener(listener);
    
    		// 弹出框最下方关闭按钮添加点击事件监听
    		iv_add_center.setOnClickListener(listener);
    
    		menu = new PopupWindow(contentView);
    		// PopUpWindow必须设置宽高，否则调用showAtLocation方法无法显示
    		// 设置SelectPicPopupWindow弹出窗体的宽
    		menu.setWidth(LayoutParams.MATCH_PARENT);
    		// 设置SelectPicPopupWindow弹出窗体的高
    		menu.setHeight(LayoutParams.MATCH_PARENT);
    		// 设置SelectPicPopupWindow弹出窗体可点击
    		menu.setFocusable(true);
    		// 实例化一个ColorDrawable颜色为半透明
    		ColorDrawable dw = new ColorDrawable(0x80000000);
    		// 设置SelectPicPopupWindow弹出窗体的背景
    		menu.setBackgroundDrawable(dw);
    	}
    	
    	
    	/**
    	 * @类名称: MyOnClickListener
    	 * @类描述: 自定义点击事件监听
    	 */
    	class MyOnClickListener implements OnClickListener {
    
    		@Override
    		public void onClick(View v) {
    			sp.play(music, 1, 1, 0, 0, 1);// 播放音效
    			reRotate(iv_add_center);// 按钮反向旋转动画
    
    			// 弹出框隐藏动画
    			retran(ll_oa_center, y2, 0, false);
    			retran(ll_registration_center, y2, 50, false);
    			retran(ll_createproject_center, y1, 100, false);
    			retran(ll_createtask_center, y1, 150, false);
    		}
    	}
    	
    	
    	/**
    	 * @方法名称:reRotate
    	 * @描述: 反方向旋转动画
    	 * @param view
    	 *            要添加反方向旋转动画的View
    	 * @返回类型：void
    	 */
    	public void reRotate(View view) {
    		// 从0开始旋转360度，以图片中心为圆心旋转(0.5f,0.5f表示图片中心 1.0f,1.0f表示右下角0.0f,o.0f表示左上角)
    		RotateAnimation ra = new RotateAnimation(135, 0,
    				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
    				0.5f);
    		ra.setDuration(500);
    		// ra.setRepeatCount(1);//重复次数
    		// ra.setRepeatMode(Animation.REVERSE);//是否反方向执行
    		ra.setFillAfter(true);
    		ra.setAnimationListener(new AnimationListener() {
    
    			@Override
    			public void onAnimationStart(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationRepeat(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationEnd(Animation animation) {
    				// 最后一个执行完动画之后执行的代码
    				if (menu != null && menu.isShowing()) {
    					menu.dismiss();
    				}
    			}
    		});
    		view.startAnimation(ra);
    	}
    	
    	
    	/**
    	 * @方法名称:retran
    	 * @描述: 回弹动画
    	 * @param view
    	 *            执行动画的控件
    	 * @param y
    	 *            移动的距离
    	 * @param start
    	 *            开始执行动画的时间
    	 * @param flag
    	 *            标识执行的是弹出的动画还是隐藏的动画 true标识弹出动画
    	 * @返回类型：void
    	 */
    	private void retran(final View view, final int y, final int start,
    			final boolean flag) {
    		TranslateAnimation animation;
    		if (flag) {
    			animation = new TranslateAnimation(0, 0, -DensityUtil.dip2px(
    					getApplicationContext(), 50), 0);
    		} else {
    			animation = new TranslateAnimation(0, 0, 0, -DensityUtil.dip2px(
    					getApplicationContext(), 50));
    		}
    		animation.setDuration(150);
    		animation.setFillAfter(true);
    		animation.setAnimationListener(new AnimationListener() {
    
    			@Override
    			public void onAnimationStart(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationRepeat(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationEnd(Animation animation) {
    				if (flag) {
    					view.setVisibility(View.VISIBLE);
    					scaleAndAlpha(iv_createproject_center);
    					scaleAndAlpha(iv_createtask_center);
    					scaleAndAlpha(iv_oa_center);
    					scaleAndAlpha(iv_registration_center);
    				} else {
    					tran(view, y, start, flag);
    				}
    			}
    		});
    		view.startAnimation(animation);
    	}
    	
    	
    	private void scaleAndAlpha(final View view) {
    
    		AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1.0f);
    		alphaAnimation.setDuration(100);
    		alphaAnimation.setFillAfter(true);
    
    		ScaleAnimation animation = new ScaleAnimation(0f, 1.1f, 0f, 1.1f,
    				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
    				0.5f);
    		animation.setDuration(200);
    		animation.setFillAfter(true);
    
    		AnimationSet set = new AnimationSet(false);
    		set.addAnimation(alphaAnimation);
    		set.addAnimation(animation);
    
    		set.setAnimationListener(new AnimationListener() {
    
    			@Override
    			public void onAnimationStart(Animation animation) {
    
    			}
    
    			@Override
    			public void onAnimationRepeat(Animation animation) {
    
    			}
    
    			@Override
    			public void onAnimationEnd(Animation animation) {
    				reScale(view);
    			}
    		});
    		view.startAnimation(set);
    	}
    
    	private void reScale(View view) {
    		ScaleAnimation animation = new ScaleAnimation(1.1f, 1.0f, 1.1f, 1.0f,
    				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
    				0.5f);
    		animation.setDuration(100);
    		animation.setFillAfter(true);
    		view.startAnimation(animation);
    	}
    	
    	
    	/**
    	 * @方法名称:tran
    	 * @描述: 显示弹出框时执行的动画
    	 * @param view
    	 *            要执行动画的View
    	 * @param y
    	 *            执行动画的View的高
    	 * @param start
    	 *            执行动画的开始时间
    	 * @返回类型：void
    	 */
    	private void tran(final View view, final int y, final int start,
    			final boolean flag) {
    		int heightPixels = getResources().getDisplayMetrics().heightPixels;
    		TranslateAnimation animation;
    		if (flag) {
    			animation = new TranslateAnimation(0, 0, heightPixels - y,
    					-DensityUtil.dip2px(getApplicationContext(), 50));
    		} else {
    			animation = new TranslateAnimation(0, 0, -DensityUtil.dip2px(
    					getApplicationContext(), 50), heightPixels - y);
    		}
    		animation.setStartOffset(start);
    		animation.setDuration(150);
    		animation.setFillAfter(true);
    		animation.setAnimationListener(new AnimationListener() {
    
    			@Override
    			public void onAnimationStart(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationRepeat(Animation animation) {
    			}
    
    			@Override
    			public void onAnimationEnd(Animation animation) {
    				if (flag) {
    					retran(view, y, start, flag);
    				}
    			}
    		});
    		view.startAnimation(animation);
    	}
    
    
    	
    
    }

自定义popupwindow文件create\_pop\_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pop_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@drawable/center_background"
            android:orientation="horizontal" >
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="160dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical" >
    
                <LinearLayout
                    android:id="@+id/ll_createtask_center"
                    android:layout_width="70dp"
                    android:layout_height="98dp"
                    android:layout_marginTop="50dp"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:visibility="invisible" >
    
                    <LinearLayout
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:background="@drawable/ll_createtask"
                        android:gravity="center" >
    
                        <ImageView
                            android:id="@+id/iv_createtask_center"
                            android:layout_width="54dp"
                            android:layout_height="32dp"
                            android:onClick="onTabClicked"
                            android:src="@drawable/iv_createtask"
                            android:visibility="invisible" />
    
                    </LinearLayout>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="创建任务"
                        android:textColor="#888888" />
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/ll_registration_center"
                    android:layout_width="70dp"
                    android:layout_height="98dp"
                    android:layout_marginTop="20dp"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:visibility="invisible" >
    
                    <LinearLayout
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:background="@drawable/ll_registration"
                        android:gravity="center" >
    
                        <ImageView
                            android:id="@+id/iv_registration_center"
                            android:layout_width="54dp"
                            android:layout_height="32dp"
                            android:onClick="onTabClicked"
                            android:src="@drawable/iv_registration"
                            android:visibility="invisible" />
    
                    </LinearLayout>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="签到"
                        android:textColor="#888888" />
                </LinearLayout>
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="160dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:onClick="onTabClicked"
                android:orientation="vertical" >
    
                <LinearLayout
                    android:id="@+id/ll_createproject_center"
                    android:layout_width="70dp"
                    android:layout_height="98dp"
                    android:layout_marginTop="50dp"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:visibility="invisible" >
    
                    <LinearLayout
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:background="@drawable/ll_createproject"
                        android:gravity="center" >
    
                        <ImageView
                            android:id="@+id/iv_createproject_center"
                            android:layout_width="54dp"
                            android:layout_height="32dp"
                    android:onClick="onTabClicked"
                            android:src="@drawable/iv_createproject"
                            android:visibility="invisible" />
                    </LinearLayout>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="创建项目"
                        android:textColor="#888888" />
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/ll_oa_center"
                    android:layout_width="70dp"
                    android:layout_height="98dp"
                    android:layout_marginTop="20dp"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:visibility="invisible" >
    
                    <LinearLayout
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:background="@drawable/ll_oa"
                        android:gravity="center" >
    
                        <ImageView
                            android:id="@+id/iv_oa_center"
                            android:layout_width="54dp"
                            android:layout_height="32dp"
                            android:onClick="onTabClicked"
                            android:src="@drawable/iv_oa"
                            android:visibility="invisible" />
    
                    </LinearLayout>
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="表单"
                        android:textColor="#888888" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/ll_add_center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:gravity="center" >
    
            <ImageView
                android:id="@+id/iv_add_center"
                android:layout_width="wrap_content"
                android:layout_height="52dp"
                android:src="@drawable/add_tabbar" />
        </LinearLayout>
    
    </LinearLayout>

activity\_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mainLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#F1F1F1" >
    
        <LinearLayout
            android:id="@+id/main_bottom"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/tabbar"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
    
            
    
            <RelativeLayout
                android:id="@+id/btn_container_conversation"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >
    
                <ImageView
                    android:id="@+id/bt_message_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="true"
                    android:onClick="onTabClicked"
                    android:src="@drawable/message_tabbar" />
    
                
                
                
                
                
                
                
                
                
                
                
                
                
    
    
                
                
                
                
                
                
                
                
                
                
                
                
            </RelativeLayout>
    
            <RelativeLayout
                android:id="@+id/btn_container_address_list"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >
    
                <ImageView
                    android:id="@+id/bt_taskcenter_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="true"
                    android:onClick="onTabClicked"
                    android:src="@drawable/task_tabbar" />
    
                
                
                
                
                
                
                
                
                
                
                
                
                
    
    
                
                
                
                
                
                
                
                
                
                
                
                
            </RelativeLayout>
    
            <RelativeLayout
                android:id="@+id/btn_add_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >
    
                <ImageView
                    android:id="@+id/bt_add_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="true"
                    android:onClick="onTabClicked"
                    android:src="@drawable/add_tabbar" />
            </RelativeLayout>
    
            <RelativeLayout
                android:id="@+id/btn_message_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >
    
                <ImageView
                    android:id="@+id/bt_addressbook_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="true"
                    android:onClick="onTabClicked"
                    android:src="@drawable/addressbook_tabbar" />
                
                
                
                
                
                
                
                
                
                
                
                
                
            </RelativeLayout>
    
            <RelativeLayout
                android:id="@+id/btn_container_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" >
    
                <ImageView
                    android:id="@+id/bt_mycenter_main"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clickable="true"
                    android:onClick="onTabClicked"
                    android:src="@drawable/my_tabbar" />
    
                
                
                
                
                
                
                
                
                
                
                
                
                
            </RelativeLayout>
        </LinearLayout>
    
        <RelativeLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/main_bottom" />
    
    </RelativeLayout>

[点击源码下载][Link 1]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/0de41adea5b94f5287b96122989f6e37.png
[Link 1]: http://download.csdn.net/detail/onceing/9000499