找回密码
当前位置：Mikel > 开发笔记 > Android > 正文

Android：NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件 - HMYANG314的专栏 - 博客频道 - CSDN.NET

2017-05-04 分类：Android 阅读(1692) 评论(0)

NineGridLayout一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件。一、介绍 1、当只有1张图时，可以自己定制图片宽高，也可以使用默认九宫格的宽高； 2、当只有4张图时，以2*2的方式显示； 3、除以上两种情况下，都是按照3列方式显示，但这时有一些细节： a、如果只有9张图，当然是以3*3的方式

来源： Android：NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件 – HMYANG314的专栏 – 博客频道 – CSDN.NET

 转载请注明出处：http://blog.csdn.net/hmyang314/article/details/51415396

NineGridLayout

一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件。

GitHub：https://github.com/HMY314/NineGridLayout

一、介绍

    1、当只有1张图时，可以自己定制图片宽高，也可以使用默认九宫格的宽高；
    2、当只有4张图时，以2*2的方式显示；
    3、除以上两种情况下，都是按照3列方式显示，但这时有一些细节：
        a、如果只有9张图，当然是以3*3的方式显示；
        b、如果超过9张图，可以设置是否全部显示。
            如果设置不完全显示，则按照3*3的方式显示，但是在第9张图上会有一个带“+”号的数字，
            代表还有几张没有显示，这里是模仿了QQ空间图片超出9张的显示方式；
            如果设置全部显示，理所当然的将所有图片都显示出来。
    4、图片被按下时，会有一个变暗的效果，这也是模仿微信朋友圈的效果。

二、使用方法

1、核心类是NineGridLayout，继承自ViewGroup的抽象类，所以我们实际项目使用需要继承它，并要实现3个方法，如下：

view plain copy

在CODE上查看代码片派生到我的代码片

  1. public abstract class NineGridLayout extends ViewGroup {
  2.     //******************************其他代码省略**************************
  4.         /**
  5.          * 显示一张图片
  6.          * @param imageView
  7.          * @param url
  8.          * @param parentWidth 父控件宽度
  9.          * @return true 代表按照九宫格默认大小显示，false 代表按照自定义宽高显示
  10.          */
  11.         protected abstract boolean displayOneImage(RatioImageView imageView, String url, int parentWidth);
  13.         protected abstract void displayImage(RatioImageView imageView, String url);
  15.         /**
  16.          * 点击图片时执行
  17.          */
  18.         protected abstract void onClickImage(int position, String url, List<String> urlList);
  19.     }

2、我这里用NineGridTestLayout继承NineGridLayout实现，displayOneImage()与displayImage()中的参数都是显示图片需要的，我这里用的是ImageLoader显示图片，当然你也可以用其他的。

view plain copy

在CODE上查看代码片派生到我的代码片

  1. public class NineGridTestLayout extends NineGridLayout {
  3.      protected static final int MAX_W_H_RATIO = 3;
  5.      public NineGridTestLayout(Context context) {
  6.          super(context);
  7.      }
  9.      public NineGridTestLayout(Context context, AttributeSet attrs) {
  10.          super(context, attrs);
  11.      }
  13.      @Override
  14.      protected boolean displayOneImage(final RatioImageView imageView, String url, final int parentWidth) {
  16.         //这里是只显示一张图片的情况，显示图片的宽高可以根据实际图片大小自由定制，parentWidth 为该layout的宽度
  17.          ImageLoader.getInstance().displayImage(imageView, url, ImageLoaderUtil.getPhotoImageOption(), new ImageLoadingListener() {
  18.              @Override
  19.              public void onLoadingStarted(String imageUri, View view) {
  21.              }
  23.              @Override
  24.              public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
  26.              }
  28.              @Override
  29.              public void onLoadingComplete(String imageUri, View view, Bitmap bitmap) {
  30.                  int w = bitmap.getWidth();
  31.                  int h = bitmap.getHeight();
  33.                  int newW;
  34.                  int newH;
  35.                  if (h > w * MAX_W_H_RATIO) {//h:w = 5:3
  36.                      newW = parentWidth / 2;
  37.                      newH = newW * 5 / 3;
  38.                  } else if (h < w) {//h:w = 2:3
  39.                      newW = parentWidth * 2 / 3;
  40.                      newH = newW * 2 / 3;
  41.                  } else {//newH:h = newW :w
  42.                      newW = parentWidth / 2;
  43.                      newH = h * newW / w;
  44.                  }
  45.                  setOneImageLayoutParams(imageView, newW, newH);
  46.              }
  48.              @Override
  49.              public void onLoadingCancelled(String imageUri, View view) {
  51.              }
  52.          });
  53.          return false;// true 代表按照九宫格默认大小显示(此时不要调用setOneImageLayoutParams)；false 代表按照自定义宽高显示。
  54.      }
  56.      @Override
  57.      protected void displayImage(RatioImageView imageView, String url) {
  58.          ImageLoaderUtil.getImageLoader(mContext).displayImage(url, imageView, ImageLoaderUtil.getPhotoImageOption());
  59.      }
  61.      @Override
  62.      protected void onClickImage(int i, String url, List<String> urlList) {
  63.          Toast.makeText(mContext, “点击了图片” + url, Toast.LENGTH_SHORT).show();
  64.      }
  65. }

3、在xml中实现

view plain copy

在CODE上查看代码片派生到我的代码片

  1. <com.hmy.ninegridlayout.view.NineGridTestLayout xmlns:app=“http://schemas.Android.com/apk/res-auto”
  2.     Android:id=“@+id/layout_nine_grid”
  3.     Android:layout_width=“match_parent”
  4.     android:layout_height=“wrap_content”
  5.     android:layout_marginTop=“8dp”
  6.     app:sapcing=“4dp” />

app:sapcing是设置九宫格中图片之间的间隔。

4、使用：

view plain copy

在CODE上查看代码片派生到我的代码片

  1. public List<String> urlList = new ArrayList<>();//图片url
  2. NineGridTestLayout layout = (NineGridTestLayout) view.findViewById(R.id.layout_nine_grid);
  3. layout.setIsShowAll(false); //当传入的图片数超过9张时，是否全部显示
  4. layout.setSpacing(5); //动态设置图片之间的间隔
  5. layout.setUrlList(urlList); //最后再设置图片url

 

三、核心类

NineGridLayout.java

view plain copy

在CODE上查看代码片派生到我的代码片

  1. /**
  2.  * 描述:
  3.  * 作者：HMY
  4.  * 时间：2016/5/10
  5.  */
  6. public abstract class NineGridLayout extends ViewGroup {
  8.     private static final float DEFUALT_SPACING = 3f;
  9.     private static final int MAX_COUNT = 9;
  11.     protected Context mContext;
  12.     private float mSpacing = DEFUALT_SPACING;
  13.     private int mColumns;
  14.     private int mRows;
  15.     private int mTotalWidth;
  16.     private int mSingleWidth;
  18.     private boolean mIsShowAll = false;
  19.     private boolean mIsFirst = true;
  20.     private List<String> mUrlList = new ArrayList<>();
  22.     public NineGridLayout(Context context) {
  23.         super(context);
  24.         init(context);
  25.     }
  27.     public NineGridLayout(Context context, AttributeSet attrs) {
  28.         super(context, attrs);
  29.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NineGridLayout);
  31.         mSpacing = typedArray.getDimension(R.styleable.NineGridLayout_sapcing, DEFUALT_SPACING);
  32.         typedArray.recycle();
  33.         init(context);
  34.     }
  36.     private void init(Context context) {
  37.         mContext = context;
  38.         if (getListSize(mUrlList) == 0) {
  39.             setVisibility(GONE);
  40.         }
  41.     }
  43.     @Override
  44.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  45.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  46.     }
  48.     @Override
  49.     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
  50.         mTotalWidth = right – left;
  51.         mSingleWidth = (int) ((mTotalWidth – mSpacing * (3 – 1)) / 3);
  52.         if (mIsFirst) {
  53.             notifyDataSetChanged();
  54.             mIsFirst = false;
  55.         }
  56.     }
  58.     /**
  59.      * 设置间隔
  60.      *
  61.      * @param spacing
  62.      */
  63.     public void setSpacing(float spacing) {
  64.         mSpacing = spacing;
  65.     }
  67.     /**
  68.      * 设置是否显示所有图片（超过最大数时）
  69.      *
  70.      * @param isShowAll
  71.      */
  72.     public void setIsShowAll(boolean isShowAll) {
  73.         mIsShowAll = isShowAll;
  74.     }
  76.     public void setUrlList(List<String> urlList) {
  77.         if (getListSize(urlList) == 0) {
  78.             setVisibility(GONE);
  79.             return;
  80.         }
  81.         setVisibility(VISIBLE);
  83.         mUrlList.clear();
  84.         mUrlList.addAll(urlList);
  86.         if (!mIsFirst) {
  87.             notifyDataSetChanged();
  88.         }
  89.     }
  91.     public void notifyDataSetChanged() {
  92.         removeAllViews();
  93.         int size = getListSize(mUrlList);
  94.         if (size > 0) {
  95.             setVisibility(VISIBLE);
  96.         } else {
  97.             setVisibility(GONE);
  98.         }
  100.         if (size == 1) {
  101.             String url = mUrlList.get(0);
  102.             RatioImageView imageView = createImageView(0, url);
  104.             //避免在ListView中一张图未加载成功时，布局高度受其他item影响
  105.             LayoutParams params = getLayoutParams();
  106.             params.height = mSingleWidth;
  107.             setLayoutParams(params);
  108.             imageView.layout(0, 0, mSingleWidth, mSingleWidth);
  110.             boolean isShowDefualt = displayOneImage(imageView, url, mTotalWidth);
  111.             if (isShowDefualt) {
  112.                 layoutImageView(imageView, 0, url, false);
  113.             } else {
  114.                 addView(imageView);
  115.             }
  116.             return;
  117.         }
  119.         generateChildrenLayout(size);
  120.         layoutParams();
  122.         for (int i = 0; i < size; i++) {
  123.             String url = mUrlList.get(i);
  124.             RatioImageView imageView;
  125.             if (!mIsShowAll) {
  126.                 if (i < MAX_COUNT – 1) {
  127.                     imageView = createImageView(i, url);
  128.                     layoutImageView(imageView, i, url, false);
  129.                 } else { //第9张时
  130.                     if (size <= MAX_COUNT) {//刚好第9张
  131.                         imageView = createImageView(i, url);
  132.                         layoutImageView(imageView, i, url, false);
  133.                     } else {//超过9张
  134.                         imageView = createImageView(i, url);
  135.                         layoutImageView(imageView, i, url, true);
  136.                         break;
  137.                     }
  138.                 }
  139.             } else {
  140.                 imageView = createImageView(i, url);
  141.                 layoutImageView(imageView, i, url, false);
  142.             }
  143.         }
  144.     }
  146.     private void layoutParams() {
  147.         int singleHeight = mSingleWidth;
  149.         //根据子view数量确定高度
  150.         LayoutParams params = getLayoutParams();
  151.         params.height = (int) (singleHeight * mRows + mSpacing * (mRows – 1));
  152.         setLayoutParams(params);
  153.     }
  155.     private RatioImageView createImageView(final int i, final String url) {
  156.         RatioImageView imageView = new RatioImageView(mContext);
  157.         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  158.         imageView.setOnClickListener(new OnClickListener() {
  159.             @Override
  160.             public void onClick(View v) {
  161.                 onClickImage(i, url, mUrlList);
  162.             }
  163.         });
  164.         return imageView;
  165.     }
  167.     /**
  168.      * @param imageView
  169.      * @param url
  170.      * @param showNumFlag 是否在最大值的图片上显示还有未显示的图片张数
  171.      */
  172.     private void layoutImageView(RatioImageView imageView, int i, String url, boolean showNumFlag) {
  173.         final int singleWidth = (int) ((mTotalWidth – mSpacing * (3 – 1)) / 3);
  174.         int singleHeight = singleWidth;
  176.         int[] position = findPosition(i);
  177.         int left = (int) ((singleWidth + mSpacing) * position[1]);
  178.         int top = (int) ((singleHeight + mSpacing) * position[0]);
  179.         int right = left + singleWidth;
  180.         int bottom = top + singleHeight;
  182.         imageView.layout(left, top, right, bottom);
  184.         addView(imageView);
  185.         if (showNumFlag) {//添加超过最大显示数量的文本
  186.             int overCount = getListSize(mUrlList) – MAX_COUNT;
  187.             if (overCount > 0) {
  188.                 float textSize = 30;
  189.                 final TextView textView = new TextView(mContext);
  190.                 textView.setText(“+” + String.valueOf(overCount));
  191.                 textView.setTextColor(Color.WHITE);
  192.                 textView.setPadding(0, singleHeight / 2 – getFontHeight(textSize), 0, 0);
  193.                 textView.setTextSize(textSize);
  194.                 textView.setGravity(Gravity.CENTER);
  195.                 textView.setBackgroundColor(Color.BLACK);
  196.                 textView.getBackground().setAlpha(120);
  198.                 textView.layout(left, top, right, bottom);
  199.                 addView(textView);
  200.             }
  201.         }
  202.         displayImage(imageView, url);
  203.     }
  205.     private int[] findPosition(int childNum) {
  206.         int[] position = new int[2];
  207.         for (int i = 0; i < mRows; i++) {
  208.             for (int j = 0; j < mColumns; j++) {
  209.                 if ((i * mColumns + j) == childNum) {
  210.                     position[0] = i;//行
  211.                     position[1] = j;//列
  212.                     break;
  213.                 }
  214.             }
  215.         }
  216.         return position;
  217.     }
  219.     /**
  220.      * 根据图片个数确定行列数量
  221.      *
  222.      * @param length
  223.      */
  224.     private void generateChildrenLayout(int length) {
  225.         if (length <= 3) {
  226.             mRows = 1;
  227.             mColumns = length;
  228.         } else if (length <= 6) {
  229.             mRows = 2;
  230.             mColumns = 3;
  231.             if (length == 4) {
  232.                 mColumns = 2;
  233.             }
  234.         } else {
  235.             mColumns = 3;
  236.             if (mIsShowAll) {
  237.                 mRows = length / 3;
  238.                 int b = length % 3;
  239.                 if (b > 0) {
  240.                     mRows++;
  241.                 }
  242.             } else {
  243.                 mRows = 3;
  244.             }
  245.         }
  247.     }
  249.     protected void setOneImageLayoutParams(RatioImageView imageView, int width, int height) {
  250.         imageView.setLayoutParams(new LayoutParams(width, height));
  251.         imageView.layout(0, 0, width, height);
  253.         LayoutParams params = getLayoutParams();
  254. //        params.width = width;
  255.         params.height = height;
  256.         setLayoutParams(params);
  257.     }
  259.     private int getListSize(List<String> list) {
  260.         if (list == null || list.size() == 0) {
  261.             return 0;
  262.         }
  263.         return list.size();
  264.     }
  266.     private int getFontHeight(float fontSize) {
  267.         Paint paint = new Paint();
  268.         paint.setTextSize(fontSize);
  269.         Paint.FontMetrics fm = paint.getFontMetrics();
  270.         return (int) Math.ceil(fm.descent – fm.ascent);
  271.     }
  273.     /**
  274.      * @param imageView
  275.      * @param url
  276.      * @param parentWidth 父控件宽度
  277.      * @return true 代表按照九宫格默认大小显示，false 代表按照自定义宽高显示
  278.      */
  279.     protected abstract boolean displayOneImage(RatioImageView imageView, String url, int parentWidth);
  281.     protected abstract void displayImage(RatioImageView imageView, String url);
  283.     protected abstract void onClickImage(int position, String url, List<String> urlList);
  284. }

 

RatioImageView.Java

该类有两个功能：

1、是用于ImageView被按下时有变暗效果

2、ImageView的宽高根据设置的比例动态适配高度，如在xml中设置 app:ratio=”2″ ，ImageView的高度根据其宽度改变，但始终是宽的2倍，该功能在该项目中没有使用。

view plain copy

在CODE上查看代码片派生到我的代码片

  1. /**
  2.  * 根据宽高比例自动计算高度ImageView
  3.  * Created by HMY on 2016/4/21.
  4.  */
  5. public class RatioImageView extends ImageView {
  7.     /**
  8.      * 宽高比例
  9.      */
  10.     private float mRatio = 0f;
  12.     public RatioImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  13.         super(context, attrs, defStyleAttr);
  14.     }
  16.     public RatioImageView(Context context, AttributeSet attrs) {
  17.         super(context, attrs);
  18.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RatioImageView);
  20.         mRatio = typedArray.getFloat(R.styleable.RatioImageView_ratio, 0f);
  21.         typedArray.recycle();
  22.     }
  24.     public RatioImageView(Context context) {
  25.         super(context);
  26.     }
  28.     /**
  29.      * 设置ImageView的宽高比
  30.      *
  31.      * @param ratio
  32.      */
  33.     public void setRatio(float ratio) {
  34.         mRatio = ratio;
  35.     }
  37.     @Override
  38.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  39.         int width = MeasureSpec.getSize(widthMeasureSpec);
  40.         if (mRatio != 0) {
  41.             float height = width / mRatio;
  42.             heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) height, MeasureSpec.EXACTLY);
  43.         }
  44.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  45.     }
  47.     @Override
  48.     public boolean onTouchEvent(MotionEvent event) {
  50.         switch (event.getAction()) {
  51.             case MotionEvent.ACTION_DOWN:
  52.                 Drawable drawable = getDrawable();
  53.                 if (drawable != null) {
  54.                     drawable.mutate().setColorFilter(Color.GRAY,
  55.                             PorterDuff.Mode.MULTIPLY);
  56.                 }
  57.                 break;
  58.             case MotionEvent.ACTION_MOVE:
  59.                 break;
  60.             case MotionEvent.ACTION_CANCEL:
  61.             case MotionEvent.ACTION_UP:
  62.                 Drawable drawableUp = getDrawable();
  63.                 if (drawableUp != null) {
  64.                     drawableUp.mutate().clearColorFilter();
  65.                 }
  66.                 break;
  67.         }
  69.         return super.onTouchEvent(event);
  70.     }
  72. }

代码可在我的GitHub上下载，地址：https://github.com/HMY314/NineGridLayout

 

效果图

    

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

<figure class="wp-block-image size-full"><a href="https://act.walk-live.com/acts/invite/registration?inviteid=hkXrmnvL" target="_blank"><img src="https://www.mikel.cn/wp-content/uploads/2024/11/wangxinyun.jpg"></a></figure>

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏