我正在寻找一个可以帮助我在 Facebook Messenger 中制作我的圆形图像视图的库(带有 z 蓝色 Messenger 图标或灰色 Facebook 图标)。他们是怎么想出来的?可以用 Glide 完成吗?如果没有,那用什么?
3 回答
不建议使用CircleImageView
// CircularImageView
,我们有很多人报告他们的问题,主要是因为他们将位图从 Drawable 中破解出来,这与 Glide 的最基本功能不兼容:,而且 GIF 动画可能会与他们中断。RoundedImageView
.crossFade()
正确的 Glide 方式是使用 Transformations,你可以在这里找到一个足够好的方法: https ://stackoverflow.com/a/25806229/253468
Glide 4.0 将有一个内置的 CircleCrop 转换。
叠加图标
叠加图标也可以通过转换添加:
// .transform(new CircleTransform(context)), new StatusTransform(context, user.getStatus()))
public static class StatusTransform extends BitmapTransformation {
private final Status status;
public StatusTransform(Context context, Status status) {
super(context);
this.status = status;
}
@Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
int w = toTransform.getWidth(), h = toTransform.getHeight();
Bitmap result = pool.get(w, h, Bitmap.Config.ARGB_8888);
if (result == null) {
result = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(result);
canvas.drawBitmap(toTransform);
switch(status) {
case Online:
canvas.draw*(online graphics);
break;
case Offline:
canvas.draw*(offline graphics);
break;
}
return result;
}
@Override public String getId() {
return getClass().getName() + status;
}
}
或者干脆有两个ImageView
s:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/user_profile_size"
android:layout_height="@dimen/user_profile_size"
>
<ImageView
android:id="@id/user_profile"
android:layout_width="@dimen/user_profile_size"
android:layout_height="@dimen/user_profile_size"
/>
<ImageView
android:id="@id/user_status"
android:layout_width="@dimen/user_status_size"
android:layout_height="@dimen/user_status_size"
android:layout_gravity="bottom|end"
/>
</FrameLayout>
两者各有利弊: 转换结果可以被缓存,所以如果你有 3 个状态,Glide 将存储每个用户的个人资料图像 3 次覆盖一个小图标,所以它可能只会应用一次然后它只是解码的问题缓存的 PNG(不是 JPEG,因为圆形强制透明)。对于两个 ImageView,您必须有两个 Glide 加载线(或 Glide 和一个 setImageResource),绘制和布局可能会慢一些。因此,您可以使用这两种方法将处理器时间换成磁盘空间。使用 ImageView 方法,您还可以为状态更改之间的过渡设置动画,并始终显示状态,即使由于网络不良而导致个人资料图像加载缓慢也是如此。
在转换的情况下,如果transform
方法的代码发生变化,您需要使缓存无效,这可以通过以下方式实现:
.signature(ApplicationVersionSignature.obatain(context)) // every release
// or
.signature(new StringSignature(String.valueOf( System.currentTimeMillies() / (10 * 60 * 1000) ))) // every 10 minutes
或者,这种失效可以以getId()
某种方式内置到方法中。
1.我建议您查看 Facebook 的图像管理库,它是Fresco,与其他图像加载库相比非常棒和成熟。
2.Fresco 具有SimpleDraweeView
自定义图像视图,支持Rounded Corners and Circles
链接并支持动画(.gif,.webp)以及普通图像(.jpg,.png)。
3.Fresco 使用 3 层架构( 和 )处理图像的BITMAP_MEMORY_CACHE
所有ENCODED_MEMORY_CACHE
缓存DISK_CACHE
。它还减少了 OOM(内存不足)问题。当视图中的图像离开屏幕时,它会自动回收位图,从而释放内存。
如果您的目标只有一个 CircleImage,请试一试:
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class RoundedImageView extends ImageView
{
public RoundedImageView(Context context)
{
super(context);
}
public RoundedImageView(Context context, @Nullable AttributeSet attrs)
{
super(context, attrs);
}
public RoundedImageView(Context context, @Nullable AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
public RoundedImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes)
{
super(context, attrs, defStyleAttr, defStyleRes);
}
public static Bitmap getCroppedBitmap(Bitmap bmp, int radius)
{
Bitmap sbmp;
if (bmp.getWidth() != radius || bmp.getHeight() != radius)
{
float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
float factor = smallest / radius;
sbmp = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth() / factor), (int) (bmp.getHeight() / factor), false);
}
else
{
sbmp = bmp;
}
Bitmap output = Bitmap.createBitmap(radius, radius,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xffa19774;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, radius, radius);
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(radius / 2 + 0.7f,
radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(sbmp, rect, rect, paint);
return output;
}
@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);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
}
在您的布局中,您可以使用它:
<mypkg.example.RoundedImageView
android:id="@+id/roundimg"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="center"/>
并以编程方式设置一个字母..
Rect textBounds = new Rect();
String text = "N"
Bitmap bitmap = Bitmap.createBitmap(imageView.getLayoutParams().width, imageView.getLayoutParams().height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.DKGRAY);
TextPaint p = new TextPaint();
p.setColor(Color.WHITE);
p.setTextSize(imageView.getLayoutParams().height / 2);
p.setAntiAlias(true);
p.setTextAlign(Paint.Align.LEFT);
p.getTextBounds(text, 0, text.length(), textBounds);
int cx = imageView.getLayoutParams().width / 2;
int cy = imageView.getLayoutParams().height / 2;
canvas.drawText(text, cx - textBounds.exactCenterX(), cy - textBounds.exactCenterY(), p);
imageView.setImageBitmap(bitmap);
或图像..
// image grabbed from an input stream
Bitmap photo = BitmapFactory.decodeStream(inputStream);
imageView.setImageBitmap(photo);
这有用吗?更多信息和学分在这里如何在 Android 中创建圆形 ImageView?