【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android怎么實(shí)現(xiàn)IM多人員組合的群組頭像

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android怎么實(shí)現(xiàn)IM多人員組合的群組頭像

這篇文章主要介紹了Android怎么實(shí)現(xiàn)IM多人員組合的群組頭像，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。說(shuō)明：此頭像類似微信群組頭像，整個(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，對(duì)每個(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;

/*

對(duì)每個(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)完成，不過(guò)想要圈形的還需要進(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="/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",

"70