- 浏览: 11451 次
- 性别:
- 来自: 邯郸市
文章分类
最新评论
有时候图片很长,预览只是其一部分,有个类似按钮点击之后加载全图并显示,类似于GIF的加载显示。
ListAdapter中:
图片加载完成的回掉函数:
长图加载的类与图片加载的类相同:
容易理解,运行:
注:这是一个.gif动图,ctrl点击图片查看
当GIF图片滑动出屏幕时,暂停,需要之前的QRecyclerListener了:
在Item滑出屏幕的监听器中,将动态添加的GifImageView、按钮、进度条移除就可以了。
ListAdapter中:
else if("lmg".equals(data.type)){ Drawable drawable=lmgload.loadImage(viewparent,tagpre,data.dataurl,null); if(drawable!=null){ LayoutParams lp=holder.rl_data.getLayoutParams(); lp.height=itemwidth*drawable.getMinimumHeight()/drawable.getMinimumWidth(); holder.rl_data.setLayoutParams(lp); if(holder.tv_lmgctrl!=null){ holder.tv_lmgctrl. setVisibility(View.GONE); holder.rl_data. removeView(holder.tv_lmgctrl); } holder.rl_data.setBackground(drawable); holder.rl_data.setVisibility(View.VISIBLE); } else{ LayoutParams lp=holder.rl_data.getLayoutParams(); lp.height=itemwidth*data.height/data.width; holder.rl_data.setLayoutParams(lp); holder.rl_data.setTag(tagpre); Drawable pre=imgload.loadImage(viewparent,tagpre,data.preurl,ilcallback); holder.rl_data.setBackground(pre); if(holder.tv_lmgctrl!=null){ holder.rl_data.removeView(holder.tv_lmgctrl); } RelativeLayout.LayoutParams lp1 = new RelativeLayout.LayoutParams( LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT); holder.tv_lmgctrl=new TextView(activity); holder.tv_lmgctrl.setText("点击查看全图"); holder.tv_lmgctrl.setGravity(Gravity.CENTER_HORIZONTAL); holder.tv_lmgctrl.setTextColor(activity.getResources().getColor(R.color.white_dark)); holder.tv_lmgctrl.setTextSize(TypedValue.COMPLEX_UNIT_PX,activity.getResources().getDimension(R.dimen.text_level1)); holder.tv_lmgctrl.setBackgroundResource(R.color.black_normal_88); int padding=(int)activity.getResources().getDimension(R.dimen.padding_n); holder.tv_lmgctrl.setPadding(padding,padding,padding,padding); lp1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); holder.tv_lmgctrl.setLayoutParams(lp1); holder.tv_lmgctrl.setTag(tagctrllmg); holder.rl_data.addView(holder.tv_lmgctrl); OnClickListener listener=new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub v.setOnClickListener(null); ((TextView)v.findViewWithTag(tagctrllmg)).setText("全图加载中..."); lmgload.loadImage(viewparent,tagpre,data.dataurl,llcallback); RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); holder.pb_load=new ProgressBar(activity,null,android.R.attr.progressBarStyleSmall); lp.addRule(RelativeLayout.CENTER_IN_PARENT); holder.pb_load.setLayoutParams(lp); holder.pb_load.setTag(tagloadlmg); holder.rl_data.addView(holder.pb_load); } }; holder.rl_data.setOnClickListener(listener); holder.rl_data.setVisibility(View.VISIBLE); } }
图片加载完成的回掉函数:
private LmageLoadCallback llcallback=new LmageLoadCallback() { @SuppressLint("NewApi") @Override public void onSuccess(Drawable drawable, int tag, View viewParent) { // TODO Auto-generated method stub if(drawable!=null){ RelativeLayout rl_data=(RelativeLayout)(viewParent.findViewWithTag(tag)); if(rl_data!=null){ LayoutParams lp=rl_data.getLayoutParams(); lp.height=itemwidth*drawable.getMinimumHeight()/drawable.getMinimumWidth(); rl_data.setLayoutParams(lp); rl_data.setBackground(drawable); rl_data.findViewWithTag(tag+1).setVisibility(View.GONE); rl_data.findViewWithTag(tag-1).setVisibility(View.GONE); } } } };
长图加载的类与图片加载的类相同:
public class LmageLoad { private Context context; private Map<String, Drawable> imageMap; private ThreadPoolExecutor executor = null; BlockingQueue<Runnable> queue =null; private String path=Environment.getExternalStorageDirectory()+"/Dp Notes/Cache/LonImage"; private int threadMaxNum=Runtime.getRuntime().availableProcessors()>1?Runtime.getRuntime().availableProcessors():2; private int cacheMaxNum=1; @SuppressLint("NewApi") public LmageLoad(Context context){ this.context=context; imageMap=new LinkedHashMap<String, Drawable>(); queue =new ArrayBlockingQueue<Runnable>(this.threadMaxNum); executor=new ThreadPoolExecutor(this.threadMaxNum,this.threadMaxNum,1,TimeUnit.MINUTES,queue,new ThreadPoolExecutor.CallerRunsPolicy()); // File dir=new File(this.path); // if(!dir.exists()){ // dir.mkdirs(); // } } public void setcacheMaxNum(int maxNum){ this.cacheMaxNum=maxNum; } public Drawable loadImage(final View viewParent,final int viewTag,final String imageUrl,final LmageLoadCallback callback){ if (imageMap.containsKey(imageUrl)) { Drawable drawable=imageMap.get(imageUrl); return drawable; } if(callback==null){ return null; } // int index=imageUrl.lastIndexOf("/"); // index=index>=0?index:0; // String filename=imageUrl.substring(index); // final String filepath=path+filename+".0"; // // final File mf=new File(filepath); // if(mf.exists()){ // Bitmap bitmap=BitmapFactory.decodeFile(filepath); // BitmapDrawable draw=new BitmapDrawable(context.getResources(),bitmap); // if(draw!=null){ // imageMap.put(imageUrl,draw); // chackMapSize(); // return draw; // } // } imageMap.put(imageUrl,null); final Handler handler = new Handler() { @SuppressLint("HandlerLeak") public void handleMessage(Message message) { if(callback!=null){ if(message.what==1){ callback.onSuccess((Drawable) message.obj,viewTag,viewParent); } } } }; executor.execute(new Runnable() { @Override public void run() { // TODO Auto-generated method stub URL url = null; InputStream inputStream = null; try { url = new URL(imageUrl); inputStream = url.openStream(); Drawable drawable = Drawable.createFromStream(inputStream, "src"); Message message; message=handler.obtainMessage(1,drawable); handler.sendMessage(message); if(drawable!=null){ imageMap.put(imageUrl,drawable); } else{ imageMap.remove(imageUrl); } chackMapSize(); // if(drawable!=errorDrawable){ // try { // if(!mf.exists()){ // try { // mf.createNewFile(); // } catch (IOException e) { // // TODO Auto-generated catch block // e.printStackTrace(); // } // } // FileOutputStream fout=new FileOutputStream(mf); // Bitmap bitmap=((BitmapDrawable)drawable).getBitmap(); // bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fout); // } catch (FileNotFoundException e) { // // TODO Auto-generated catch block // e.printStackTrace(); // } // } } catch (Exception e) { e.printStackTrace(); } finally { try { if (inputStream != null) inputStream.close(); } catch (IOException e) { e.printStackTrace(); } } } }); return null; } private void chackMapSize(){ if(imageMap.size()>cacheMaxNum){ for(Entry<String, Drawable> m:imageMap.entrySet()){ imageMap.remove(m.getKey()); break; } } } public interface LmageLoadCallback { public void onSuccess(Drawable drawable,int tag,View viewParent); } }
容易理解,运行:
注:这是一个.gif动图,ctrl点击图片查看
当GIF图片滑动出屏幕时,暂停,需要之前的QRecyclerListener了:
public ListAdapter(Activity activity,QListView listview){ … listview.setQRecyclerListener(rclistener); }
private QRecyclerListener rclistener=new QRecyclerListener() { @Override public void onMovedToScrapHeap(View view) { // TODO Auto-generated method stub Holder holder=(Holder)view.getTag(); if(holder!=null&&holder.rl_data!=null){ if(holder.tv_lmgctrl!=null){ holder.rl_data.removeView(holder.tv_lmgctrl); holder.tv_lmgctrl=null; } if(holder.giv_data!=null){ holder.rl_data.removeView(holder.giv_data); holder.giv_data=null; } if(holder.tv_gifctrl!=null){ holder.rl_data.removeView(holder.tv_gifctrl); holder.tv_gifctrl=null; } if(holder.pb_load!=null){ holder.rl_data.removeView(holder.pb_load); holder.pb_load=null; } } } };
在Item滑出屏幕的监听器中,将动态添加的GifImageView、按钮、进度条移除就可以了。
路在脚下——2017/06/10
发表评论
-
19、GIF动图显示
2017-06-18 16:28 828有时候需要显示动图,可安卓有没有现成的控件,很 ... -
18、ListView显示图片
2017-06-18 16:23 507ListView显示 ... -
17、网络图片加载
2017-06-17 20:57 434如上节,有时候需要显示网络图片,QListVi ... -
15、ListView Item设置
2017-06-17 20:52 504当然想要ListView显示自定义的布局,显示 ... -
16、后台异步处理
2017-06-17 20:56 662大多时候,需要后台(异步)去执行一些费时操作。 ... -
14、自定义ListView
2017-06-13 22:05 713实现了显示的效果,接着来实现一些监听器(接口) ... -
13、自定义ListView
2017-06-13 21:58 539下拉刷新,上拉加载,很流行的啊,总的来说有两种 ... -
12、Dp Notes内容-列表(ListView使用)
2017-06-12 22:48 499完成了一些空架子,开始填内容,从列表开始吧(主 ... -
11、Dp Notes顶部导航栏
2017-06-10 23:05 498完成了底部导航栏,再来顶部导航栏(叫什么?菜单 ... -
10、Dp Notes底部导航栏
2017-06-10 11:48 548有卡顿的现象(可能模拟器原因),滑动时没有渐变 ... -
9、Dp Notes底部导航栏
2017-06-10 11:41 545将ViewPager和QEndBar结合起来, ... -
8、Dp Notes底部导航栏
2017-06-07 21:59 642实现了点击切换效果(只是图标状态变化),如何结 ... -
7、Dp Notes底部导航栏
2017-06-07 21:58 570想要的图标呢?怎么弄上去。从网上找了几个图标, ... -
6、Dp Notes底部导航栏(自定义控件(View))
2017-06-05 21:40 623已经看到了安卓的一角,正式开始Dp Notes ... -
5、控件美化(drawable使用)
2017-06-04 11:19 661先前的回复页面虽然搭好了,功能也实现了,但页面 ... -
4、第一行代码
2017-06-03 09:12 655上节完成了回复功能的页面搭建,可是想要的功能并 ... -
3、基本控件
2017-06-03 09:01 541控件,很好 ... -
2、你好,世界
2017-06-01 20:23 488开发一个安 ... -
1、初衷
2017-05-31 21:18 386接触安卓已经有一段时间了,从一开始接触J2M ...
相关推荐
在网页开发中,图片加载是常见的操作,但用户体验往往因为图片加载时间过长而受到影响。"Ajax图片框显示图片的加载进度Demo" 提供了一种解决方案,它利用JavaScript(JS)、Ajax以及jQuery技术来实现图片在加载过程...
在网页设计中,当用户点击链接或提交表单时,页面加载的过程可能会花费一些时间,尤其是在数据量大或者网络...同时,优化页面加载速度也是提高用户体验的重要一环,因为即使最漂亮的加载指示器也无法弥补长时间的等待。
JavaScript是一种强大的客户端脚本语言,常用于...这种技术对于优化网页性能和用户体验至关重要,尤其是对于那些内容加载时间较长的网站。同时,也可以根据实际需求调整提示文本和样式,以更好地匹配网站的整体设计。
当用户访问一个网页时,如果加载时间较长,容易导致用户失去耐心而离开。因此,引入页面加载条不仅能够提升美观度,还能有效提高用户的耐心,减少因等待而产生的负面情绪。 #### 技术原理及实现方法 本篇将通过...
2. 计算总加载资源的数量,可以是图片、脚本或其他需要加载的资源。 3. 使用`$.getScript()`或`$.ajax()`方法逐个加载资源,每次加载完成后更新进度条的宽度。 4. 利用`setTimeout()`或`setInterval()`函数来模拟...
例如,你可以用JS来判断页面何时加载完成,然后停止loading动画,或者根据用户行为动态显示和隐藏加载动画。 标签"JS特效-css样式"表明这个压缩包可能包含了使用JavaScript增强CSS3动画的示例。"jiaoben438"可能是...
假设一个页面需要加载20张图片,如果一次性加载,将增加页面的总体大小,导致加载时间延长,用户可能需要等待较长时间才能看到完全的页面内容。相反,通过滚动延时加载,页面首次加载时仅加载足够填充浏览器视口的...
5. **与其他jQuery插件的集成**:由于jQuery.spin.js是基于jQuery构建的,因此它可以方便地与其他jQuery插件(如Ajax请求、轮播图等)结合使用,为这些组件提供加载提示。 总的来说,jQuery.spin.js提供了一种简单...
本案例是一个简单的jQuery动态加载进度条特效,适用于图片加载或后台处理时间较长的情况。 首先,我们需要了解jQuery库。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等常见...
根据提供的文档信息,本文将详细解释“第六十八课:基于Ruby内存加载shellcode第一季”中的关键知识点。主要内容包括理解shellcode的概念、如何利用Ruby语言生成shellcode以及如何在内存中加载并执行shellcode。 ##...
随着Web应用程序功能越来越复杂,页面加载时间可能会变长,这会降低用户的体验感。因此,在页面加载过程中展示进度条或加载提示可以有效地缓解用户等待时的焦虑情绪,提高用户体验。 #### 二、技术原理及实现思路 ...
- 使用虚拟模式:如果数据量大,可以考虑使用虚拟模式来提高性能,但这需要更复杂的代码来管理数据的加载和显示。 - 考虑使用Hint:对于长文本,可以只显示部分信息,其余作为Hint显示,鼠标悬停时显示完整内容。 ...
1、 支持显示屏参数软件的初始化设置、加载; 2、 支持多区域画面编辑与显示; 3、 支持中英文时钟编辑与显示; 4、 支持游走字幕编辑与显示; 5、 支持正负温度、湿度等传感器信息编辑与显示; 6、 支持软件...
通过以上技术,我们可以实现当文本过长时,仅显示部分内容并添加省略号,用户可以通过鼠标悬停或点击来查看完整的文本。这既保持了页面的整洁,又提供了查看全部信息的途径,提高了用户体验。在实际应用中,可以根据...
1. 数据加载:将1:5万和1:20万的接图表矢量文件导入ArcGIS,作为地图的底图层。 2. 接合线处理:通过编辑接图表的矢量数据,调整接合线的位置,确保在比例尺切换时的平滑过渡。 3. 分层显示:根据需要,设置不同比例...
在网页设计中,加载动画和进度条效果是用户体验的重要组成部分,尤其在用户等待网页内容完全加载时,一个吸引人的加载动画或进度条可以提供视觉反馈,让用户感知到系统的运行状态,减少用户的焦虑感。本资源...
首先,"跳跃式loading加载动画"是指在页面内容加载过程中显示的一种动态效果,它通常以某种形式的图形或进度条不断变化,展示数据加载的进度,增加用户体验的趣味性和互动性。在CSS3中,我们可以利用其丰富的动画...
20% { transform: scaleY(1); } } ``` 在这段代码中,`.loading > p i` 类定义了单个进度条的样式和动画,通过不同的`animation-delay`设置,实现了进度条的依次显示。 ### JavaScript代码 文中还提供了一个简单...
23. **渐进加载动画**:在图片加载过程中显示进度条或动态效果,提升用户体验。 24. **响应式动画**:利用媒体查询(Media Queries),使动画效果根据屏幕尺寸自动调整。 25. **时间函数(Timing Functions)**:...