带圆角和内阴影的 ImageView [英] ImageView with rounded corners and inner shadow

问题描述

I need to make a thumbnail view with rounded corners and inner shadow. Usually I'm making ImageView frames with 9patches, which have served me well so far, but this time the effect I need requires drawing the inner shadow on top of the image (and not just around it). This lead me to extend the ImageView class and override the onDraw() method.

public class ThumbnailImageView extends ImageView {

After many tutorials (thanks StackOverflow!), I ended up with this code for the onDraw() method:

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

What I'm basically doing, is drawing a black rounded rectangle first and then drawing a rounded-corners bitmap with fading edges (with the BlurMaskFilter) on top of it. The result is what I want: The mBitmap value is initialized in the ImageView constructor like this:

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

The problem is that I am overriding onDraw() completely (no super.onDraw()) is called, so I have to pre-scale all images to the desired thumbnail size (e.g. 96x96) or else only the top-left corner of the image is drawn. What I want to be able to do is take advantage of all the scaling the framework is doing when I assign the following xml values to the ThumbnailImageView:

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

To do this, I thought I should somehow call super.onDraw() while getting the effects I need at the same time. I have managed to get the rounded rectange by adding a clipping path to the canvas, but I can't find a way to add the inner shadow. This is the new onDraw() code:

@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
}

I can see two alternatives:

1) To properly pre-scale the ImageView's bitmap. But where is the best place to do it? In it's constructor? In the onDraw() method where the framework seems to be doing it? Is the framework even resizing any bitmap or is there another way to draw a scaled image on the canvas without being bad for performance?

2) To add the inner shadow layer on top of what the super.onDraw() is drawing so far, but I'm running out of ideas on how to do this.

Any help would be appreciated.

Thanks!

解决方案

Take a look at Eric's (from squareup) presentation material from Oreilly's AndoridOpen Conference last year in his lecture titled Beautiful Android It has a ton of info that should help you out.

I wish they had the video of his presentation somewhere. I could not find it. So sorry.

EDIT : Thanks to @mykola for the yt link

这篇关于带圆角和内阴影的 ImageView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！