一百行代码实现微信朋友圈九宫格图片显示

2023-10-24 17:34:28

前言
    很多时候我们都在刷微博或者微信朋友圈的时候都会看到很多图片，而这些图片的显示跟我们平时很多控件的显示方式都不一样，而且，当我们仔细去观察后就会发现，他加载的图片都是根据图片数量动态加载的，根据不同的图片数量来用不同的布局显示

当图片是4张的时候，就会形成一个2x2的正方形，除了一张的情况，另外的都是按照九宫格的方式显示和排列图片的。那么这种布局是怎么实现的呢，一开始，好多人都可能认为用原生的GridView就能搞掂，但是，却有几种特殊的情况是GridView解决不了的，例如4张图片的情况，或者1张，其实也可以根据图片的数量然后用几个不同布局的GridView来实现，不过那样的话就复杂得多了。而且处理起来很麻烦，其实，大部分的实现都是通过自定义ViewGroup来实现的，通过代码编写来设定childrenView的layout来实现这种布局，而NineGridView控件就是这么一个东西，代码其实很简单，100行就够了。
代码编写                         
     先自定义一个View集成ViewGroup，编辑器会提示你实现OnLayout方法，实现之，这里我们动态的添加的话其实不用到OnLayout方法，自定义一个layoutChildrenView()用来为子view设定位置就行了，该方法的实现如下：
        这代码里面在调用子view的layout方法的同时设定了本身ViewGroup的高度大小，因为NineGridView的高度是要根据子View的高度来确定的.

  1.     private void layoutChildrenView(){
  2.         int childrenCount = listData.size();

  4.         int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
  5.         int singleHeight = singleWidth;

  7.         //根据子view数量确定高度
  8.         ViewGroup.LayoutParams params = getLayoutParams();
  9.         params.height = singleHeight * rows + gap * (rows - 1);
  10.         setLayoutParams(params);

  12.         for (int i = 0; i < childrenCount; i++) {
  13.             CustomImageView childrenView = (CustomImageView) getChildAt(i);
  14.             childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
  15.             int[] position = findPosition(i);
  16.             int left = (singleWidth + gap) * position[1];
  17.             int top = (singleHeight + gap) * position[0];
  18.             int right = left + singleWidth;
  19.             int bottom = top + singleHeight;

  21.             childrenView.layout(left, top, right, bottom);
  22.         }

  24.     }
复制代码

   添加一个设置图片资源的接口，一般情况下我们都是用在listview来显示数据，而数据都是封装好的，这里提供一个Image封装类，接口和封装类代码如下：  
  1.     public void setImagesData(List<Image> lists) {
  2.         if (lists == null || lists.isEmpty()) {
  3.             return;
  4.         }
  5.         //初始化布局
  6.         generateChildrenLayout(lists.size());
  7.         //这里做一个重用view的处理
  8.         if (listData == null) {
  9.             int i = 0;
  10.             while (i < lists.size()) {
  11.                 CustomImageView iv = generateImageView();
  12.                 addView(iv,generateDefaultLayoutParams());
  13.                 i++;
  14.             }
  15.         } else {
  16.             int oldViewCount = listData.size();
  17.             int newViewCount = lists.size();
  18.             if (oldViewCount > newViewCount) {
  19.                 removeViews(newViewCount - 1, oldViewCount - newViewCount);
  20.             } else if (oldViewCount < newViewCount) {
  21.                 for (int i = 0; i < newViewCount - oldViewCount; i++) {
  22.                     CustomImageView iv = generateImageView();
  23.                     addView(iv,generateDefaultLayoutParams());
  24.                 }
  25.             }
  26.         }
  27.         listData = lists;
  28.         layoutChildrenView();
  29.     }
复制代码

Image封装类：

  2. public class Image {
  3.     private String url;
  4.     private int width;
  5.     private int height;

  7.     public Image(String url, int width, int height) {
  8.         this.url = url;
  9.         this.width = width;
  10.         this.height = height;
  11.         L.i(toString());
  12.     }

  14.     public String getUrl() {
  15.         return url;
  16.     }

  18.     public void setUrl(String url) {
  19.         this.url = url;
  20.     }

  22.     public int getWidth() {
  23.         return width;
  24.     }

  26.     public void setWidth(int width) {
  27.         this.width = width;
  28.     }

  30.     public int getHeight() {
  31.         return height;
  32.     }

  34.     public void setHeight(int height) {
  35.         this.height = height;
  36.     }

  38.     @Override
  39.     public String toString() {

  41.         return "image---->>url="+url+"width="+width+"height"+height;
  42.     }
  43. }
复制代码




在添加数据的时候，我们要根据图片的个数来确定具体的布局情况，这个函数就是generateChildrenLayout(),实现如下：
  1.     /**
  2.      * 根据图片个数确定行列数量
  3.      * 对应关系如下
  4.      * num        row        column
  5.      * 1           1        1
  6.      * 2           1        2
  7.      * 3           1        3
  8.      * 4           2        2
  9.      * 5           2        3
  10.      * 6           2        3
  11.      * 7           3        3
  12.      * 8           3        3
  13.      * 9           3        3
  14.      *
  15.      * @param length
  16.      */
  17.     private void generateChildrenLayout(int length) {
  18.         if (length <= 3) {
  19.             rows = 1;
  20.             columns = length;
  21.         } else if (length <= 6) {
  22.             rows = 2;
  23.             columns = 3;
  24.             if (length == 4) {
  25.                 columns = 2;
  26.             }
  27.         } else {
  28.             rows = 3;
  29.             columns = 3;
  30.         }
  31.     }
复制代码
这些，就是NineGridLayout的核心代码了，是不是很简单，整个类的源码如下：
  1. package com.weixinninegridlayout;

  3. import android.content.Context;
  4. import android.graphics.Color;
  5. import android.graphics.drawable.ColorDrawable;
  6. import android.util.AttributeSet;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.ImageView;

  11. import java.util.List;


  14. /**
  15. * Created by Pan_ on 2015/2/2.
  16. */
  17. public class NineGridlayout extends ViewGroup {

  19.     /**
  20.      * 图片之间的间隔
  21.      */
  22.     private int gap = 5;
  23.     private int columns;//
  24.     private int rows;//
  25.     private List listData;
  26.     private int totalWidth;

  28.     public NineGridlayout(Context context) {
  29.         super(context);
  30.     }

  32.     public NineGridlayout(Context context, AttributeSet attrs) {
  33.         super(context, attrs);
  34.         ScreenTools screenTools=ScreenTools.instance(getContext());
  35.         totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
  36.     }

  38.     @Override
  39.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  40.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  41.     }

  43.     @Override
  44.     protected void onLayout(boolean changed, int l, int t, int r, int b) {

  46.     }
  47.     private void layoutChildrenView(){
  48.         int childrenCount = listData.size();

  50.         int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
  51.         int singleHeight = singleWidth;

  53.         //根据子view数量确定高度
  54.         ViewGroup.LayoutParams params = getLayoutParams();
  55.         params.height = singleHeight * rows + gap * (rows - 1);
  56.         setLayoutParams(params);

  58.         for (int i = 0; i < childrenCount; i++) {
  59.             CustomImageView childrenView = (CustomImageView) getChildAt(i);
  60.             childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
  61.             int[] position = findPosition(i);
  62.             int left = (singleWidth + gap) * position[1];
  63.             int top = (singleHeight + gap) * position[0];
  64.             int right = left + singleWidth;
  65.             int bottom = top + singleHeight;

  67.             childrenView.layout(left, top, right, bottom);
  68.         }

  70.     }


  73.     private int[] findPosition(int childNum) {
  74.         int[] position = new int[2];
  75.         for (int i = 0; i < rows; i++) {
  76.             for (int j = 0; j < columns; j++) {
  77.                 if ((i * columns + j) == childNum) {
  78.                     position[0] = i;//行
  79.                     position[1] = j;//列
  80.                     break;
  81.                 }
  82.             }
  83.         }
  84.         return position;
  85.     }

  87.     public int getGap() {
  88.         return gap;
  89.     }

  91.     public void setGap(int gap) {
  92.         this.gap = gap;
  93.     }


  96.     public void setImagesData(List<Image> lists) {
  97.         if (lists == null || lists.isEmpty()) {
  98.             return;
  99.         }
  100.         //初始化布局
  101.         generateChildrenLayout(lists.size());
  102.         //这里做一个重用view的处理
  103.         if (listData == null) {
  104.             int i = 0;
  105.             while (i < lists.size()) {
  106.                 CustomImageView iv = generateImageView();
  107.                 addView(iv,generateDefaultLayoutParams());
  108.                 i++;
  109.             }
  110.         } else {
  111.             int oldViewCount = listData.size();
  112.             int newViewCount = lists.size();
  113.             if (oldViewCount > newViewCount) {
  114.                 removeViews(newViewCount - 1, oldViewCount - newViewCount);
  115.             } else if (oldViewCount < newViewCount) {
  116.                 for (int i = 0; i < newViewCount - oldViewCount; i++) {
  117.                     CustomImageView iv = generateImageView();
  118.                     addView(iv,generateDefaultLayoutParams());
  119.                 }
  120.             }
  121.         }
  122.         listData = lists;
  123.         layoutChildrenView();
  124.     }


  127.     /**
  128.      * 根据图片个数确定行列数量
  129.      * 对应关系如下
  130.      * num        row        column
  131.      * 1           1        1
  132.      * 2           1        2
  133.      * 3           1        3
  134.      * 4           2        2
  135.      * 5           2        3
  136.      * 6           2        3
  137.      * 7           3        3
  138.      * 8           3        3
  139.      * 9           3        3
  140.      *
  141.      * @param length
  142.      */
  143.     private void generateChildrenLayout(int length) {
  144.         if (length <= 3) {
  145.             rows = 1;
  146.             columns = length;
  147.         } else if (length <= 6) {
  148.             rows = 2;
  149.             columns = 3;
  150.             if (length == 4) {
  151.                 columns = 2;
  152.             }
  153.         } else {
  154.             rows = 3;
  155.             columns = 3;
  156.         }
  157.     }

  159.     private CustomImageView generateImageView() {
  160.         CustomImageView iv = new CustomImageView(getContext());
  161.         iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
  162.         iv.setOnClickListener(new OnClickListener() {
  163.             @Override
  164.             public void onClick(View v) {

  166.             }
  167.         });
  168.         iv.setBackgroundColor(Color.parseColor("#f5f5f5"));
  169.         return iv;
  170.     }


  173. }
复制代码
    因为微信那些图片在点击的时候是有一个灰色的蒙版的，实现起来其实很简单，我们这里在自定义一个imageview，叫做CustomImageView，复写onTouchEvent方法，在onKeyDown的时候添加一个colorfilter，然后再onKeyUp的时候clear掉，这样就实现了点击有灰色蒙版的效果，同时为了方便项目加载图片的解耦，我加载图片用了picasso这个开源库，这个开源库的地址为点击打开链接 ,具体的代码如下：
  1. package com.weixinninegridlayout;

  3. import android.content.Context;
  4. import android.graphics.Color;
  5. import android.graphics.PorterDuff;
  6. import android.graphics.drawable.ColorDrawable;
  7. import android.graphics.drawable.Drawable;
  8. import android.text.TextUtils;
  9. import android.util.AttributeSet;
  10. import android.view.MotionEvent;
  11. import android.widget.ImageView;

  13. import com.squareup.picasso.Picasso;


  16. /**
  17. * Created by Pan_ on 2015/2/2.
  18. */
  19. public class CustomImageView extends ImageView {
  20.     private String url;
  21.     private boolean isAttachedToWindow;

  23.     public CustomImageView(Context context, AttributeSet attrs) {
  24.         super(context, attrs);
  25.     }

  27.     public CustomImageView(Context context) {
  28.         super(context);
  29.     }


  32.     @Override
  33.     public boolean onTouchEvent(MotionEvent event) {

  35.         switch (event.getAction()) {
  36.             case MotionEvent.ACTION_DOWN:
  37.                 Drawable drawable=getDrawable();
  38.                 if(drawable!=null) {
  39.                     drawable.mutate().setColorFilter(Color.GRAY,
  40.                             PorterDuff.Mode.MULTIPLY);
  41.                 }
  42.                 break;
  43.             case MotionEvent.ACTION_MOVE:
  44.                 break;
  45.             case MotionEvent.ACTION_CANCEL:
  46.             case MotionEvent.ACTION_UP:
  47.                 Drawable drawableUp=getDrawable();
  48.                 if(drawableUp!=null) {
  49.                     drawableUp.mutate().clearColorFilter();
  50.                 }
  51.                 break;
  52.         }

  54.         return super.onTouchEvent(event);
  55.     }

  57.     @Override
  58.     public void onAttachedToWindow() {
  59.         isAttachedToWindow = true;
  60.         setImageUrl(url);
  61.         super.onAttachedToWindow();
  62.     }

  64.     @Override
  65.     public void onDetachedFromWindow() {
  66.         Picasso.with(getContext()).cancelRequest(this);
  67.         isAttachedToWindow = false;
  68.         setImageBitmap(null);
  69.         super.onDetachedFromWindow();
  70.     }


  73.     public void setImageUrl(String url) {
  74.         if (!TextUtils.isEmpty(url)) {
  75.             this.url = url;
  76.             if (isAttachedToWindow) {
  77.                 Picasso.with(getContext()).load(url).placeholder(new ColorDrawable(Color.parseColor("#f5f5f5"))).into(this);
  78.             }
  79.         }
  80.     }
  81. }

源码要的留言

一百行代码实现微信朋友圈九宫格图片显示

上一篇：微信小程序 View：flex 布局


下一篇：[1]微信小程序技能点-自定义组件-slot与组件内数据