1. 程式人生 > >Android使用富文字實現點贊效果(包含點贊人員的頭像)

Android使用富文字實現點贊效果(包含點贊人員的頭像)

這篇文章介紹一下使用富文字實現點贊展示效果(包含點贊人員的頭像),之前使用的是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;
}

下面展示一下效果

這裡寫圖片描述

以上就是所有功能的實現,感謝大家

相關推薦

Android使用文字實現效果(包含人員頭像)

這篇文章介紹一下使用富文字實現點贊展示效果(包含點贊人員的頭像),之前使用的是SpannableString寫的,但是隻是實現了顯示預設的小心心和後邊的暱稱,頭像沒有展示展示出來。後來將SpannableString換成了SpannableStringBuild

Android文字實現不同的文字新增選事件

如果可以點選的文字位置是固定不變的,可以在String.xml中配置(如:“可以點選的”給“點選”設定點選事件)。 @Override protected void onCreate(Bundle s

Android中對文字實現跑馬燈效果

關於在Android中文字實現跑馬燈效果 方法一:(只能實現單個TextView的跑馬燈效果) android:singleLine=”true”只能單行,超出的文字顯示為”…” android:

Android使用GestureDetector實現手勢滑動效果

void tco event else if rate method sta pro 手勢滑動 直接看實例: package com.example.gesturedetector; import android.os.Bundle; import

Android開發之實現水平滾動效果—RecyclerView

ListView由於其強大的功能,在過去的Android開發中有著卓越的貢獻,然而使用ListView,如果不使用一些技巧來提升其效率的話,那麼ListView的效能會很差。 為此,Android提供了一個更加強大的滾動控制元件–RecyclerView。下面

Android中AlertDialog實現圓角邊框效果

背景 微博的圓角邊框的Dialog使用者體驗很好,讓我們一起來實現這個功能,然後應用到自己的專案中去。 微博中圖示為: 實現思路 新建一個AlertDialog物件並顯示,然後獲取這個dialog的Window物件,給這個Window物件設定自定義vi

Android使用GPUImage實現濾鏡效果精煉詳解(一)

一、前期基礎知識詳解 “濾鏡通常用於相機鏡頭作為調色、新增效果之用。如UV鏡、偏振鏡、星光鏡、各種色彩濾光片。濾鏡也是繪圖軟體中用於製造特殊效果的工具統稱,以Photoshop為例,它擁有風格化、畫筆描邊、模糊、扭曲、銳化、視訊、素描、紋理、畫素化、渲染、藝術效果、其他

android使用ViewPager實現引導頁效果

對於大多數android開發者來說,ViewPager和ListView是再熟悉不過了,ViewPager的實現思路和ListView大同小異,具體參照前面的ListView詳解。在實現基礎的ViewPager後還加上了一個類似於Tab的效果。 下面來一一詳解

android文字 載入帶圖片的html

textView載入帶圖片的html 在android中textView中setText中加入富文字以及webView嵌入url是android互動html最簡單的兩種方式; 最近在專案中涉及到富文字; 當不考慮html中

Android 使用TextView實現跑馬燈效果

too pan 例如 use teset ble isf deb png 前言 我們在開發中經常會遇到一個小問題。比如下面一個小例子: 這個文字太長,單行中導致無法全部顯示出來,這就是今天要實現的功能。 當然,百度中也有很多這種解決方案。 其中有一種,例如:

android 文字SpannableString去掉下劃線

  總有些細節設計總監總是揪著不放,做的app中有個textview牽扯到了url連結,但是老大的意思是不能存在下劃線,如下圖: -----》 程式碼如下: String msg =

文字字串顏色改變效果

本文的目的在於將每天開發中用到的小技巧記錄下來,方便自己和大家檢視。 我這裡主要講解的是通過程式碼動態的改變搜尋時的文字顯示狀態,主要步驟: 1.獲取源字串 :originalString 2.實現下面的方法 //改變匹配字串的字型顏色 - (NSMutableAttr

android xml bitmap 實現波浪線效果

我們要實現的效果如下: 找了一些關於實現波浪線的方法,總感覺不大滿意,常見的方法有 1、直接搞一個這樣的波浪線的切圖       這種方式最簡單,但是劣勢也非常明顯,如果view的寬度過大,則會出現

Android利用RecyclerView實現列表倒計時效果

只需要 過程 net looper 更新列表 code setimage update over 最近面試時,面試官問了一個列表倒計時效果如何實現,然後腦袋突然懵的了O(∩_∩)O,現在記錄一下。 運行效果圖 實現思路 實現方法主要有兩個: 1.為每個開始倒計時的it

Android 7.0實現拍照、獲取相簿圖片上傳頭像功能

對網上關於Android7.0的上傳頭像進行整理 1.新增許可權管理。內容例如以下: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-pe

設定TextView等View元件效果選修改背景。字型顏色等

Android TextView等 預設是不帶點選效果的。。有的時候為了給使用者一個提示。可能需要我們自己新增點選效果。很多APP都是這樣實現的。 下面上一張圖看看效果。 下面是程式碼。 <TextView android:id="@+id/tv" android

按鈕效果選變顏色不恢復顏色)

在點選的過程中按鈕變顏色,可以方便看到是否觸發了按鈕的點選事件function changeColor(id,class1,class2) { $("#instbtn").on("touchstart",function () {

TextView+SpannableString實現Android文字的顯示及選衝突解決

前言 最近專案中需要實現一個文章跟讀效果的顯示,還要能夠點選文章中的單詞能夠彈出對話方塊顯示單詞的英美髮音,那麼如何實現這樣的需求呢?當然是利用SpannableString啦,下面就結合專案中使用到的和參考其他部落格的成果,整理一下常用的用法吧。 SpannableString其

Android效果實現

先看下點讚的效果圖 首先新增依賴 api 'com.sackcentury:shinebutton:0.2.0' xml佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=

Android自定義View教你一步一步實現即刻效果

前言 今天朋友看了HenCoder的自定義View後說,HenCoder對自定義View講的不錯。實踐中仿寫即刻的點贊你有思路嗎,你不實現一下?二話不說,看了朋友手機效果,對他說:實現不難,用到了位移,縮放,漸變動畫和自定義View的基礎用法,好,那我實現一下,剛好加深對自定義View的理解。 素材準備