国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置：首页 > php开源 > 综合技术 > 一百行代码实现微信朋友圈九宫格图片显示

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

来源：程序员人生   发布时间：2015-05-14 08:44:43 阅读次数：9006次
前言
    很多时候我们都在刷微博或微信朋友圈的时候都会看到很多图片，而这些图片的显示跟我们平时很多控件的显示方式都不1样，而且，当我们仔细去视察后就会发现，他加载的图片都是根据图片数量动态加载的，根据不同的图片数量来用不同的布局显示

当图片是4张的时候，就会构成1个2x2的正方形，除1张的情况，另外的都是依照9宫格的方式显示和排列图片的。那末这类布局是怎样实现的呢，1开始，好多人都可能认为用原生的GridView就可以弄掂，但是，却有几种特殊的情况是GridView解决不了的，例如4张图片的情况，或1张，其实也能够根据图片的数量然后用几个不同布局的GridView来实现，不过那样的话就复杂很多了。而且处理起来很麻烦，其实，大部份的实现都是通过自定义ViewGroup来实现的，通过代码编写来设定childrenView的layout来实现这类布局，而NineGridView控件就是这么1个东西，代码其实很简单，100行就够了。
代码编写                         
     先自定义1个View集成ViewGroup，编辑器会提示你实现OnLayout方法，实现之，这里我们动态的添加的话其实不用到OnLayout方法，自定义1个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.     }
复制代码

   添加1个设置图片资源的接口，1般情况下我们都是用在listview来显示数据，而数据都是封装好的，这里提供1个Image封装类，接口和封装类代码以下：  
  1.     public void setImagesData(List<Image> lists) {
  2.         if (lists == null || lists.isEmpty()) {
  3.             return;
  4.         }
  5.         //初始化布局
  6.         generateChildrenLayout(lists.size());
  7.         //这里做1个重用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. 生活不易，码农辛苦
    如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
    程序员人生
------分隔线----------------------------

上一篇 hdu 1544 连续回文子串的个数 构造法

下一篇 辛星浅析git reset和git revert

分享到:
------分隔线----------------------------
为码而活
为码而活
积分：4237
15粉丝
7关注
栏目热点

程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作

声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！

粤ICP备14040726号-1   2015-2020 程序员人生 版权所有

平平安安 备案网站
关闭
程序员人生