ImageView的带圆角和内阴影 [英] ImageView with rounded corners and inner shadow
问题描述
我需要做的圆角和内心的阴影缩略图视图。通常我正在与9patches，这些都使我受益匪浅，到目前为止ImageView的框架，但是这一次我需要的效果需要绘制的图像（而不是仅仅围绕它）的顶部内侧阴影。这使我扩展的ImageView类并覆盖的OnDraw（）方法。
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 {
许多教程后（感谢计算器！），我结束了这个code代表的OnDraw（）方法：
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);
}
什么我基本上做的，先画一个黑色的圆角矩形，然后绘制一个圆形，边角位图在它上面的衰落边缘（与BlurMaskFilter）。其结果是我想要的：
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();
}
现在的问题是，我重写的OnDraw（）完全（无super.onDraw（））被调用，所以我要pre级的所有图像到所需的缩略图大小（如96×96），否则只图像的左上角被绘制。我希望能够做的就是好好把握所有的扩展，当我给下面的XML值的ThumbnailImageView的框架是这样做的：
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"
要做到这一点，我想我应该以某种方式调用super.onDraw（），同时获得我需要在同一时间的影响。我已设法通过增加剪切路径到画布上，以获得圆润rectange，但我不能找到一个方法来添加内阴影。这是新的OnDraw（）code：
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）要正确pre-规模的ImageView位图。但如果是做的最好的地方？在它的构造？在的OnDraw（）方法，其中的框架似乎是干嘛的？是框架即使调整任何位图或有另一种方式在画布上绘制一个缩放后的图像没有被不好的表现呢？
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）要添加什么的super.onDraw（）正在起草至今的顶部内侧阴影层，但我跑出来的意念如何做到这一点。
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.
任何帮助将是AP preciated。
Any help would be appreciated.
谢谢！
推荐答案
看看埃里克的（从squareup）presentation材料奥赖利的AndoridOpen会议在他的演讲去年题为美丽的Android： <一href="http://assets.en.oreilly.com/1/event/68/Beautiful%20Android%20$p$psentation.pdf">http://assets.en.oreilly.com/1/event/68/Beautiful%20Android%20$p$psentation.pdf 它有一吨的信息，应该帮助你。
Take a look at Eric's (from squareup) presentation material from Oreilly's AndoridOpen Conference last year in his lecture titled "Beautiful Android": http://assets.en.oreilly.com/1/event/68/Beautiful%20Android%20Presentation.pdf It has a ton of info that should help you out.
<打击>我希望他们有自己的presentation视频的地方。我找不到它。很抱歉。
编辑：感谢@mykola的 YT链接
EDIT : Thanks to @mykola for the yt link
这篇关于ImageView的带圆角和内阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
