如何添加阴影和圆形的ImageView的Android边界？ [英] How to add a shadow and a border on circular imageView android?
本文介绍了如何添加阴影和圆形的ImageView的Android边界？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个CircularImageView这个问题：创建Android中圆形图像视图
下载项目 GitHub上
1）这是CircularImageView类：
公共类CircularImageView扩展ImageView的{
公共CircularImageView（上下文的背景下）{
超（上下文）;
}
公共CircularImageView（上下文的背景下，ATTRS的AttributeSet）{
超（背景下，ATTRS）;
}
公共CircularImageView（上下文的背景下，ATTRS的AttributeSet，诠释defStyle）{
超（背景下，ATTRS，defStyle）;
}
@覆盖
保护无效的OnDraw（帆布油画）{
可绘制绘制= getDrawable（）;
如果（绘制== NULL）{
返回;
}
如果（的getWidth（）== 0 ||的getHeight（）== 0）{
返回;
}
位图B =（（BitmapDrawable）可拉伸）.getBitmap（）;
点阵位图= b.copy（Bitmap.Config.ARGB_8888，真正的）;
位图roundBitmap = getCroppedBitmap（位图，的getWidth（））;
canvas.drawBitmap（roundBitmap，0，0，NULL）;
}
公共静态位图getCroppedBitmap（BMP位图，诠释半径）{
位图sbmp;
如果（bmp.getWidth（）！=半径|| bmp.getHeight（）！=半径）
sbmp = Bitmap.createScaledBitmap（BMP，半径，半径，假）;
其他
sbmp = BMP;
位图输出= Bitmap.createBitmap（sbmp.getWidth（），sbmp.getHeight（），Bitmap.Config.ARGB_8888）;
最终矩形矩形=新的Rect（0，0，sbmp.getWidth（），sbmp.getHeight（））;
涂料粉刷=新的油漆（）;
paint.setAntiAlias（真正的）;
paint.setFilterBitmap（真正的）;
paint.setDither（真正的）;
paint.setColor（Color.parseColor（＃BAB399））;
帆布C =新的Canvas（输出）;
c.drawARGB（0，0，0，0）;
c.drawCircle（sbmp.getWidth（）/ 2 + 0.7f，sbmp.getHeight（）/ 2 + 0.7f，sbmp.getWidth（）/ 2 + 0.1F，油漆）;
paint.setXfermode（新PorterDuffXfermode（Mode.SRC_IN））;
c.drawBitmap（sbmp，矩形，矩形，油漆）;
返回输出;
}
}
2）我在我的布局中使用这样的：
＆LT; LinearLayout中的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：后台=＃CCCCCC
机器人：重力=中心
机器人：方向=垂直
机器人：填充=10dp＆GT;
＆LT; com.mikhaellopez.circularimageview.CircularImageView
机器人：ID =@ + ID / imageViewCircular
机器人：layout_width =@扪/ image_view_size
机器人：layout_height =@扪/ image_view_size
机器人：layout_gravity =中心
机器人：背景=@可绘制/边框
机器人：SRC =@可绘制/图像/＆GT;
＆LT; / LinearLayout中＆GT;
3）当前导致画面：
我要如何改变这种code有一个阴影，在我的ImageView圆形边框？
的Objectif结果：
修改二零一五年十月一十五日：
您可以使用或下载我的 GitHub的库 CircularImageView < /一>是所有修补程序使用摇篮依赖
编译com.mikhaellopez：circularimageview：2.0.1
解决方案
我修改了 CircularImageView这里找到来实现你想要的
要创建一个围绕边框阴影，我只是用这两条线：
this.setLayerType（LAYER_TYPE_SOFTWARE，的paintBorder）;
paintBorder.setShadowLayer（4.0F，0.0，2.0f，Color.BLACK）;
您需要 setLayerType 由于对蜂窝了硬件加速。它并没有它工作时，我尝试了。
下面是完整的code：
进口android.annotation.Sup pressLint;
进口android.content.Context;
进口android.graphics.Bitmap;
进口android.graphics.BitmapShader;
进口android.graphics.Canvas;
进口android.graphics.Color;
进口android.graphics.Paint;
进口android.graphics.Shader;
进口android.graphics.drawable.BitmapDrawable;
进口android.util.AttributeSet;
进口android.widget.ImageView;
公共类CircularImageView扩展的ImageView
{
私人诠释边框宽度= 4;
私人诠释viewWidth;
私人诠释viewHeight;
私人位图图像;
民营涂料粉刷;
民营涂料的paintBorder;
私人BitmapShader着色器;
公共CircularImageView（上下文的背景下）
{
超（上下文）;
建立（）;
}
公共CircularImageView（上下文的背景下，ATTRS的AttributeSet）
{
超（背景下，ATTRS）;
建立（）;
}
公共CircularImageView（上下文的背景下，ATTRS的AttributeSet，INT defStyle）
{
超（背景下，ATTRS，defStyle）;
建立（）;
}
私人无效设置（）
{
//初始化漆
油漆=新的油漆（）;
paint.setAntiAlias（真正的）;
的paintBorder =新的油漆（）;
setBorderColor（Color.WHITE）;
paintBorder.setAntiAlias（真正的）;
this.setLayerType（LAYER_TYPE_SOFTWARE，的paintBorder）;
paintBorder.setShadowLayer（4.0F，0.0，2.0f，Color.BLACK）;
}
公共无效setBorderWidth（INT边框宽度）
{
this.borderWidth =边框宽度;
this.invalidate（）;
}
公共无效setBorderColor（INT BORDERCOLOR）
{
如果（的paintBorder！= NULL）
paintBorder.setColor（BORDERCOLOR）;
this.invalidate（）;
}
私人无效loadBitmap（）
{
BitmapDrawable bitmapDrawable =（BitmapDrawable）this.getDrawable（）;
如果（bitmapDrawable！= NULL）
图像= bitmapDrawable.getBitmap（）;
}
@燮pressLint（DrawAllocation）
@覆盖
公共无效的OnDraw（帆布油画）
{
//将位图
loadBitmap（）;
//初始化着色器
如果（图像！= NULL）
{
着色器=新BitmapShader（Bitmap.createScaledBitmap（图像，canvas.getWidth（），canvas.getHeight（），FALSE），Shader.TileMode.CLAMP，Shader.TileMode.CLAMP）;
paint.setShader（着色）;
INT circleCenter = viewWidth / 2;
// circleCenter认为中心的x或y
//半径要绘制在cirle的像素的半径
//涂料包含将纹理化形状着色器
canvas.drawCircle（circleCenter +边框宽度，circleCenter +边框宽度，circleCenter +边框宽度 - 4.0F，的paintBorder）;
canvas.drawCircle（circleCenter +边框宽度，circleCenter +边框宽度，circleCenter - 4.0F，油漆）;
}
}
@覆盖
保护无效onMeasure（INT widthMeasureSpec，INT heightMeasureSpec）
{
INT宽度= measureWidth（widthMeasureSpec）;
INT高= measureHeight（heightMeasureSpec，widthMeasureSpec）;
viewWidth =宽度 - （边框宽度* 2）;
viewHeight =身高 - （边框宽度* 2）;
setMeasuredDimension（宽度，高度）;
}
私人诠释measureWidth（INT measureSpec）
{
INT结果为0;
INT specMode = MeasureSpec.getMode（measureSpec）;
INT specSize = MeasureSpec.getSize（measureSpec）;
如果（specMode == MeasureSpec.EXACTLY）
{
//我们被告知有多大是
结果= specSize;
}
其他
{
//测量的文本
结果= viewWidth;
}
返回结果;
}
私人诠释measureHeight（INT measureSpecHeight，INT measureSpecWidth）
{
INT结果为0;
INT specMode = MeasureSpec.getMode（measureSpecHeight）;
INT specSize = MeasureSpec.getSize（measureSpecHeight）;
如果（specMode == MeasureSpec.EXACTLY）
{
//我们被告知有多大是
结果= specSize;
}
其他
{
//测量文本（注意：上升为负数）
结果= viewHeight;
}
返程（结果+ 2）;
}
}
我希望它能帮助！
修改
我叉你CircularImageView，并增加了选择覆盖的支持。我也改善显著的绘图性能...
<一个href="https://github.com/Pkmmte/CircularImageView">https://github.com/Pkmmte/CircularImageView
I created a CircularImageView with this question: Create circular image view in android
Download project on GitHub
1) This is the CircularImageView class :
public class CircularImageView extends ImageView {
public CircularImageView(Context context) {
super(context);
}
public CircularImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable)drawable).getBitmap() ;
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
Bitmap roundBitmap = getCroppedBitmap(bitmap, getWidth());
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
Bitmap sbmp;
if(bmp.getWidth() != radius || bmp.getHeight() != radius)
sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
else
sbmp = bmp;
Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Bitmap.Config.ARGB_8888);
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setColor(Color.parseColor("#BAB399"));
Canvas c = new Canvas(output);
c.drawARGB(0, 0, 0, 0);
c.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f, sbmp.getWidth() / 2+0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
c.drawBitmap(sbmp, rect, rect, paint);
return output;
}
}
2) I use in my layout like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp" >
<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/imageViewCircular"
android:layout_width="@dimen/image_view_size"
android:layout_height="@dimen/image_view_size"
android:layout_gravity="center"
android:background="@drawable/border"
android:src="@drawable/image" />
</LinearLayout>
3) Current result in picture :
How do I change this code to have a shadow and a circular border around my imageView?
Objectif result :
Edit 10/15/2015 :
You can used or download my GitHub library CircularImageView with all the fixes by using gradle dependency :
compile 'com.mikhaellopez:circularimageview:2.0.1'
解决方案
I modified the CircularImageView found here to achieve what you want.
To create a shadow around the border, I simply used these two lines:
this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
You need setLayerType due to hardware acceleration on HoneyComb and up. It didn't work without it when I tried it.
Here is the full code:
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class CircularImageView extends ImageView
{
private int borderWidth = 4;
private int viewWidth;
private int viewHeight;
private Bitmap image;
private Paint paint;
private Paint paintBorder;
private BitmapShader shader;
public CircularImageView(Context context)
{
super(context);
setup();
}
public CircularImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
setup();
}
public CircularImageView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
setup();
}
private void setup()
{
// init paint
paint = new Paint();
paint.setAntiAlias(true);
paintBorder = new Paint();
setBorderColor(Color.WHITE);
paintBorder.setAntiAlias(true);
this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
}
public void setBorderWidth(int borderWidth)
{
this.borderWidth = borderWidth;
this.invalidate();
}
public void setBorderColor(int borderColor)
{
if (paintBorder != null)
paintBorder.setColor(borderColor);
this.invalidate();
}
private void loadBitmap()
{
BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();
if (bitmapDrawable != null)
image = bitmapDrawable.getBitmap();
}
@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas)
{
// load the bitmap
loadBitmap();
// init shader
if (image != null)
{
shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
int circleCenter = viewWidth / 2;
// circleCenter is the x or y of the view's center
// radius is the radius in pixels of the cirle to be drawn
// paint contains the shader that will texture the shape
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f, paintBorder);
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, paint);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int width = measureWidth(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec, widthMeasureSpec);
viewWidth = width - (borderWidth * 2);
viewHeight = height - (borderWidth * 2);
setMeasuredDimension(width, height);
}
private int measureWidth(int measureSpec)
{
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY)
{
// We were told how big to be
result = specSize;
}
else
{
// Measure the text
result = viewWidth;
}
return result;
}
private int measureHeight(int measureSpecHeight, int measureSpecWidth)
{
int result = 0;
int specMode = MeasureSpec.getMode(measureSpecHeight);
int specSize = MeasureSpec.getSize(measureSpecHeight);
if (specMode == MeasureSpec.EXACTLY)
{
// We were told how big to be
result = specSize;
}
else
{
// Measure the text (beware: ascent is a negative number)
result = viewHeight;
}
return (result + 2);
}
}
I hope it helps!
.
EDIT
I forked your CircularImageView and added support for selector overlays. I also improved drawing performance significantly...
https://github.com/Pkmmte/CircularImageView
这篇关于如何添加阴影和圆形的ImageView的Android边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
