像应用程序Etsy中的模糊效果?

  发布于 2023-02-13 22:59

在本周的Android Design in Action插曲中,Adam Koch谈到了一款名为Etsy的应用程序,该应用程序在导航抽屉拉出时应用于主要布局时具有非常酷的模糊效果.

有谁知道Etsy背后的开发者可能会如何实现这一点?

在这里观看:http://youtu.be/GjUxEddmjFw?t = 22m48s

在此输入图像描述 在此输入图像描述

1 个回答
  • 这有几个部分:

    1.创建模糊位图:

    当抽屉首次打开时,我们从抽屉后面的内容视图创建一个缩小尺寸的位图(缩小使模糊变快).然后我们使用RenderScript将模糊应用于缩小尺寸的图像(更快).为此,您应该阅读已经提到的博客http://nicolaspomepuy.fr/?p=18并查看GlassActionBar项目以获取参考代码https://github.com/ManuelPeinado/GlassActionBar.

    注意: RenderScript现在可以在支持库中使用 ...但是无法使用Gradle(现在)构建它.在某些设备上也存在ScriptIntrinsicBlur的问题,尤其是Nexus 10 - 请参阅Roman Nurik的解释

    2.展示和动画模糊:

    我们的导航抽屉布局包含一个位于内容之上的隐藏ImageView.

    <FrameLayout
        android:id="@+id/nav_content_frame"
        android:layout_
        android:layout_ />
    
    <!-- our blur image -->
    <ImageView
        android:id="@+id/blur_image"
        android:layout_
        android:layout_
        android:scaleType="centerCrop"
        android:visibility="gone" />
    

    在Activities onCreate()中,您需要获取对此ImageView的引用并设置自定义抽屉侦听器:

    mBlurImage = (ImageView) findViewById(R.id.blur_image);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.nav_drawer_layout);
    
    mDrawerToggle = new EtsyNavActionBarDrawerToggle(
                this, 
                mDrawerLayout,
                R.drawable.ic_drawer, 
                R.string.nav_drawer_open, 
                R.string.nav_drawer_closed);
    
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    

    我们的抽屉有自定义的稀松布颜色(这是覆盖颜色)而不是默认的透明黑色.这也隐藏了模糊图像在缩小图像上的事实.

    mDrawerLayout.setScrimColor(getResources().getColor(R.color.background_main_v2_glass));
    

    抽屉听众设置,清除和动画模糊图像:

    private class EtsyNavActionBarDrawerToggle extends ActionBarDrawerToggle {
    
        public EtsyNavActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout, 
                int drawerImageRes, int openDrawerContentDescRes, int closeDrawerContentDescRes) {
            super(activity, drawerLayout, drawerImageRes, openDrawerContentDescRes, closeDrawerContentDescRes);
        }
    
        @Override
        public void onDrawerSlide(final View drawerView, final float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);
            if (slideOffset > 0.0f) {
                setBlurAlpha(slideOffset);
            }
            else {
                clearBlurImage();
            }
        }
    
        @Override
        public void onDrawerClosed(View view) {
            clearBlurImage();
        }
    
    }
    
    private void setBlurAlpha(float slideOffset) {
        if (mBlurImage.getVisibility() != View.VISIBLE) {
            setBlurImage();
        }
        ViewHelper.setAlpha(mBlurImage, slideOffset);
    }
    
    public void setBlurImage() {
        mBlurImage.setImageBitmap(null);
        mBlurImage.setVisibility(View.VISIBLE);
        Bitmap downScaled = ... // do the downscaling
        Bitmap blurred = ... // apply the blur
        mBlurImage.setImageBitmap(blurred);
    }
    
    public void clearBlurImage() {
        mBlurImage.setVisibility(View.GONE);
        mBlurImage.setImageBitmap(null);
    }
    

    最后,ViewHelper来自NineOldAndroids,因此我们可以设置alpha()预蜂窝.

    2023-02-13 23:14 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有