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

本文实例为大家分享了Android实现毛玻璃效果弹出菜单动画的具体代码,供大家参考,具体内容如下

仿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;
    @Override
    protected 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() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                showBottomMenu(window,500);
            }
        });
        button1.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                hideBottomMenu(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() {
        
        @Override
        public void run() {
            // TODO Auto-generated method stub
            Animation 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() {
                
                @Override
                public void onAnimationStart(Animation animation) {
                    // TODO Auto-generated method stub
                    bottomMenu.setAlpha(255);
                }
                
                @Override
                public void onAnimationRepeat(Animation animation) {
                    // TODO Auto-generated method stub
                    
                }
                
                @Override
                public 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() {
            
            @Override
            public void run() {
                // TODO Auto-generated method stub
                Animation 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() {
                    
                    @Override
                    public void onAnimationStart(Animation animation) {
                        // TODO Auto-generated method stub
                        bottomMenu.setAlpha(255);
                    }
                    
                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        // TODO Auto-generated method stub
                        
                    }
                    
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        // TODO Auto-generated method stub
                        bottomMenu.setVisibility(View.GONE);
                    }
                });
                animation.setDuration(duration);
                bottomMenu.startAnimation(animation);
            }
        });
       }
   
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android动画系列之帧动画和补间动画的示例代码

    Android 提供三种动画:帧动画.补间动画和属性动画,本篇文章介绍帧动画以及补间动画的使用,属性动画的使用将在后面的文章中分享,那就来复习一下这两种动画的使用吧. FrameAnimation FrameAnimation 即逐帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建 FrameAnimation 可用 xml 定义也可直接使用代码创建. xml创建帧动画 在 res/drawable 文件夹下创建一个 drawable 文件,使用 animation-list 标签,具

  • Android Studio实现补间动画

    本文实例为大家分享了Android Studio实现补间动画的具体代码,供大家参考,具体内容如下 补间动画是给出初始位置和结束位置,中间由系统自动补充的动画 1.补间动画的配置文件:scale.xml 2.布局文件:animal_patching.xml 3.main.java sacle.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schem

  • Android Flutter绘制有趣的 loading加载动画

    目录 前言 效果1:圆环内滚动的球 效果2:双轨运动 效果3:钟摆运动 总结 前言 在网络速度较慢的场景,一个有趣的加载会提高用户的耐心和对 App 的好感,有些 loading 动效甚至会让用户有想弄清楚整个动效过程到底是怎么样的冲动.然而,大部分的 App的 loading 就是下面这种千篇一律的效果 —— 俗称“转圈”. 本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果. 效果1:圆环内滚动的球 如上图所示,一个红色的小球在蓝色的圆环内滚动,而且在往

  • Android补间动画基本使用(位移、缩放、旋转、透明)

    本文讲述了Android补间动画基本使用(位移.缩放.旋转.透明).分享给大家供大家参考,具体如下: 补间动画 原形态变成新形态时为了过渡变形过程,生成的动画就叫补间动画 位移.旋转.缩放.透明 位移: 参数10指的是X的起点坐标,但不是指屏幕x坐标为10的位置,而是imageview的 真实X + 10 参数150指的是X的终点坐标,它的值是imageview的 真实X + 150 //创建为位移动画对象,设置动画的初始位置和结束位置 TranslateAnimation ta = new T

  • Android 补间动画及组合AnimationSet常用方法详解

    目录 补间动画 RotateAnimation 动画示例 ScaleAnimation 动画示例 TranslateAnimation 动画示例 AlphaAnimation 动画示例 AnimationSet 动画组合 动画示例 补间动画 Android常用的四种补间动画分别为RotateAnimation.ScaleAnimation.TranslateAnimation.AlphaAnimation,他们的父类为Animation,UML类图如下: 父类通用方法有: public void

  • Android实现多张图片合成加载动画

    本文实例为大家分享了Android实现多张图片合成加载动画的具体代码,供大家参考,具体内容如下 1.自定义ProgressDialog public class MyProgressDialog extends ProgressDialog {     private int procressLoadRes;     private ImageView mImageView;     private AnimationDrawable animationDrawable;     public

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

    本文实例为大家分享了Android实现毛玻璃效果弹出菜单动画的具体代码,供大家参考,具体内容如下 仿ios上屏幕下方向上滑出来的一个模糊菜单,效果如下 原理很简单,页面上原来有一个gone的framelayout,调用方法让它弹出的时候加了一个位移动画,让它从底部出来,出来的时候给这个framelayout里的一个imageView设置一个模糊后的截屏图片,并且这个图片也加一个相同时间的反方向位移动画,这个demo里用到的Blur模糊类和自定义imageView可以去我前两篇博客上找到. 这里面

  • Android ListView长按弹出菜单二种实现方式示例

    复制代码 代码如下: /** * 知识点1:ListView item:两种长按弹出菜单方式* 知识点2:ListView SimpleAdapter的使用* 知识点 3:在java代码中创建一个ListView*/ public class ListOnLongClickActivity extends Activity {         private LinearLayout myListViewlayout;         private ListView mListView;   

  • 微信小程序实现弹出菜单动画

    微信小程序动画之弹出菜单,供大家参考,具体内容如下 效果图 js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData(

  • Android实现底部缓慢弹出菜单

    项目要求要做一个从底部缓慢弹出一个Button Menu 开始编码: MyselfFragment package io.dcloud.H5B79C397.fragment; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.view.LayoutInflater; import androi

  • Android PopupWindow实现右侧、左侧和底部弹出菜单

    本教程为大家分享了Android PopupWindow弹出菜单的具体代码,供大家参考,具体内容如下 项目代码:http://xiazai.jb51.net/201611/yuanma/PopupLeftMenu(jb51.net).rar 项目SDK是5.1,建议将代码拷到自己的工程中去 代码如下: MainActivity类: package com.example.popupleftmenu; import android.app.Activity; import android.cont

  • Android 带有弹出收缩动画的扇形菜单实例

    最近试着做了个Android 带有弹出收缩动画的扇形菜单,留个笔记记录一下. 效果如下 public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ImageView imgPublish; private TextView textView1; private TextView textView2; private boolean isMenuOpen = false

  • Android仿网易严选底部弹出菜单效果

    在网易严选的看东西的时候在商品详情页里看到他的底部弹出菜单,本能反应是想用DottomSheetDialog或者PopupWindow来实现,可是发现实现不了他那种效果,于是就自己模仿一个像严选这样的底部弹出菜单. 不管是DottomSheetDialog或者PopupWindow他们的阴影背景都是全部覆盖的,这就造成除了菜单内容的View之外其他都是阴影的,而严选不是这样的.唠叨到此,首先展示效果图如下: 是不是还可以呢,由于代码量不多却注释详细,所以先贴出代码再一一详说: BottomPop

  • 简单实现Android弹出菜单效果

    本文实例为大家分享了Android弹出菜单效果的具体代码,供大家参考,具体内容如下 功能描述:用户单击按钮弹出菜单.当用户选择一个菜单项,会触发MenuItemClick事件并让弹出的菜单消失:如果用户在菜单外单击,则直接消失弹出的菜单.当菜单消失时,会引发DismissEvent事件(利用此事件可在菜单消失时做一些后续处理). 1.运行效果 2.添加菜单项 在Resources文件夹下添加一个menu子文件夹,然后在此子文件夹下添加一个名为demo07_popup_menu.xml的文件: <

  • Android 中从屏幕左下角弹出Dialog动画效果的实现代码

    MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi

  • Android自定义PopWindow实现QQ、微信弹出菜单效果

    前段时间在个人开发的项目中需要用到弹出菜单,类似QQ右上角的弹出菜单,自己使用popwin的次数也不是很多,其中也遇到过一点问题,今天正好有时间就把一些经验分享给大家. 先来看看最终实现过后的效果怎么样,下面放上图 自定义的弹出菜单是继承的popwin,并不是view 因为没有必要重复造车轮,如果想要实现某种特殊的效果另说.首先创建类MyPopWindow继承Popwindow. public class MyPopWindow extends PopupWindow implements Vi

随机推荐