程序员人生 网站导航

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

栏目:综合技术时间:2015-05-14 08:44:43
前言
    很多时候我们都在刷微博或微信朋友圈的时候都会看到很多图片,而这些图片的显示跟我们平时很多控件的显示方式都不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();

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

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

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

  17.             childrenView.layout(left, top, right, bottom);
  18.         }

  19.     }
复制代码

   添加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封装类:

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

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

  11.     public String getUrl() {
  12.         return url;
  13.     }

  14.     public void setUrl(String url) {
  15.         this.url = url;
  16.     }

  17.     public int getWidth() {
  18.         return width;
  19.     }

  20.     public void setWidth(int width) {
  21.         this.width = width;
  22.     }

  23.     public int getHeight() {
  24.         return height;
  25.     }

  26.     public void setHeight(int height) {
  27.         this.height = height;
  28.     }

  29.     @Override
  30.     public String toString() {

  31.         return "image---->>url="+url+"width="+width+"height"+height;
  32.     }
  33. }
复制代码




在添加数据的时候,我们要根据图片的个数来肯定具体的布局情况,这个函数就是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;

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

  9. import java.util.List;


  10. /**
  11. * Created by Pan_ on 2015/2/2.
  12. */
  13. public class NineGridlayout extends ViewGroup {

  14.     /**
  15.      * 图片之间的间隔
  16.      */
  17.     private int gap = 5;
  18.     private int columns;//
  19.     private int rows;//
  20.     private List listData;
  21.     private int totalWidth;

  22.     public NineGridlayout(Context context) {
  23.         super(context);
  24.     }

  25.     public NineGridlayout(Context context, AttributeSet attrs) {
  26.         super(context, attrs);
  27.         ScreenTools screenTools=ScreenTools.instance(getContext());
  28.         totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
  29.     }

  30.     @Override
  31.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  32.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  33.     }

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

  36.     }
  37.     private void layoutChildrenView(){
  38.         int childrenCount = listData.size();

  39.         int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
  40.         int singleHeight = singleWidth;

  41.         //根据子view数量肯定高度
  42.         ViewGroup.LayoutParams params = getLayoutParams();
  43.         params.height = singleHeight * rows + gap * (rows - 1);
  44.         setLayoutParams(params);

  45.         for (int i = 0; i < childrenCount; i++) {
  46.             CustomImageView childrenView = (CustomImageView) getChildAt(i);
  47.             childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
  48.             int[] position = findPosition(i);
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐