說明：
此頭像類似微信群組頭像，整個(gè)頭像由組內(nèi)前N位人員的頭像組合而成，可用網(wǎng)絡(luò)或本地圖片進(jìn)行組合，最終顯示為一個(gè)頭像整體，看效果圖：
一、自定義整體頭像的ViewGroup，計(jì)算并保存寬高(重寫onMeasure)：
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { mWidth = getWidth(widthMeasureSpec); mHeight = getHeight(heightMeasureSpec); setMeasuredDimension(mWidth, mHeight); } private int getWidth(int measureSpec) { int width = MIN_WIDTH_AND_HEIGHT; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { width = specSize; } else if (specMode == MeasureSpec.AT_MOST) { width = Math.min(MIN_WIDTH_AND_HEIGHT, specSize); } return width; } private int getHeight(int measureSpec) { int height = MIN_WIDTH_AND_HEIGHT; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { height = specSize; } else if (specMode == MeasureSpec.AT_MOST) { height = Math.min(MIN_WIDTH_AND_HEIGHT, specSize); } return height; }二、布局子頭像的View(重寫onLayout，對每個(gè)子頭像進(jìn)行布局)：
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { layoutChild(); } private void layoutChild() { if (mImgUrls == null || mImgUrls.isEmpty()) { return; } for (int i = 0; i < mImgSize; i++) { ImageView itemV = (ImageView) getChildAt(i); int left = 0, top = 0, right = 0, bottom = 0; /* 對每個(gè)item的View計(jì)算left、top、right、bottom四個(gè)值 */ ... itemV.layout(left, top, right, bottom); //真正布局子頭像位置 showImage(itemV, mImgUrls.get(i)); //加載并顯示子頭像圖片 } }三、加載并顯示各子頭像(使用Glide加載并顯示每個(gè)子頭像)
private void showImage(Context context, ImageView iv, String url) { if (TextUtils.isEmpty(url)) { Bitmap bmp = BitmapFactory.decodeResource(context.getResources(), R.mipmap.user_default_icon); iv.setImageBitmap(bmp); return; } Glide.with(context).load(url) .diskCacheStrategy(DiskCacheStrategy.ALL) .dontAnimate() .placeholder(R.mipmap.user_default_icon) .error(R.mipmap.user_default_icon) .into(iv); }到此多圖片組合頭像已經(jīng)完成，不過想要圈形的還需要進(jìn)行以下步奏
四、裁剪整個(gè)群頭像為圓形(重寫dispatchDraw)：
@Override protected void dispatchDraw(Canvas canvas) { Path path = new Path(); path.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CW); canvas.clipPath(path); canvas.drawColor(Color.TRANSPARENT); super.dispatchDraw(canvas); drawGroupView(canvas); } /** * 繪制各頭像間隔線 * @param canvas */ private void drawGroupView(Canvas canvas) { /* 計(jì)算各條線的x和y坐標(biāo)值 */ float[] point1 = new float[2], point2 = new float[2]; ... drawLine(canvas, point1, point2); } /** * 繪制直線 */ private void drawLine(Canvas canvas, float[] point1, float[] point2) { mPaint.reset(); mPaint.setAntiAlias(true); mPaint.setStrokeWidth(mInterval); mPaint.setColor(Color.WHITE); mPaint.setStyle(Paint.Style.STROKE); canvas.drawLine(point1[0], point1[1], point2[0], point2[1], mPaint); }五、暴露公共方法供外部調(diào)用：
/** * 設(shè)置圖片url集合 * * @param imgs 圖片url集合 */ public void setImages(List<String> imgs) { if (imgs == null || imgs.isEmpty()) { return; } if (imgs.size() > MAX_SIZE) { imgs = imgs.subList(0, MAX_SIZE); } removeAllViews(); mImgUrls = imgs; mImgSize = imgs.size(); for (int i = 0; i < mImgSize; i++) { View v = getItemView(i); if (v == null) { return; } addView(v, generateDefaultLayoutParams()); } requestLayout(); } /** * 設(shè)置單個(gè)圖片url * * @param img 圖片url */ public void setImageUrl(String img) { ArrayList imgUrls = new ArrayList<>(); imgUrls.add(img); setImages(imgUrls); } /** * 生成一個(gè)頭像布局 */ private ImageView getItemView(int position) { ... }六、使用：
1.寫一個(gè)布局文件放自定義群組頭像控件：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f2f2f2" android:orientation="vertical"> <com.yyh.im.ui.widget.HeadView android:id="@+id/cv_head" android:layout_width="150dp" android:layout_height="150dp"/> </LinearLayout>
2.代碼中群組頭像控件顯示圖片：
@BindView(R2.id.cv_head) public HeadView mHeadCv; private String[] IMG_URL_LIST = { "70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=416954025,2289731303&fm=27&gp=0.jpg", "70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=704997830,3098922597&fm=27&gp=0.jpg", "70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1375449509,557259337&fm=27&gp=0.jpg", "70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2825392570,1862752263&fm=27&gp=0.jpg", "70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3252489351,440833245&fm=27&gp=0.jpg", "70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3586311245,3082636880&fm=27&gp=0.jpg" }; private void showImage(){ ArrayList<String> list = new ArrayList<>(); for (int i = 0; i < 6; i++) { list.add(IMG_URL_LIST[i]); } mHeadCv.setImageUrls(list); }以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
