GithubHelp home page GithubHelp logo

jeasonlzy / ninegridview Goto Github PK

View Code? Open in Web Editor NEW
2.5K 64.0 466.0 11.79 MB

类似QQ空间,微信朋友圈,微博主页等,展示图片的九宫格控件,自动根据图片的数量确定图片大小和控件大小,使用Adapter模式设置图片,对外提供接口回调,使用接口加载图片,支持任意的图片加载框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等,支持点击图片全屏预览大图。

Java 100.00%

ninegridview's Introduction

NineGridView

类似QQ空间,微信朋友圈,微博主页等,展示图片的九宫格控件,自动根据图片的数量确定图片大小和控件大小,使用Adapter模式设置图片,对外提供接口回调,支持任意的图片加载框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等,支持点击图片全屏预览大图。

该项目是根据:https://github.com/laobie/NineGridImageView 修改而成,进行了优化扩展,使代码更加简单,喜欢原作的可以去使用。同时欢迎大家下载体验本项目,如果使用过程中遇到什么问题,欢迎反馈。

联系方式

  • 邮箱地址: [email protected]
  • QQ群: 489873144 (建议使用QQ群,邮箱使用较少,可能看的不及时)
  • 本群刚建立,旨在为使用我的github项目的人提供方便,如果遇到问题欢迎在群里提问。个人能力也有限,希望一起学习一起进步。

演示

image image image image imageimage

1.用法

使用前,对于Android Studio的用户,可以选择添加:

	compile 'com.lzy.widget:ninegridview:0.2.0'

或者使用

    compile project(':ninegridview')

2.项目功能

  • 使用Adapter模式设置图片
  • 当图片数量只有一张时,自动根据图片大小调整控件大小
  • 默认增加了图片点击全屏预览效果,并附带预览动画
  • 使用接口加载图片,支持任意的图片加载框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等
  • 整合了PhotoView图片预览
  • 使用接口抽出图片的加载方式,可以方便的将Glide替换成自己喜欢的ImageLoader等
  • 支持fill个grid两种显示模式
  • 当获取的图片数量超过最大显示的图片数量时,最后一张图片上会显示剩余数量(类似于QQ的动态效果)
  • 使用代码简单,只需要几行代码
  • 其他功能增加中......

3.参数含义

自定义属性名字 参数含义
ngv_singleImageSize 只显示一张图片时的最大图片大小
ngv_singleImageRatio 只显示一张图片时图片宽高比
ngv_gridSpacing 网格显示图片时,图片之间的间距,默认3dp
ngv_maxSize 最多显示图片的数量,默认最大9张
ngv_mode 支持fill和grid两种显示模式,其中grid模式在显示4张图片时采用2*2的布局

4.代码演示

1.在Application中初始化NineGridView的图片加载器

    NineGridView.setImageLoader(new PicassoImageLoader());

    /** Picasso 加载 */
    private class PicassoImageLoader implements NineGridView.ImageLoader {

        @Override
        public void onDisplayImage(Context context, ImageView imageView, String url) {
            Picasso.with(context).load(url)//
                    .placeholder(R.drawable.ic_default_image)//
                    .error(R.drawable.ic_default_image)//
                    .into(imageView);
        }

        @Override
        public Bitmap getCacheImage(String url) {
            return null;
        }
    }

2.在自己的Adapter中初始化NineGridView的适配器

  • ImageInfo是库中提供的数据Bean,需要两个url,分别表示小图和大图的url,没有大图或者小图,则都赋给相同的Url即可。
  • ClickNineGridViewAdapter是库中提供的默认实现了点击预览的Adapter,如果不想使用预览效果,可以自己继承 NineGridViewAdapter 实现其中 onDisplayImage 方法即可。
	ArrayList<ImageInfo> imageInfo = new ArrayList<>();
    List<EvaluationPic> imageDetails = item.getAttachments();
    if (imageDetails != null) {
        for (EvaluationPic imageDetail : imageDetails) {
            ImageInfo info = new ImageInfo();
            info.setThumbnailUrl(imageDetail.smallImageUrl);
            info.setBigImageUrl(imageDetail.imageUrl);
            imageInfo.add(info);
        }
    }
    holder.nineGrid.setAdapter(new ClickNineGridViewAdapter(context, imageInfo));

ninegridview's People

Contributors

jeasonlzy avatar qiu800820 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ninegridview's Issues

不停的刷警告...

requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{f07e97d V.ED..C.. ......ID 0,255-242,497} during layout: running second layout pass

【接入步骤中有误导的代码】

在使用步骤最下面的代码中:
ArrayList<ImageInfo> imageInfo = new ArrayList<>(); List<EvaluationPic> imageDetails = item.getAttachments(); if (imageDetails != null) { for (EvaluationPic imageDetail : imageDetails) { ImageInfo info = new ImageInfo(); info.setThumbnailUrl(imageDetail.smallImageUrl); info.setBigImageUrl(imageDetail.imageUrl); imageInfo.add(info); } } holder.nineGrid.setAdapter(new ClickNineGridViewAdapter(context, imageInfo));

这一句:holder.nineGrid.setAdapter(new ClickNineGridViewAdapter(context, imageInfo))

估计很多新手直接就在getView中这么写了(我就是),这将导致多次new,造成内存占用巨多,最终OOM。。。所以提醒一下各位,把adapter抽取出来,用的时候只需要setImageInfoList(list)即可。

关闭系统动画后点击查看大图出问题。

在手机设置里的开发者选项中关闭三个动画效果中的最后一个(即Animator Duration Scale),然后发现点击查看大图就打不开了(确切说是因为没有动画过渡效果导致大图没有展示出来),如果设为0.5x的特效就只能卡在一半,只有设为1.x才能完全打开大图,这个问题我发现微信就不会,不知道是怎么实现的,难道微信用的不是系统的动画?
换了Glide、Picasso都这样。

ninegridview在recyclerview里无法多次使用

ninegridview载recyclerview里无法多次使用,单次的话是正常的,要是多次就会报java.lang.IllegalArgumentException: You must pass in a non null View,错误。用的是glide

+号剩余几张图显示异常

异常情况:设置ngv_maxSize = 3 时,列表中一个item有3张图片,下面的item有9张,或8张图片时,只有3张图片的这个item也会显示+6或+5这个蒙图,估计是item复用时出了问题

NineGridViewClickAdapter下的onImageItemClick 方法里跳转问题;

如果引用NineGridView方式
采用LayoutInflater.from(mContext).inflate

protected void onImageItemClick(Context context, NineGridView nineGridView, int index, List imageInfo) {}
context 是 Application,
导致 Intent intent = new Intent(context, ImagePreviewActivity.class);
要添加intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);才能跳转,
((Activity) context).overridePendingTransition(0, 0);强制转换保错;
解决方法:
LayoutInflater.from(mContext).inflate传入的Context 必须是Activity;

Recyclerview中 在viewholder复用的时候回出现bug

博主你好,现在我的项目中用到了你写的控件,嵌套在XRecyclerview中的item中,当我正常的从上往下翻阅的时候,ninegridview没有问题,但是如果这个时候从下往上翻阅的时候这时候会出现部分item的ninegridview无法加载出图片,再次从顶部往下滑动的时候又正常了。请问这是不是和viewholder的缓存有关系。

点击图片预览崩溃啊

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.company.zht/com.lzy.ninegrid.preview.ImagePreviewActivity}: android.view.InflateException: Binary XML file line #0: Binary XML file line #0: Error inflating class
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2646)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2707)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1460)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)
Caused by: android.view.InflateException: Binary XML file line #0: Binary XML file line #0: Error inflating class
Caused by: android.view.InflateException: Binary XML file line #0: Error inflating class

你好,在NineGridView中的onLayout方法会无限掉用。

你好,在NineGridView中的onLayout方法会无限掉用。

我将NineGridView作为RecyclerView的Item,然后显示3张图片的时候,在第一次加载的时候可能没问题,但是从屏幕外滑进来后就会不停加载图片,最后跟踪定位到onLayout方法,会无限调用。现在你的源码如下:
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if (mImageInfo == null) return; int childrenCount = mImageInfo.size(); for (int i = 0; i < childrenCount; i++) { ImageView childrenView = (ImageView) getChildAt(i); if (mImageLoader != null) { mImageLoader.onDisplayImage(getContext(), childrenView, mImageInfo.get(i).thumbnailUrl); } int rowNum = i / columnCount; int columnNum = i % columnCount; int left = (gridWidth + gridSpacing) * columnNum + getPaddingLeft(); int top = (gridHeight + gridSpacing) * rowNum + getPaddingTop(); int right = left + gridWidth; int bottom = top + gridHeight; childrenView.layout(left, top, right, bottom); } }
我看到你没有判断是否位置发生改变就开始布局。

现在我的解决方案是写一个类,继承NineGridView,在onLayout方法里做一个判断,代码如下:
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { ALog.e("1111111111" + changed); if (changed) { super.onLayout(changed, l, t, r, b); } }
最后解决问题了,log也不会无限打印了。
您看具体原因是出现在哪儿?

ImagePreviewActivity 中计算图片的宽高时在图片没有加载出来时退出会出现空指针异常

/** 计算图片的宽高 */
private void computeImageWidthAndHeight(ImageView imageView) {

        // 获取真实大小
        Drawable _drawable_ = imageView.getDrawable();


   
        int intrinsicHeight = drawable.getIntrinsicHeight();
        int intrinsicWidth = drawable.getIntrinsicWidth();
        // 计算出与屏幕的比例,用于比较以宽的比例为准还是高的比例为准,因为很多时候不是高度没充满,就是宽度没充满
        float h = screenHeight * 1.0f / intrinsicHeight;
        float w = screenWidth * 1.0f / intrinsicWidth;
        if (h > w) h = w;
        else w = h;

        // 得出当宽高至少有一个充满的时候图片对应的宽高
        imageHeight = (int) (intrinsicHeight * h);
        imageWidth = (int) (intrinsicWidth * w);
    

}

drawable 会空指针, 我目前加了判断 if( null != drawable)

图片显示数量错误

在item里面 图片数量是9张 但是NineGridView使用显示的时候会在 第九张图上来 显示+28张 但是数量我打断点查看了的只有9张图

华为麦芒4点击大图显示一半

小米三星没有问题,手里有台华为麦芒点击图片的时候大概走到动画1/3的部分就不走了。停在那里图片区域也可以进行触摸拉伸,但是只能维持在3/1的固定位置。透明度只有0.5

关于demo运行的问题和实际使用

当使用glide作为图片加载的时候:log不停的打印,(demo和把ninegridview作为moudle的时候不断复现),当采用gradle依赖的形式又正常了。
06-30 06:24:50.330 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{cfac5f2 VFED..C.. ........ 0,16-273,289} during second layout pass: posting in next frame
06-30 06:24:50.330 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{43a3b3 VFED..C.. ........ 280,16-553,289} during second layout pass: posting in next frame
06-30 06:24:50.334 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{cfac5f2 VFED..C.. ......ID 0,16-273,289} during layout: running second layout pass
06-30 06:24:50.334 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{43a3b3 VFED..C.. ......ID 280,16-553,289} during layout: running second layout pass
06-30 06:24:50.360 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{833b6cb VFED..C.. ........ 280,16-553,289} during second layout pass: posting in next frame
06-30 06:24:50.369 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{833b6cb VFED..C.. ......ID 280,16-553,289} during layout: running second layout pass
06-30 06:24:50.379 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{cfac5f2 VFED..C.. ........ 0,16-273,289} during second layout pass: posting in next frame
06-30 06:24:50.379 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{43a3b3 VFED..C.. ........ 280,16-553,289} during second layout pass: posting in next frame
06-30 06:24:50.380 2167-2167/com.lzy.ninegridview W/View: requestLayout() improperly called by com.lzy.ninegrid.NineGridViewWrapper{cfac5f2 VFED..C.. ......ID 0,16-273,289} during layout: running second layout pass

你好,我在使用时点击九宫格图片会程序就崩了.然后报下面这个错,不知道是什么原因.

FATAL EXCEPTION: main
Process: com.example.lrj.chunzhen, PID: 2595
java.lang.NoClassDefFoundError: com.lzy.ninegrid.preview.ImagePreviewAdapter
at com.lzy.ninegrid.preview.ImagePreviewActivity.onCreate(ImagePreviewActivity.java:57)
at android.app.Activity.performCreate(Activity.java:5231)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1104)
at cn.jiguang.a.a.d.a.a.d.callActivityOnCreate(Unknown Source)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2157)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2243)
at android.app.ActivityThread.access$800(ActivityThread.java:135)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5019)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)
at dalvik.system.NativeStart.main(Native Method)

Glide4.0 如果设置跳过内存缓存的话,加载不出来图片

options.placeholder(R.mipmap.icon_placeholder)
.error(R.mipmap.icon_error)
.diskCacheStrategy(DiskCacheStrategy.ALL)
//.skipMemoryCache(true)
.fallback(R.mipmap.icon_placeholder);

    GlideApp.with(context)
            .load(url)
            .apply(options)
            .into(imageView);

如果设置了skipMemoryCache(true)的话,图片一直加载不出来

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.