Android仿微信朋友圈图片展示实现
2017-12-20 本文已影响227人
sqzglg
最近产品经理突然脑壳有包要把我们项目中的图片展示改成微信朋友圈那样，本来想网上应该到处都是找一个就搞定，但是一番搜索后发现网上的不如人意，不优雅，于是决定自己定义一个view来实现
效果截图如下
Screenshot_2017-12-20-23-49-15-441.png
Screenshot_2017-12-20-23-49-32-981.png
实现如下
/**
* Created by sqzglg on 2017/10/10.
* 仿微信朋友圈图片展示
*/
public class FriendsCircleImageLayout extends 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 FriendsCircleImageLayout(Context context) {
this(context, null);
}
public FriendsCircleImageLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FriendsCircleImageLayout(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 <= 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 < mColumnCount) {
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<String> imageUrls) {
removeAllViews();
if (AppUtil.isEmpty(imageUrls)) {
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++) {
AppImageView imageView = new AppImageView(getContext());
imageView.setImageURI(imageUrls.get(i));
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;
}
}
使用
FriendsCircleActivity
public class FriendsCircleActivity extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTitle("仿微信朋友圈");
setContentView(R.layout.activity_friends_circle);
RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(new FriendsCircleAdapter(this));
}
}
activity_friends_circle
<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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.ph.test.test.activity.FriendsCircleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
FriendsCircleAdapter
public class FriendsCircleAdapter extends RecyclerView.Adapter {
private String mImageUrl = "http://www.zhlzw.com/UploadFiles/Article_UploadFiles/201204/20120412123910738.jpg";
private Context mContext;
public FriendsCircleAdapter(Context context) {
mContext=context;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ContentViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_friends_circle, parent, false));
}
@Override
public int getItemCount() {
return Integer.MAX_VALUE;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
ContentViewHolder viewHolder = (ContentViewHolder) holder;
viewHolder.mAvatarView.setImageURI(mImageUrl);
viewHolder.mNameTv.setText("张三");
viewHolder.mContentTv.setText("来看美女啦");
//int count = (int) (Math.random() * 9);
List<String> imageUrls = new ArrayList<>();
int count=position%10;
for (int i = 0; i < count; i++) {
imageUrls.add(mImageUrl);
}
viewHolder.mImageLayout.setImageUrls(imageUrls);
}
private static class ContentViewHolder extends RecyclerView.ViewHolder {
private SimpleDraweeView mAvatarView;
private TextView mNameTv;
private TextView mContentTv;
private FriendsCircleImageLayout mImageLayout;
public ContentViewHolder(View itemView) {
super(itemView);
mAvatarView = itemView.findViewById(R.id.friends_circle_item_avatar_view);
mNameTv = itemView.findViewById(R.id.friends_circle_item_name_tv);
mContentTv = itemView.findViewById(R.id.friends_circle_item_content_tv);
mImageLayout = itemView.findViewById(R.id.friends_circle_item_image_layout);
}
}
item_friends_circle
<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="wrap_content"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.ph.test.test.activity.FriendsCircleActivity">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/friends_circle_item_avatar_view"
android:layout_width="40dp"
android:layout_height="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/friends_circle_item_name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"/>
<TextView
android:id="@+id/friends_circle_item_content_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textSize="15sp"/>
<com.ph.test.test.weight.FriendsCircleImageLayout
android:id="@+id/friends_circle_item_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
、、、
