码迷，mamicode.com
首页 > 微信 > 详细

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

时间：2015-04-29 17:10:02      阅读：308      评论：0      收藏：0      [点我收藏+]

标签：android

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

当图片是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. }

源码要的留言

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

标签：android

原文地址：http://blog.csdn.net/u014608640/article/details/45368377
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！