Эффект размытия, как в приложении Etsy?

Ответ 1

Вот несколько частей:

1. Создание размытого растрового изображения:

Мы создаем уменьшенное растровое изображение из представления содержимого за выдвижным ящиком при первом открытии ящика (уменьшение масштаба делает размытие быстрым). Затем мы применяем размытие к уменьшенному изображению, используя RenderScript, где он доступен (даже быстрее). Для этого вы должны прочитать блог, уже упомянутый http://nicolaspomepuy.fr/?p=18 и проверить проект GlassActionBar для ссылочного кода https://github.com/ManuelPeinado/GlassActionBar.

Примечание: RenderScript теперь доступен в библиотеке поддержки... но он не может быть создан с помощью Gradle (на данный момент). Также есть проблемы с ScriptIntrinsicBlur на некоторых устройствах, особенно Nexus 10 - см. Роман Нурик объясняет

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.

Ответ 2

Взгляните на этот блог http://nicolaspomepuy.fr/?p=18

В основном вы создаете изображение размытия из оригинального. Я предполагаю, что в этом случае исходный создается с помощью метода getDrawingCache(), сначала вызывайте setDrawingCacheEnabled().