模糊效果就像在应用程序Etsy的？ [英] Blur effect like in the app Etsy?

问题描述

在这个星期 Android的设计在行动插曲，亚当·科赫谈到所谓的Etsy ，它的特点这非常酷的模糊效果应用到主布局时，导航抽屉拉出。

During this weeks Android Design in Action episode, Adam Koch talked about an app called Etsy, which featured this very cool blur effect applying to the main layout when the Navigation Drawer is pulled out.

有谁知道背后的Etsy的开发者可能已经实现了这一点？

Does anyone know how the devs behind Etsy might have implemented this?

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

推荐答案

有几个环节进行：

1。创建模糊的位图：的

我们创建的时候抽屉第一次打开（降尺度，使模糊快）抽屉后面的内容视图缩小位图。然后，我们用RenderScript应用模糊的缩小图像，其中可用的（甚至更快）。对于这一点，你应该阅读博客已经提到 http://nicolaspomepuy.fr/?p=18 并检出GlassActionBar项目参考code <一个href="https://github.com/ManuelPeinado/GlassActionBar">https://github.com/ManuelPeinado/GlassActionBar.

注意： <一个href="http://android-developers.blogspot.com/2013/09/renderscript-in-android-support-library.html">RenderScript现在在支持库可用...但它不能用摇篮（现在）建成。还有一些与<一个问题href="http://developer.android.com/reference/android/renderscript/ScriptIntrinsicBlur.html">ScriptIntrinsicBlur在某些设备特别是Nexus的10 - 见罗马Nurik的解释

We create a downscaled bitmap from the content view behind the drawer when the drawer is first opened (the downscaling makes the blur fast). Then we apply the blur to the downscaled image using RenderScript where available (even faster). For this you should read the blog already mentioned http://nicolaspomepuy.fr/?p=18 and checkout the GlassActionBar project for reference code https://github.com/ManuelPeinado/GlassActionBar.

Note: RenderScript is now available in the support library... but it can't be built using Gradle (for now). Also there are issues with ScriptIntrinsicBlur on some devices notably the Nexus 10 - see Roman Nurik's explanation

2。显示和放大器;动画模糊：的

我们的导航抽屉布局包含一个隐藏的ImageView，坐在上的内容之上。

Our nav drawer layout contains a hidden ImageView that sits on top of the content.

<FrameLayout
    android:id="@+id/nav_content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- our blur image -->
<ImageView
    android:id="@+id/blur_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:visibility="gone" />

在活动的onCreate（），你会想要抓住参考本的ImageView和设置自定义的抽屉监听器：

In the Activities onCreate() you'll want to grab a reference to this ImageView and setup a custom drawer listener:

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);

我们的抽屉定制网布的颜色（这是叠加的颜色），而不是默认的透明的黑色。这还隐藏的事实，即模糊图像是上一个缩小的图像。

Our drawer has custom scrim color (that's the overlay color) instead of the default transparent black. This also hides the fact that the blurred image is on a downscaled image.

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

抽屉监听器，设置，清除和动画的模糊图像：

The drawer listener which sets, clears and animates the blurred image:

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);
}

最后视图助手从 NineOldAndroids 所以我们可以setAlpha（）pre-蜂窝。

Lastly the ViewHelper is from NineOldAndroids so we can setAlpha() pre-honeycomb.

这篇关于模糊效果就像在应用程序Etsy的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！