android开发中论坛帖子图片的排版

有些时候在论坛的图片排版问题上不想光用九宫格，因为不管每行回复是几张图片都用九宫格的话，有时候并不是那么整齐。所以有时候会根据UI的要求，对不同的张数进行不同的排版。比如

其实对于这种图片的排版，在实现上很简单。只不过是重写ViewGroup而已，没什么技术含量，下面直接贴出代码

/**
 * Created by LZC on 2017/1/6.
 */

public class MutilImageView extends ViewGroup{

    private List<String> mImagesList = new ArrayList<>();
    //图片宽高比都是8:5

    //屏幕两边的margin是10dp ,图片和图片之间是3dp
    private float mMargin;//屏幕两边的margin
    private float mPerMargin;//图片和图片之间
    private float mFirstLineHeight;//第一行高度
    private float mSecondLineHeight;//第二行高度
    private float mThirdLineHeight;//第三行高度
    private float mFirstLinePerWidth;//第一行每张图片的宽度
    private float mSecondLinePerWidth;//第二行每张图片的宽度
    private float mThirdLinePerWidth;//第三行每张图片的宽度

    private float mWidth;//整个控件宽度
    private float mHeight;//整个控件高度

    private int mCurrentRow;//正在排第几行
    private float mLineOnLayoutWidth;//某一行已经排了多宽
    public MutilImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mMargin      = DisplayUtils.dip2px(context,10);
        mPerMargin   = DisplayUtils.dip2px(context,3);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);

mFirstLineHeight = 0;

mSecondLineHeight = 0;

mThirdLineHeight = 0;

if(mImagesList.size() > 0){ if(mImagesList.size() < 4){ //第一排每张图片的宽度 mFirstLinePerWidth = (mWidth - 2*mMargin - (mImagesList.size()-1)*mPerMargin)/mImagesList.size(); mFirstLineHeight = mFirstLinePerWidth * 5/8; }else if(mImagesList.size() == 4){ mFirstLinePerWidth = mSecondLinePerWidth = (mWidth - 2 * mMargin - mPerMargin)/2; mFirstLineHeight = mSecondLineHeight = mFirstLinePerWidth * 5/8; }else if(mImagesList.size() == 5){ mFirstLinePerWidth = (mWidth - 2*mMargin - 2*mPerMargin)/3; mSecondLinePerWidth = (mWidth - 2 * mMargin - mPerMargin)/2; mFirstLineHeight = mFirstLinePerWidth * 5/8; mSecondLineHeight = mSecondLinePerWidth * 5/8; }else{ mFirstLinePerWidth = mSecondLinePerWidth = mThirdLinePerWidth = (mWidth - 2*mMargin - 2*mPerMargin)/3; mFirstLineHeight = mSecondLineHeight = mThirdLineHeight = mFirstLinePerWidth * 5/8; } } mHeight = mFirstLineHeight + mSecondLineHeight + mThirdLineHeight + (mSecondLineHeight == 0?mSecondLineHeight : mPerMargin) + (mThirdLineHeight == 0 ? mThirdLineHeight: mPerMargin); setMeasuredDimension((int)mWidth,(int)mHeight); } private int mLeft; private int mTop; private int mRight; private int mBottom; @Override protected void onLayout(boolean b, int i, int i1, int i2, int i3) { if(getChildCount() > 0){ mCurrentRow = 0; mLineOnLayoutWidth = 0; for(int k = 0; k < getChildCount(); k ++){ if(mCurrentRow == 0){//第一行排版 if(mLineOnLayoutWidth + mFirstLinePerWidth > mWidth){//如果要换行 mCurrentRow = mCurrentRow + 1; mLineOnLayoutWidth = mMargin; mLeft = (int)mLineOnLayoutWidth; mTop = (int)(mFirstLineHeight + mPerMargin); mRight = (int)(mLineOnLayoutWidth + mSecondLinePerWidth); mBottom = (int)(mFirstLineHeight + mPerMargin + mSecondLineHeight); mLineOnLayoutWidth = mLineOnLayoutWidth + mPerMargin + mSecondLinePerWidth; }else{ mLeft = (int)(k == 0 ? mMargin : (mLineOnLayoutWidth + mPerMargin)); mTop = 0; mRight = (int)(mLineOnLayoutWidth + (k == 0?mMargin : mPerMargin)+mFirstLinePerWidth); mBottom = (int)mFirstLineHeight; mLineOnLayoutWidth = mLineOnLayoutWidth + (k== 0 ?mMargin : mPerMargin)+mFirstLinePerWidth; } }else if(mCurrentRow == 1){//第二行的排版 if(mLineOnLayoutWidth + mSecondLinePerWidth > mWidth){ mCurrentRow = mCurrentRow + 1; mLineOnLayoutWidth = mMargin; mLeft = (int)mLineOnLayoutWidth; mTop = (int)(mFirstLineHeight + 2*mPerMargin + mSecondLineHeight); mRight = (int)(mLineOnLayoutWidth +mThirdLinePerWidth); mBottom = (int)(mFirstLineHeight + 2*mPerMargin + mSecondLineHeight+mThirdLineHeight); mLineOnLayoutWidth = mLineOnLayoutWidth + mPerMargin+mFirstLinePerWidth; }else{ mLeft = (int)mLineOnLayoutWidth; mTop = (int)(mFirstLineHeight + mPerMargin); mRight = (int)(mLineOnLayoutWidth + mSecondLinePerWidth); mBottom = (int)(mFirstLineHeight + mPerMargin + mSecondLineHeight); mLineOnLayoutWidth = mLineOnLayoutWidth + mPerMargin + mSecondLinePerWidth; } }else if(mCurrentRow == 2){ if(mLineOnLayoutWidth + mThirdLinePerWidth > mWidth){//最多只有三行，最后一行再换行就不操作了 mCurrentRow = mCurrentRow + 1; mLineOnLayoutWidth = 0; }else{ mLeft = (int)mLineOnLayoutWidth; mTop = (int)(mFirstLineHeight + 2*mPerMargin + mSecondLineHeight); mRight = (int)(mLineOnLayoutWidth +mThirdLinePerWidth); mBottom = (int)(mFirstLineHeight + 2*mPerMargin + mSecondLineHeight+mThirdLineHeight); mLineOnLayoutWidth = mLineOnLayoutWidth + mPerMargin+mFirstLinePerWidth; } } getChildAt(k).layout(mLeft,mTop,mRight,mBottom); } } } public void setImageList(List<String> imageList){ if(imageList != null && imageList.size() > 0){ mImagesList.clear(); mImagesList.addAll(imageList); removeAllViews(); for(int i = 0; i < mImagesList.size(); i ++){ ImageView ratioImageView = new ImageView(getContext()); ratioImageView.setBackgroundResource(R.color.grey); ratioImageView.setScaleType(ImageView.ScaleType.FIT_XY); //给ratioImageView 加载网络图片 GlideImageLoadUtils.displayImage(getContext(),imageList.get(i),ratioImageView,0); addView(ratioImageView,i); } invalidate(); } }}