para - programacion android pdf 2018

ImageView con esquinas redondeadas y sombra interior.

Question

Necesito hacer una vista en miniatura con esquinas redondeadas y sombra interior. Por lo general, estoy haciendo marcos de ImageView con 9 parches, que me han servido bien hasta ahora, pero esta vez el efecto que necesito requiere dibujar la sombra interior sobre la imagen (y no solo alrededor). Esto me llevó a extender la clase ImageView y anular el método onDraw ().

public class ThumbnailImageView extends ImageView {

Después de muchos tutoriales (gracias a StackOverflow!), Terminé con este código para el método onDraw ():

@Override
protected void onDraw(Canvas canvas) {
    if (mBitmap == null) {
        return;
    }

    int radius = 4;
    int padding = 2;
    int bleed = 2;
    RectF frame = new RectF(padding, padding, getWidth() - padding, getHeight() - padding);

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(0xFF000000);
    canvas.drawRoundRect(frame, radius, radius, mPaint);

    Shader bitmapShader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(0xFF000000);
    mPaint.setMaskFilter(new BlurMaskFilter(bleed, Blur.INNER));
    mPaint.setShader(bitmapShader);
    canvas.drawRoundRect(frame, radius, radius, mPaint);
}

Básicamente, lo que estoy haciendo es dibujar primero un rectángulo negro redondeado y luego dibujar un mapa de bits de esquinas redondeadas con bordes difuminados (con el Filtrador de Filosofía) en la parte superior. El resultado es lo que quiero: El valor de mBitmap se inicializa en el constructor de ImageView de esta manera:

mDrawable = getDrawable();
if (mDrawable != null) {
    mBitmap = ((BitmapDrawable) mDrawable).getBitmap();
}

El problema es que estoy anulando OnDraw () completamente (no se llama super.onDraw ()), por lo que tengo que escalar previamente todas las imágenes al tamaño de miniatura deseado (p. Ej., 96x96) o bien, solo la esquina superior izquierda del la imagen esta dibujada Lo que quiero poder hacer es aprovechar toda la escala que está haciendo el marco cuando asigno los siguientes valores xml a ThumbnailImageView:

android:id="@+id/thumb"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"

Para hacer esto, pensé que debería llamar super.onDraw () mientras obtenía los efectos que necesito al mismo tiempo. Me las arreglé para obtener el rectángulo redondeado agregando un trazado de recorte al lienzo, pero no puedo encontrar una manera de agregar la sombra interior. Este es el nuevo código onDraw ():

@Override
protected void onDraw(Canvas canvas) {
    int radius = 4;
    int padding = 4;        
    RectF frame = new RectF(padding, padding, getWidth() - padding, getHeight() - padding);
    Path clipPath = new Path();
    clipPath.addRoundRect(frame, radius, radius, Path.Direction.CW);
    canvas.clipPath(clipPath);
    super.onDraw(canvas);
    // add inner shadow
}

Puedo ver dos alternativas:

1) Para preescala correctamente el mapa de bits de ImageView. Pero, ¿dónde está el mejor lugar para hacerlo? ¿En su constructor? ¿En el método onDraw () donde el marco parece estar haciéndolo? ¿Está el marco incluso redimensionando cualquier mapa de bits o hay otra forma de dibujar una imagen escalada en el lienzo sin ser perjudicial para el rendimiento?

2) Para agregar la capa de sombra interna sobre lo que el super.onDraw () está dibujando hasta ahora, pero me estoy quedando sin ideas sobre cómo hacer esto.

Cualquier ayuda sería apreciada.

¡Gracias!

Answer 1

Eche un vistazo al material de presentación de Eric (de squareup) de la Conferencia AndoridOpen de Oreilly el año pasado en su conferencia titulada Beautiful Android. Tiene una tonelada de información que debería ayudarlo.

Ojalá tuvieran el video de su presentación en alguna parte. No pude encontrarlo. Lo siento mucho.

EDITAR: Gracias a @mykola por el enlace yt