Android仿微信群聊頭像
工作中需要實(shí)現(xiàn)仿釘釘群頭像的一個(gè)功能,就是個(gè)人的頭像拼到一起顯示,看了一下市場(chǎng)上的APP好像微信的群聊頭像是組合的,QQ的頭像不是,別的好像也沒(méi)有了。
給大家分享一下怎么實(shí)現(xiàn)的吧。首先我們先看一下效果圖:
好了,下面說(shuō)一下具體怎么實(shí)現(xiàn)的:
實(shí)現(xiàn)思路
- 1.首先獲取Bitmap圖片(本地、網(wǎng)絡(luò))
- 2.創(chuàng)建一個(gè)指定大小的縮略圖
- 3.組合Bitmap圖片
很簡(jiǎn)單,本地圖片需要我們從本地讀取,如果是網(wǎng)絡(luò)圖片我們也可以根據(jù)URL來(lái)獲取bitmap進(jìn)行組合
具體實(shí)現(xiàn)過(guò)程
1.布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:gravity="center" android:orientation="vertical" android:background="#987" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:background="#fff" android:layout_width="match_parent" android:layout_height="1dp"/> <ImageView android:src="@drawable/j" android:id="@+id/iv1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:background="#fff" android:layout_width="match_parent" android:layout_height="1dp"/> <ImageView android:src="@drawable/j" android:id="@+id/iv2" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:background="#fff" android:layout_width="match_parent" android:layout_height="1dp"/> <ImageView android:src="@drawable/j" android:id="@+id/iv3" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:background="#fff" android:layout_width="match_parent" android:layout_height="1dp"/> <ImageView android:src="@drawable/j" android:id="@+id/iv4" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:background="#fff" android:layout_width="match_parent" android:layout_height="1dp"/> </LinearLayout>
四個(gè)ImageView控件,用來(lái)顯示圖片不說(shuō)了
2.獲取Bitmap,設(shè)定圖片的屬性
/** * 獲取圖片數(shù)組實(shí)體 * @param count * @return */ private List<BitmapBean> getBitmapEntitys(int count) { List<BitmapBean> mList = new ArrayList<>(); String value = PropertiesUtil.readData(this, String.valueOf(count), R.raw.data); String[] arr1 = value.split(";"); int length = arr1.length; for (int i = 0; i < length; i++) { String content = arr1[i]; String[] arr2 = content.split(","); BitmapBean entity = null; for (int j = 0; j < arr2.length; j++) { entity = new BitmapBean(); entity.setX(Float.valueOf(arr2[0])); entity.setY(Float.valueOf(arr2[1])); entity.setWidth(Float.valueOf(arr2[2])); entity.setHeight(Float.valueOf(arr2[3])); } mList.add(entity); } return mList; }
3.創(chuàng)建壓縮圖片,這里我們用到了ThumbnailUtils中的extractThumbnail()方法,參數(shù)為bitmap,width,height
/** * 初始化數(shù)據(jù) */ private void initData(){ /*獲取四個(gè)圖片數(shù)組*/ bitmapBeans1 = getBitmapEntitys(1); bitmapBeans2 = getBitmapEntitys(2); bitmapBeans3 = getBitmapEntitys(3); bitmapBeans4 = getBitmapEntitys(4); /*bitmap縮略圖*/ Bitmap[] bitmaps1 = { ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans1 .get(0).getWidth(), (int) bitmapBeans1.get(0).getWidth())}; Bitmap[] bitmaps2 = { ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans2 .get(0).getWidth(), (int) bitmapBeans2.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans2 .get(0).getWidth(), (int) bitmapBeans2.get(0).getWidth())}; Bitmap[] bitmaps3 = { ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans3 .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans3 .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans3 .get(0).getWidth(), (int) bitmapBeans3.get(0).getWidth())}; Bitmap[] bitmaps4 = { ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans4 .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans4 .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans4 .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth()), ThumbnailUtils.extractThumbnail(BitmapUtils.getScaleBitmap( getResources(), R.drawable.j), (int) bitmapBeans4 .get(0).getWidth(), (int) bitmapBeans4.get(0).getWidth())}; }
4.組合bitmap圖片(也就是將我們的圖片用Canvas畫(huà)到一起)
/** * 獲得合在一起的bitmap * @param mEntityList * @param bitmaps * @return */ public static Bitmap getCombineBitmaps(List<BitmapBean> mEntityList, Bitmap... bitmaps) { Bitmap newBitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888); for (int i = 0; i < mEntityList.size(); i++) { bitmaps[i] = GetRoundedCornerBitmap(bitmaps[i]); newBitmap = mixtureBitmap(newBitmap, bitmaps[i], new PointF( mEntityList.get(i).getX(), mEntityList.get(i).getY())); } return newBitmap; }
這里我為了好看將圖片設(shè)置成圓形的了
/** * 獲取圓形的bitmap * @param bitmap * @return */ public static Bitmap GetRoundedCornerBitmap(Bitmap bitmap) { try { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); final RectF rectF = new RectF(new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight())); final float roundPx = 50; paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(Color.BLACK); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); final Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); canvas.drawBitmap(bitmap, src, rect, paint); return output; } catch (Exception e) { return bitmap; } }
最后開(kāi)畫(huà)
/** * 畫(huà)bitmap * @param first * @param second * @param fromPoint * @return */ public static Bitmap mixtureBitmap(Bitmap first, Bitmap second, PointF fromPoint) { if (first == null || second == null || fromPoint == null) { return null; } Bitmap newBitmap = Bitmap.createBitmap(first.getWidth(), first.getHeight(), Bitmap.Config.ARGB_8888); Canvas cv = new Canvas(newBitmap); cv.drawBitmap(first, 0, 0, null); cv.drawBitmap(second, fromPoint.x, fromPoint.y, null); cv.save(Canvas.ALL_SAVE_FLAG); //保存全部圖層 cv.restore(); return newBitmap; }
這樣就簡(jiǎn)單的實(shí)現(xiàn)了微信群聊頭像的效果,當(dāng)然需要對(duì)圖片做一些處理,已防止OOM,你也可以將它自定義成一個(gè)View組件,小編有時(shí)間的話會(huì)實(shí)現(xiàn)這個(gè)的。
最后再給大家看一下小編項(xiàng)目上實(shí)現(xiàn)的效果吧,沒(méi)啥區(qū)別,只不多數(shù)據(jù)源不一樣了,是從網(wǎng)絡(luò)上獲取的。
這里寫(xiě)圖片描述:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
Android 進(jìn)程間通信實(shí)現(xiàn)原理分析
只有你允許客戶端從不同的應(yīng)用程序?yàn)榱诉M(jìn)程間的通信而去訪問(wèn)你的service,以及想在你的service處理多線程,下面為大家詳細(xì)介紹下2013-06-06Android強(qiáng)制下線功能實(shí)現(xiàn)的代碼示例
本篇文章主要介紹了Android強(qiáng)制下線功能實(shí)現(xiàn)的代碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Android利用動(dòng)畫(huà)實(shí)現(xiàn)背景逐漸變暗
這篇文章主要為大家詳細(xì)介紹了Android利用動(dòng)畫(huà)實(shí)現(xiàn)背景逐漸變暗的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Android RecyclerView網(wǎng)格布局(支持多種分割線)詳解(2)
這篇文章主要為大家詳細(xì)介紹了Android RecyclerView網(wǎng)格布局,支持多種分割線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02源碼解析Android Jetpack組件之ViewModel的使用
Jetpack 是一個(gè)豐富的組件庫(kù),它的組件庫(kù)按類別分為 4 類,分別是架構(gòu)(Architecture)、界面(UI)、 行為(behavior)和基礎(chǔ)(foundation)。本文將從源碼和大家講講Jetpack組件中ViewModel的使用2023-04-04Android異步回調(diào)中的UI同步性問(wèn)題分析
這篇文章主要為大家詳細(xì)分析了Android異步回調(diào)中的UI同步性問(wèn)題,感興趣的小伙伴們可以參考一下2016-06-06Android 啟動(dòng)第三方程序的方法總結(jié)
這篇文章主要介紹了Android 啟動(dòng)第三方程序的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04Android中利用Xposed框架實(shí)現(xiàn)攔截系統(tǒng)方法
這篇文章主要介紹了Android中利用Xposed框架實(shí)現(xiàn)攔截系統(tǒng)方法的相關(guān)資料,需要的朋友可以參考下2016-11-11