android - samsung - Efecto de desenfoque como en la aplicación Etsy?

efecto bokeh app

Question

Durante esta semana, el episodio de Diseño en acción de Android , Adam Koch habló sobre una aplicación llamada Etsy , que presentaba este efecto de desenfoque tan genial que se aplica al diseño principal cuando se saca el panel de navegación.

¿Alguien sabe cómo los desarrolladores detrás de Etsy podrían haber implementado esto?

Míralo aquí: http://youtu.be/GjUxEddmjFw?t=22m48s

Answer 1

Echa un vistazo a este blog http://nicolaspomepuy.fr/?p=18

Básicamente generas una imagen borrosa desde la original. Supongo que en este caso el original se genera usando el método getDrawingCache() , asegúrese de llamar a setDrawingCacheEnabled() primero.

Answer 2

Hay algunas partes de esto:

1. Creando el mapa de bits borroso:

Creamos un mapa de bits reducido desde la vista de contenido detrás del cajón cuando el cajón se abre por primera vez (la reducción hace que el desenfoque sea rápido). A continuación, aplicamos el desenfoque a la imagen reducida usando RenderScript cuando esté disponible (incluso más rápido). Para esto deberías leer el blog ya mencionado http://nicolaspomepuy.fr/?p=18 y verificar el proyecto GlassActionBar para obtener el código de referencia https://github.com/ManuelPeinado/GlassActionBar .

Nota: RenderScript ahora está disponible en la biblioteca de soporte ... pero no se puede construir usando Gradle (por ahora). También hay problemas con ScriptIntrinsicBlur en algunos dispositivos, especialmente el Nexus 10 - vea la explicación de Roman Nurik

2. Mostrar y animar el desenfoque:

Nuestro diseño de cajón de navegación contiene un ImageView oculto que se encuentra en la parte superior del contenido.

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

En Actividades en Crear () querrá obtener una referencia a este ImageView y configurar un oyente de cajón personalizado:

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

Nuestro cajón tiene un color personalizado (es el color de superposición) en lugar del negro transparente predeterminado. Esto también oculta el hecho de que la imagen borrosa está en una imagen reducida.

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

El oyente del cajón que establece, borra y anima la imagen borrosa:

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

Por último, el ViewHelper es de NineOldAndroids por lo que podemos configurar Álfa () antes del panal.