最近任务不是很多,于是自己就瞎研究了,很久之前做过关于类似朋友圈图片的显示,然后没想到在回来看的时候,各种框架啊,自定义就出来了,于是我就看了一下人家写的,稍稍改造了一下。然后做了一名合格的搬运工。参考的人的博客是:https://www.jianshu.com/p/63fbd4dba956
当前还有三方的,在这里:https://blog.csdn.net/nihaozhanghua/article/details/78753341大家自己去看吧啊哈哈。。
效果图:
//自定义ViewGroup
public class WeChatFriendsCircleImageLayoutextends ViewGroup {
/*** 显示的行数*/
private int mColumnCount;
/*** 默认间距*/
private final float DEFAULT_SPACING =2.5f;
private float mSpacing;
/*** 图片宽高比(党为多张图片的时候为1)
* 一般在url中会有宽高 可计算*/
private float mItemAspectRatio;
/*** 最宽的时候相对可用空间比例(当childCount=1的时候)
* 当只有一张图片的 最大显示宽度和高度相对于可用宽的的比例*/
private final float MAX_WIDTH_PERCENTAGE =270f /350;
private int mItemWidth;
private int mItemHeight;
public WeChatFriendsCircleImageLayout(Context context) {
this(context, null);
}
public WeChatFriendsCircleImageLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public WeChatFriendsCircleImageLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mSpacing = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_SPACING,
context.getResources().getDisplayMetrics());
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
final int width = MeasureSpec.getSize(widthMeasureSpec);
//当只有一张图片的时候 显示一张相对比较大的图片
//当大于1小于等于4张图片的时候 一排显示两张图片
//当只有一张图片的时候
if (count ==1) {
mColumnCount =1;
int mItemMaxWidth = (int) (width *MAX_WIDTH_PERCENTAGE);
int mItemMaxHeight = mItemMaxWidth;
if (mItemAspectRatio <1) {
mItemHeight = mItemMaxHeight;
mItemWidth = (int) (mItemHeight *mItemAspectRatio);
}else {
mItemWidth = mItemMaxWidth;
mItemHeight = (int) (mItemMaxWidth /mItemAspectRatio);
}
}else {
if (count <=3) {
mColumnCount =3;
}else if (count ==4) {
mColumnCount =2;
}else {
mColumnCount =3;
}
mItemWidth = (int) ((width - getPaddingLeft() - getPaddingRight() -2 *mSpacing) /3);
mItemHeight = (int) (mItemWidth /mItemAspectRatio);
}
for (int i =0; i < getChildCount(); i++) {
View view = getChildAt(i);
LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width =mItemWidth;
layoutParams.height =mItemHeight;
measureChild(view, widthMeasureSpec, heightMeasureSpec);
}
final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(
getDesiredHeight(mItemHeight), MeasureSpec.EXACTLY);
}
final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.UNSPECIFIED) {
super.onMeasure(MeasureSpec.makeMeasureSpec(
getDesiredWidth(mItemWidth), MeasureSpec.EXACTLY), heightMeasureSpec);
}else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
@Override
protected void measureChild(View child, int parentWidthMeasureSpec,
int parentHeightMeasureSpec) {
final LayoutParams lp = child.getLayoutParams();
//获取子控件的宽高约束规则
final int childWidthMeasureSpec =getChildMeasureSpec(parentWidthMeasureSpec,
getPaddingLeft() + getPaddingRight(), lp.width);
final int childHeightMeasureSpec =getChildMeasureSpec(parentHeightMeasureSpec,
getPaddingLeft() + getPaddingRight(), lp.height);
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
private int getDesiredHeight(int mItemHeight) {
int totalHeight = getPaddingTop() + getPaddingBottom();
int count = getChildCount();
if (count >0) {
int row = (count -1) /mColumnCount;
totalHeight = (int) ((row +1) * mItemHeight + (row) *mSpacing) + totalHeight;
}
return totalHeight;
}
private int getDesiredWidth(int mItemWidth) {
int totalWidth = getPaddingLeft() + getPaddingRight();
int count = getChildCount();
if (count >0) {
if (count
totalWidth = (int) (count * mItemWidth + (count -1) *mSpacing) + totalWidth;
}else {
totalWidth = (int) (count * mItemWidth + (count -1) *mSpacing) + totalWidth;
}
}
return totalWidth;
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i =0; i < getChildCount(); i++) {
View imageView = getChildAt(i);
int column = i %mColumnCount;
int row = i /mColumnCount;
int left = (int) (getPaddingLeft() + column * (mSpacing +mItemWidth));
int top = (int) (getPaddingTop() + row * (mSpacing +mItemHeight));
imageView.layout(left, top, left +mItemWidth, top +mItemHeight);
}
}
/**
* 显示图片
*/
public void setImageUrls(final List imageUrls) {
removeAllViews();
if (imageUrls ==null || imageUrls.size() ==0) {
return;
}
int count = imageUrls.size();
if (count ==1) {
//一般在url中会有宽高 可以算出宽高比
//测试url固定用的 1000:1376
// mItemAspectRatio = AppUtil.getAspectRatio(imageUrls.get(0));
mItemAspectRatio =1000 /1376f;
}else {
mItemAspectRatio =1;
}
for (int i =0; i < imageUrls.size(); i++) {
ImageView imageView =new ImageView(getContext());
Uri uri = Uri.parse(imageUrls.get(i));
// imageView.setImageURI(uri);
imageView.setImageDrawable(getContext().getResources().getDrawable(R.drawable.icon_public_placeholder_android));
addView(imageView);
//点击查看大图
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
}
});
}
}
public int getItemWidth() {
return mItemWidth;
}
public int getItemHeight() {
return mItemHeight;
}
public int getColumnCount() {
return mColumnCount;
}
public void setColumnCount(int columnCount) {
mColumnCount = columnCount;
invalidate();
}
public float getSpacing() {
return mSpacing;
}
public void setSpacing(float spacing) {
mSpacing = spacing;
invalidate();
}
public float getItemAspectRatio() {
return mItemAspectRatio;
}
public void setItemAspectRatio(float itemAspectRatio) {
mItemAspectRatio = itemAspectRatio;
}
}
//XML中使用
android:id="@+id/friends_circle_item_image_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" /> //adapter中使用: ContentViewHolder viewHolder = (ContentViewHolder) holder; // viewHolder.mAvatarView.setImageURI(mImageUrl); viewHolder.mNameTv.setText("张新成、吴倩"); viewHolder.mContentTv.setText("超喜欢你们啊哈哈.我是一个绝世超级无敌大美女,啊哈哈。"); //int count = (int) (Math.random() * 9); List imageUrls =new ArrayList<>(); int count = position %10; for (int i =0; i < count; i++) { imageUrls.add(mImageUrl); } viewHolder.mImageLayout.setImageUrls(imageUrls);