0

我正在寻找一个可以帮助我在 Facebook Messenger 中制作我的圆形图像视图的库(带有 z 蓝色 Messenger 图标或灰色 Facebook 图标)。他们是怎么想出来的?可以用 Glide 完成吗?如果没有,那用什么?

4

3 回答 3

2

不建议使用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;
    }
}

或者干脆有两个ImageViews:

<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()某种方式内置到方法中。

于 2015-10-01T09:49:21.717 回答
0

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(内存不足)问题。当视图中的图像离开屏幕时,它会自动回收位图,从而释放内存。

于 2015-10-01T14:52:47.820 回答
-1

如果您的目标只有一个 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?

于 2015-09-29T21:21:43.367 回答