Question

我正在寻找一个可以帮助我制作我的cricular图像视图的库，就像在Facebook Messenger中一样（带有z blue Messenger图标或灰色的Facebook图标）。他们是怎么想出来的？可以用Glide完成吗？如果没有，那么呢？

Answer 1

不建议使用NSString *myString = @"Some words to form a string"; NSArray *wordsInSentence = [myString componentsSeparatedByString:@" "]; NSMutableArray *expectedResultArray = [[NSMutableArray alloc] init]; for (NSString *word in wordsInSentence) { NSString *finalExpectedString = word; if (word.length > 2) { NSString *firstLetterInWord = [word substringToIndex:1]; NSString *lastLetterInWord = [word substringFromIndex:[word length] - 1]; finalExpectedString = [NSString stringWithFormat:@"%@%d%@", firstLetterInWord, (int)word.length - 2, lastLetterInWord]; } [expectedResultArray addObject:finalExpectedString]; } NSString *printString = [expectedResultArray componentsJoinedByString:@" "]; NSLog(@"Result : %@", printString); / @Override public void onDestroy() { super.onDestroy(); if (cursor != null) { cursor.close(); } } / CircleImageView，we have many people reporting issues主要是因为他们破坏了Drawable中与最基本功能不兼容的Bitmap Glide：CircularImageView，GIF动画也可能与他们分手。

正确的Glide方式是使用转换，你可以在这里找到一个足够好的： https://stackoverflow.com/a/25806229/253468

Glide 4.0将内置CircleCrop转换。

叠加图标

叠加图标也可以添加转换：

RoundedImageView

或只是有两个.crossFade() s：

// .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;
    }
}

两者都有优点和反差：转换结果可以缓存，所以如果你有3种状态，Glide会将每个用户的个人资料图像存储3次覆盖一个小图标，所以它可能只会应用一次然后它只是一个问题解码缓存的PNG（不是JPEG，因为圆圈强制透明）。使用两个ImageView，您必须有两个Glide加载线（或Glide和一个setImageResource），绘制和布局可能会慢一点。因此，您可以使用这两种方法将处理器时间交换到磁盘空间。使用ImageView方法，您还可以设置状态更改之间的转换动画，并始终显示状态，即使配置文件图像因网络不良而加载速度很慢。

如果转换ImageView方法的代码发生变化，则需要使缓存无效，这可以通过以下方式实现：

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

或者，这种失效可以以某种方式构建到transform方法中。

Answer 2

1.我建议您查看图像管理库（Facebook） Fresco，与其他图像加载库相比，它非常棒且成熟。

2.Fresco拥有std::copy_if作为自定义图片视图，支持SimpleDraweeView link并支持动画（.gif，.webp）以及普通图像（.jpg，.png）

3.Fresco使用3层架构处理所有图像缓存（Rounded Corners and Circles，BITMAP_MEMORY_CACHE和ENCODED_MEMORY_CACHE）。它还减少了OOM（Out Of Memory）问题。当视图中的图像离开屏幕时，它会自动回收位图，从而释放内存。

Answer 3

如果你的目标只有有一个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);

这有用吗？更多信息和积分How to create a circular ImageView in Android?

我可以使用Glide将CircleImage与Facebook Messenger中的重叠图标一起使用吗？

3 个答案:

叠加图标