一分钟学会微信朋友圈九宫格图片显示

Android程序员面试宝典

效果图：

配套视频：

http://www.toutiao.com/i6435364133960417793/

第一步，拷贝如下代码：

public class FlowLayout extends ViewGroup {
    private float mVerticalSpacing;
    private float mHorizontalSpacing;

public FlowLayout(Context context) {
        super(context);
        init(null, 0, 0);
}
public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0, 0);
 }

private void init(AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    final Context context = getContext();
    final Resources resources = getResources();
    final float density = resources.getDisplayMetrics().density;
    int vSpace = (int) (4 * density);
    int hSpace = vSpace;
    if (attrs != null) {
    // Load attributes
   final TypedArray a = context.obtainStyledAttributes(
                    attrs, R.styleable.FlowLayout, defStyleAttr, defStyleRes);
        // Load clip touch corner radius
 vSpace = a.getDimensionPixelOffset(R.styleable.FlowLayout_verticalSpace, vSpace);
 hSpace = a.getDimensionPixelOffset(R.styleable.FlowLayout_horizontalSpace, hSpace);
 a.recycle();
}
   setVerticalSpacing(vSpace);
   setHorizontalSpacing(hSpace);
}

 public void setHorizontalSpacing(float pixelSize) {
        mHorizontalSpacing = pixelSize;
}

public void setVerticalSpacing(float pixelSize) {
        mVerticalSpacing = pixelSize;
}

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int selfWidth = resolveSize(0, widthMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int paddingBottom = getPaddingBottom();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;
        //通过计算每一个子控件的高度，得到自己的高度
        for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
            View childView = getChildAt(i);
            LayoutParams childLayoutParams = childView.getLayoutParams();
            childView.measure(
                 getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight,
                            childLayoutParams.width),
                 getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom,
                            childLayoutParams.height));
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            lineHeight = Math.max(childHeight, lineHeight);
            if (childLeft + childWidth + paddingRight > selfWidth) {
                childLeft = paddingLeft;
                childTop += mVerticalSpacing + lineHeight;
                lineHeight = childHeight;
            } else {
                childLeft += childWidth + mHorizontalSpacing;
            }
        }
      int wantedHeight = childTop + lineHeight + paddingBottom;
      setMeasuredDimension(selfWidth, resolveSize(wantedHeight, heightMeasureSpec));
}

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int myWidth = r - l;

        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();

        int childLeft = paddingLeft;
        int childTop = paddingTop;

        int lineHeight = 0;

        //根据子控件的宽高，计算子控件应该出现的位置。
        for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
            View childView = getChildAt(i);

            if (childView.getVisibility() == View.GONE) {
                continue;
            }

            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();

            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > myWidth) {
                childLeft = paddingLeft;
                childTop += mVerticalSpacing + lineHeight;
                lineHeight = childHeight;
            }
            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
            childLeft += childWidth + mHorizontalSpacing;
        }
    }
}

第二步，复制如下代码到XML：

<com.itheima.booster.widget.FlowLayout
            android:id="@+id/fl_image"
            android:layout_marginTop="@dimen/lay_8"
            android:paddingBottom="2dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:horizontalSpace="4dp"
            app:verticalSpace="4dp" />

第三步，拷贝如下JAVA代码：

public void getFlowLayoutImages() {
          flowLayout.removeAllViews();
          if (mImageLists != null && mImageLists.size() > 0) {
              flowLayout.setVisibility(View.VISIBLE);
              LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams((int) TDevice.dip2px(HMApp.context(), 85)
                        , (int) TDevice.dip2px(HMApp.context(), 85));
                for (int i = 0; i < mImageLists.size(); i++) {
                    final int currentIndex = i;
                    ImageView imageView = new ImageView(HMApp.context());
                    imageView.setLayoutParams(layoutParams);
                    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    final String path = mImageLists.get(i);
                    imageView.setTag(R.id.iv_tweet_image, i);
                    ImageUtil.loadImage(imageView,path);
                    imageView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                      Intent intent = new Intent(mContext, PicDetailActivity.class);
                      intent.putExtra(JsBinder.CUR_IMG_URL, path);
                      intent.putExtra(ConstantUtils.ALL_IMG_URL, mImageLists);
                      mContext.startActivity(intent);
                    }
                  });
                    flowLayout.addView(imageView);
                }
            } else {
                flowLayout.setVisibility(View.GONE);
            }

• 欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视频

• 微信公众号名称：Android干货程序员

•