这篇文章介绍一下使用富文本实现点赞展示效果（包含点赞人员的头像），之前使用的是SpannableString写的，但是只是实现了显示默认的小心心和后边的昵称，头像没有展示展示出来。后来将SpannableString换成了SpannableStringBuilder。整体思路就是：使用多个SpannableStringBuilder将默认的小心心、个人头像、昵称拼接起来显示。下面是代码所示：
//设置点赞具体人员（利用富文本）
//判断点赞的集合是否为空
if (ListHelper.isNotEmpty(item.getLikes())) {
//tv_community_like是展示点赞信息的TextView
tv_community_like.setVisibility(View.VISIBLE);
SpannableStringBuilder[] builder = new SpannableStringBuilder[1];
SpannableStringBuilder defaultStringBuilder = new SpannableStringBuilder("#");
//blue_heart为默认的小心心图片,可以将小心心图片换成自己需要的
Drawable drawable = context.getResources().getDrawable(R.mipmap.blue_heart);
drawable.setBounds(0, 5, 40, 40);//这是将小心心图片绘制在某一矩形区域内
//HouseImageSpan是自定义的ImageSpan为了实现将点赞信息垂直居中显示而写,后面会详细介绍
HouseImageSpan imageSpan = new HouseImageSpan(drawable);
defaultStringBuilder.setSpan(imageSpan, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
builder[0] = defaultStringBuilder;
for (int i = 0; i < item.getLikes().size(); i++) {
//moren_head_2是头像未加载出来之前显示的默认图片,可以根据需求自己更换
Drawable drawable1 = context.getResources().getDrawable(R.mipmap.moren_head_2);
drawable1.setBounds(0, 15, 80, 15);
HouseImageSpan imageSpan1 = new HouseImageSpan(drawable1);
//imgStringBuilder 为默认头像显示的SpannableStringBuilder,最后需要将其与其他SpannableStringBuilder拼接在一起展示
final SpannableStringBuilder[] imgStringBuilder = {new SpannableStringBuilder("#")};
imgStringBuilder[0].setSpan(imageSpan1, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
if (StringHelper.isNotEmpty(item.getLikes().get(i).getLogo())) {
int finalI = i;
//使用Glide将网络图片的URL(item.getLikes().get(i).getLogo())转成Bitmap
Glide.with(MyApplication.getApplication().getApplicationContext())
.load(item.getLikes().get(i).getLogo()).asBitmap().into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
//将转成的Bitmap(resource)转成缩略图
Bitmap bitmap = BitmapHelper.getImageSmall(resource, 120, 120);
//将Bitmap转成圆形图片
Bitmap bitmap2 = BitmapHelper.toRoundBitmap(bitmap);
HouseImageSpan imageSpan2 = new HouseImageSpan(bitmap2);
imgStringBuilder[0].setSpan(imageSpan2, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
builder[0] = builder[0].append(imgStringBuilder[0]);
}
});
}
//nickNameBuilder为昵称的SpannableStringBuilder
SpannableStringBuilder nickNameBuilder;
if (i == item.getLikes().size() - 1) {
nickNameBuilder = new SpannableStringBuilder(item.getLikes().get(i).getNickname());
} else {
nickNameBuilder = new SpannableStringBuilder(item.getLikes().get(i).getNickname() + ",");
}
builder[0] = builder[0].append(nickNameBuilder);
}
//builder[0]就是最终要展示的SpannableStringBuilder
tv_community_like.setText(builder[0]);
} else {
tv_community_like.setVisibility(View.GONE);
}
以上就是所有展示此效果的代码，下面介绍文章中提到的自定义ImageSpan
public class HouseImageSpan extends ImageSpan {
public HouseImageSpan(Drawable d) {
super(d);
}
public HouseImageSpan(Bitmap b){
super(b);
}
//通过改变getSize方法来改变位置垂直居中显示
public int getSize(Paint paint,CharSequence text,int start,int end,Paint.FontMetricsInt fm){
Drawable d = getDrawable();
Rect rect = d.getBounds();
if (fm != null) {
Paint.FontMetricsInt fmPaint=paint.getFontMetricsInt();
int fontHeight = fmPaint.bottom - fmPaint.top;
int drHeight=rect.bottom-rect.top;
int top= drHeight/2 - fontHeight/4;
int bottom=drHeight/2 + fontHeight/4;
fm.ascent=-bottom;
fm.top=-bottom;
fm.bottom=top;
fm.descent=top;
}
return rect.right;
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
Drawable b = getDrawable();
canvas.save();
int transY = 0;
transY = ((bottom-top) - b.getBounds().bottom)/2+top;
canvas.translate(x, transY);
b.draw(canvas);
canvas.restore();
}
}
文章中提到的将原图转成缩略图的方法是
public static Bitmap getImageSmall(Bitmap bm, int newWidth, int newHeight) {
int width = bm.getWidth();
int height = bm.getHeight();
// 设置想要的大小
// 计算缩放比例
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 取得想要缩放的matrix参数
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的图片
Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
return newbm;
}
通过以上方法可以将原图转成缩略图，下面再介绍将缩略图转成圆形图片
/**
* bitmap圆形处理
*
* @param bitmap
* @return
*/
public static Bitmap toRoundBitmap(Bitmap bitmap) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
float roundPx;
float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;
if (width <= height) {
roundPx = width / 2;
top = 0;
bottom = width;
left = 0;
right = width;
height = width;
dst_left = 0;
dst_top = 0;
dst_right = width;
dst_bottom = width;
} else {
roundPx = height / 2;
float clip = (width - height) / 2;
left = clip;
right = width - clip;
top = 0;
bottom = height;
width = height;
dst_left = 0;
dst_top = 0;
dst_right = height;
dst_bottom = height;
}
Bitmap output = Bitmap.createBitmap(width,
height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect src = new Rect((int) left, (int) top, (int) right, (int) bottom);
final Rect dst = new Rect((int) dst_left, (int) dst_top, (int) dst_right, (int) dst_bottom);
final RectF rectF = new RectF(dst);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, src, dst, paint);
return output;
}
下面展示一下效果
以上就是所有功能的实现，感谢大家