先来看看效果把
QQ截图.png
- 怕大家误以为是上传用到的相册，所以赶紧放示例图说明下哈哈。这个控件相当简单，用自定义ViewGroup很轻松实现，即使不会自定义控件的朋友，也能通过几个View的隐藏设置大小来硬实现。这里我们就简单的使用自定义ViewGroup来实现把
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.wisdom.childshow.R;
import java.util.List;
/**
* Created by xyu on 2017/12/19.
* Describe:仿微信一到四张图片显示
*/
public class FourImagesViewGroup extends ViewGroup {
/**
* 图片之间的间隙距离
*/
private int imagePadding;
public FourImagesViewGroup(Context context) {
this(context, null);
}
public FourImagesViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
if (attrs != null) {
TypedArray typedArr = context.obtainStyledAttributes(attrs,
R.styleable.FourImagesViewGroup);
imagePadding = typedArr.getDimensionPixelSize(
R.styleable.FourImagesViewGroup_imagePadding, 0);
typedArr.recycle();
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
layoutChildrens();
}
private void layoutChildrens() {
int contentWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int contentHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int childCount = getChildCount();
View firstChild = getChildAt(0);
View secondChild = getChildAt(1);
View thirdChild = getChildAt(2);
View fouthChild = getChildAt(3);
switch (childCount) {
case 1:
//一张图片时直接占用整个父控件
firstChild.layout(getLeft(), getTop(), getRight(), getBottom());
break;
case 2:
//两张图片，各占用一半宽度，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom());
break;
case 3:
//三张图片，第一章用一半宽度，第二和第三张使用另外一半宽度，并平分高度，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
thirdChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
break;
case 4:
//四张图片，每张图片都平分高和宽，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom() - contentHeight / 2 - imagePadding / 2);
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
thirdChild.layout(getLeft(), getTop() + contentHeight / 2 + imagePadding / 2, getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
fouthChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
break;
default:
break;
}
}
*attrs
<declare-styleable name="FourImagesViewGroup">
<attr name="imagePadding" format="dimension"/>
</declare-styleable>
好了，核心代码就这些，imagepadding我们将其提取成可配置属性，它代表了图片之间的间隙距离。可以发现这样的效果使用自定义ViewGroup是非常简单的。我们这个ViewGroup不仅是图片，其他View也可以。这里我倒没考虑其它View了，控件名都已经命名为FourImagesViewGroup了<__<，附上该效果的完整代码
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.wisdom.childshow.R;
import java.util.List;
/**
* Created by xyu on 2017/12/19.
* Describe:仿微信一到四张图片显示
*/
public class FourImagesViewGroup extends ViewGroup {
private ImageLoader mImageLoader;
/**
* 图片之间的间隙距离
*/
private int imagePadding;
public FourImagesViewGroup(Context context) {
this(context, null);
}
public FourImagesViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
if (attrs != null) {
TypedArray typedArr = context.obtainStyledAttributes(attrs,
R.styleable.FourImagesViewGroup);
imagePadding = typedArr.getDimensionPixelSize(
R.styleable.FourImagesViewGroup_imagePadding, 0);
typedArr.recycle();
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
layoutChildrens();
}
private void layoutChildrens() {
int contentWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int contentHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int childCount = getChildCount();
View firstChild = getChildAt(0);
View secondChild = getChildAt(1);
View thirdChild = getChildAt(2);
View fouthChild = getChildAt(3);
switch (childCount) {
case 1:
//一张图片时直接占用整个父控件
firstChild.layout(getLeft(), getTop(), getRight(), getBottom());
break;
case 2:
//两张图片，各占用一半宽度，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom());
break;
case 3:
//三张图片，第一章用一半宽度，第二和第三张使用另外一半宽度，并平分高度，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
thirdChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
break;
case 4:
//四张图片，每张图片都平分高和宽，并计算之间的间隙
firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom() - contentHeight / 2 - imagePadding / 2);
secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
thirdChild.layout(getLeft(), getTop() + contentHeight / 2 + imagePadding / 2, getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
fouthChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
break;
default:
break;
}
}
public void setImages(List<Object> imageUrls) {
if (mImageLoader == null) throw new RuntimeException("请先设置图片加载器");
if (imageUrls == null) return;
int newCount = imageUrls.size() > 4 ? 4 : imageUrls.size();
int childCount = getChildCount();
//复用一下
if (childCount > newCount) {
removeViews(newCount, childCount - newCount);
} else if (childCount < newCount) {
for (int i = childCount; i < newCount; i++) {
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
addView(imageView);
}
}
for (int i = 0; i < newCount; i++) {
mImageLoader.loadImage((ImageView) getChildAt(i), imageUrls.get(i));
}
}
/**
* 图片加载的方式由使用者决定
* @param imageLoader
*/
public void setImageLoader(ImageLoader imageLoader) {
this.mImageLoader = imageLoader;
}
/**
* 图片加载接口
*/
public interface ImageLoader {
void loadImage(ImageView iv, Object res);
}
}
从事开发这么久，一直都没有写过或者分享过什么，这篇文章也是给自己练练笔，以后也会努力分享些干货十足的知识和一些java虚拟机学习心得。
网友评论