先来看看效果把
- 怕大家误以为是上传用到的相册,所以赶紧放示例图说明下哈哈。这个控件相当简单,用自定义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
好了,核心代码就这些,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
从事开发这么久,一直都没有写过或者分享过什么,这篇文章也是给自己练练笔,以后也会努力分享些干货十足的知识和一些java虚拟机学习心得。