Android 毛玻璃效果弹出菜单动画

来源:互联网 发布:windows md文件编辑器 编辑:程序博客网 时间:2024/03/29 00:43

仿ios上屏幕下方向上滑出来的一个模糊菜单,效果如下


原理很简单,页面上原来有一个gone的framelayout,调用方法让它弹出的时候加了一个位移动画,让它从底部出来,出来的时候给这个framelayout里的一个imageView设置一个模糊后的截屏图片,并且这个图片也加一个相同时间的反方向位移动画,这个demo里用到的Blur模糊类和自定义imageView可以去我前两篇博客上找到.

这里面用的控件的大小等全部是动态计算的,不必担心屏幕适配的问题


activity的布局如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/window"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.npi.blureffect.DialogActivity" >    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" />     <RatingBar        android:id="@+id/ratingBar1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/textView1"        android:layout_below="@+id/textView1"        android:layout_marginTop="124dp" />    <Switch        android:id="@+id/switch1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/ratingBar1"        android:layout_below="@+id/ratingBar1"        android:layout_marginLeft="24dp"        android:layout_marginTop="81dp"        android:text="Switch" />    <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignRight="@+id/ratingBar1"        android:layout_below="@+id/ratingBar1"        android:text="Button" />    <Button        android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignBottom="@+id/ratingBar1"        android:layout_alignLeft="@+id/switch1"        android:layout_marginBottom="52dp"        android:text="Button" />    <TextView        android:id="@+id/textView2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignBottom="@+id/button1"        android:layout_alignLeft="@+id/ratingBar1"        android:text="Large Text"        android:textAppearance="?android:attr/textAppearanceLarge" />    <ProgressBar        android:id="@+id/progressBar1"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="49dp"        android:layout_toLeftOf="@+id/button1" />    <ProgressBar        android:id="@+id/progressBar2"        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/switch1"        android:layout_toRightOf="@+id/switch1" />    <RadioButton        android:id="@+id/radioButton1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@+id/progressBar1"        android:layout_alignLeft="@+id/switch1"        android:text="RadioButton" />    <Button        android:id="@+id/button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/progressBar2"        android:layout_below="@+id/progressBar2"        android:text="Button" />    <FrameLayout        android:id="@+id/bottom_menu"        android:layout_width="wrap_content"        android:layout_height="200dp"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:layout_alignParentRight="true"        android:background="#eeeeee"        android:visibility="gone" >        <com.npi.blureffect.ScrollableImageView            android:id="@+id/bottom_back"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/abs__ab_share_pack_holo_light" />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/abs__ic_voice_search" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/abs__ic_voice_search" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/abs__ic_voice_search" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/abs__ic_voice_search" />        </LinearLayout>    </FrameLayout>    <ImageView        android:id="@+id/background"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#fff"        android:visibility="gone" /></RelativeLayout>



activity如下

package com.npi.blureffect;import java.util.TimerTask;import android.app.Activity;import android.graphics.Bitmap;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.PopupWindow;import android.widget.RelativeLayout;import android.widget.TextView;public class DialogActivity extends Activity {TextView textView1;RelativeLayout window;ImageView background;FrameLayout bottomMenu;Button button2;Button button1;ScrollableImageView bottomBack;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_dialog);textView1 = (TextView) findViewById(R.id.textView1);window = (RelativeLayout)findViewById(R.id.window);background = (ImageView) findViewById(R.id.background);bottomMenu = (FrameLayout) findViewById(R.id.bottom_menu);button2 = (Button) findViewById(R.id.button2);bottomBack = (ScrollableImageView) findViewById(R.id.bottom_back);button1 = (Button) findViewById(R.id.button1);button2.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubshowBottomMenu(window,500);}});button1.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubhideBottomMenu(window, 500);}});}     public void showBottomMenu(View layout,final int duration){ //对当前页面进行截屏 layout.setDrawingCacheEnabled(true);   layout.buildDrawingCache();  //启用DrawingCache并创建位图   Bitmap screen = Bitmap.createBitmap(layout.getDrawingCache()); //创建一个DrawingCache的拷贝,因为DrawingCache得到的位图在禁用后会被回收   layout.setDrawingCacheEnabled(false);  //禁用DrawingCahce否则会影响性能        //将截屏进行模糊 screen = Blur.fastblur(this, screen, 10); bottomBack.setoriginalImage(screen);     bottomMenu.setAlpha(0);//在动画开启之后再可见,否则会有残影   bottomMenu.setVisibility(View.VISIBLE);   bottomMenu.post(new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubAnimation animation = new TranslateAnimation(0, 0, bottomMenu.getHeight(), 0);//这里弹出框的高度的dp需要事先写死bottomBack.handleScroll(bottomBack.getOriginalImage().getHeight()-bottomMenu.getHeight(), 0);Animation backgroundAnimation = new TranslateAnimation(0,0,-bottomBack.getHeight(),0);backgroundAnimation.setDuration(duration);bottomBack.startAnimation(backgroundAnimation);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {// TODO Auto-generated method stubbottomMenu.setAlpha(255);}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation) {// TODO Auto-generated method stub}});animation.setDuration(duration);bottomMenu.startAnimation(animation);}});   }         public void hideBottomMenu(View layout,final int duration){ //对当前页面进行截屏 layout.setDrawingCacheEnabled(true);   layout.buildDrawingCache();  //启用DrawingCache并创建位图   Bitmap screen = Bitmap.createBitmap(layout.getDrawingCache()); //创建一个DrawingCache的拷贝,因为DrawingCache得到的位图在禁用后会被回收   layout.setDrawingCacheEnabled(false);  //禁用DrawingCahce否则会影响性能        //将截屏进行模糊 screen = Blur.fastblur(this, screen, 10); bottomBack.setoriginalImage(screen);        bottomMenu.post(new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubAnimation animation = new TranslateAnimation(0, 0, 0, +bottomMenu.getHeight());//这里弹出框的高度的dp需要事先写死bottomBack.handleScroll(bottomBack.getOriginalImage().getHeight()-bottomMenu.getHeight(), 0);Animation backgroundAnimation = new TranslateAnimation(0,0,0,-bottomBack.getHeight());backgroundAnimation.setDuration(duration);bottomBack.startAnimation(backgroundAnimation);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {// TODO Auto-generated method stubbottomMenu.setAlpha(255);}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation) {// TODO Auto-generated method stubbottomMenu.setVisibility(View.GONE);}});animation.setDuration(duration);bottomMenu.startAnimation(animation);}});   }   }


0 0
原创粉丝点击