android - 像应用程序 Etsy 中的模糊效果？

Question

已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。

---

要求代码的问题必须表明对正在解决的问题的最低理解。包括尝试的解决方案、它们为什么不起作用以及预期结果。另见:Stack Overflow question checklist

关闭 8 年前。

Improve this question

在这几周内Android Design in Action episode , Adam Koch 谈到了一个名为 Etsy 的应用程序。 ，它具有这种非常酷的模糊效果，当抽屉导航被拉出时，它会应用于主布局。

有谁知道 Etsy 背后的开发者是如何实现这一点的？

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

Answer 1

这有几个部分:

1.创建模糊位图:

当抽屉第一次打开时，我们从抽屉后面的内容 View 创建一个缩小的位图(缩小使模糊速度更快)。然后，我们在可用的情况下(甚至更快)使用 RenderScript 将模糊应用于缩小的图像。为此，您应该阅读已经提到的博客 http://nicolaspomepuy.fr/?p=18并查看 GlassActionBar 项目以获取引用代码 https://github.com/ManuelPeinado/GlassActionBar .

注意: RenderScript is now available in the support library ...但它不能使用 Gradle 构建(目前)。 ScriptIntrinsicBlur 也有问题在某些设备上，尤其是 Nexus 10 - 见 Roman Nurik's explanation

2.显示和动画模糊:

我们的抽屉导航布局包含一个隐藏在内容顶部的 ImageView。

<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" />

在 Activity 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所以我们可以 setAlpha() pre-honeycomb。