改善用户体验,用图片的自身变化以及进度通知摆脱传统的进度条,okhttp,Canvas,Paint实现
2015-12-23 14:09
821 查看
转载请注明出处:王亟亟的大牛之路
从最开始的白页面等待,到后来的进度条告知用户,到现在的WebBO/微信这种先下缩略图点击才重新下大图的方式,我们开发者对用户感知的注意度越来越高,昨天刷微博的时候看到他们是用一个灰色转圈圈的实现,所以就萌生的今天要做的内容的启发(我是在不知道给这种实现取什么名字,就写了一大堆,感觉在哪见过类似的但是,忘了出自于哪了)先上下效果:
GIF软件继续把我的效果给吃了。。大家可以自己跑一下,看效果。
HOW to do?
1.我们的图片来自于网络,如果是本地,也不需要这一系列的操作了,几乎是瞬间。那么我们的下载过程中的进度通知得一直刷新。 2.我们得让图片一直在更新UI至少产生差异性,不然用户不知道这是干什么
带着这2个问题,我们来说一下,首先是下载,用Volley,和api自带的一些库都可以实现,往里面加回调传进度出来就行了,这里楼主用的是git大牛的
https://github.com/hongyangAndroid/okhttp-utils
对okhttp的封装简单易用。
第二个问题就是怎么实现,我们有了进度,那就是画。这边用的是源生的bitmap canvas paint三剑客,具体怎么做,等会代码会贴。
包结构:
实现类:MainActivity
父类:Father(提供抽象方法)
图片数据源:Config(正常图片太小了,强行 试了好多次)
public class MainActivity extends Father { private Button btn; private ImageView imageView; private Paint paint; private Canvas canvas; private Bitmap bitmap; private String fileUrl; private float imageWidth, imageHeight; private Paint paint2; @Override public int getLayout() { return R.layout.activity_main; } @Override public void init() { btn=(Button)findViewById(R.id.btn); imageView = (ImageView) findViewById(R.id.imageView); imageWidth = (int) getResources().getDimension(R.dimen.image_width); imageHeight = (int) getResources().getDimension(R.dimen.image_height); } @Override public void setClick() { btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { fileUrl = Environment.getExternalStorageDirectory().getAbsolutePath() + "/wjj/" + "meizi.jpg"; if (checkFile(fileUrl)) { LogUtils.d("--->onResume checkFile==true"); imageView.setImageBitmap(BitmapFactory.decodeFile(fileUrl)); Toast.makeText(MainActivity.this,"图片已经存在于SD卡内",Toast.LENGTH_SHORT).show(); } else { LogUtils.d("--->onResume checkFile==false"); DownLoadImage(ConFig.ImageUrl); } } }); } @Override public void Logic() { LogUtils.d("--->MainActivity Logic getWidth " + imageWidth + " getHeight " + imageHeight); if (bitmap == null) { bitmap = Bitmap.createBitmap((int) imageWidth, (int) imageHeight, Bitmap.Config.ARGB_8888); canvas = new Canvas(bitmap); canvas.drawColor(getResources().getColor(R.color.Gray)); } paint = new Paint(); paint.setColor(getResources().getColor(R.color.White)); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); paint2 = new Paint(); paint2.setColor(getResources().getColor(R.color.Gray)); paint2.setTextSize(90); paint2.setTextAlign(Paint.Align.CENTER); imageView.setImageBitmap(bitmap); } @Override protected void onResume() { super.onResume(); } private void DownLoadImage(String ImageUrl) { OkHttpUtils .get() .url(ImageUrl) .build() .execute(new FileCallBack(Environment.getExternalStorageDirectory().getAbsolutePath() + "/wjj/", "meizi.jpg") { @Override public void inProgress(float progress) { LogUtils.d((int) (100 * progress) + "高度等于 " + imageHeight * progress); canvas.drawRect(0, 0, imageWidth, imageHeight * progress, paint); canvas.drawText((int) (100 * progress) + "%", imageWidth / 2, imageHeight / 2 - 200, paint2); imageView.setImageBitmap(bitmap); } @Override public void onError(Request request, Exception e) { LogUtils.e("onError :" + e.getMessage()); } @Override public void onResponse(File file) { LogUtils.d("onResponse :" + file.getAbsolutePath()); imageView.setImageBitmap(BitmapFactory.decodeFile(file.getAbsolutePath())); } }); } /** * 控件的高度 * * @param view 控件View * @return 返回控件的高度 */ public static int getHeight(View view) { if (view == null) { throw new IllegalArgumentException("view is null"); } view.measure(0, 0); return view.getMeasuredHeight(); } /** * 获取控件的宽度 * * @param view 控件 * @return 返回控件的宽度 */ public static int getWidth(View view) { if (view == null) { throw new IllegalArgumentException("view is null"); } view.measure(0, 0); return view.getMeasuredWidth(); } private boolean checkFile(String checkFile) { File mFile = new File(fileUrl); //若该文件存在 if (mFile.exists()) { return true; } else { return false; } } }
代码都在上面了,来说一下里面的坑。
坑1
image.getHeight()和image.getWidth,粗略看来是不是如果我们设置的不是wrap_content那么一定能获取到参数?
事实是NO,无论怎么整他都是0,那怎么获取呢?方法如下!
//------------------------------------------------方法一 int w = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED); int h = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED); imageView.measure(w, h); int height =imageView.getMeasuredHeight(); int width =imageView.getMeasuredWidth(); LogUtils.d("\n"+height+","+width); //-----------------------------------------------方法二 ViewTreeObserver vto = imageView.getViewTreeObserver(); vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { public boolean onPreDraw() { int height = imageView.getMeasuredHeight(); int width = imageView.getMeasuredWidth(); LogUtils.d("\n"+height+","+width); return true; } }); //-----------------------------------------------方法三 ViewTreeObserver vto2 = imageView.getViewTreeObserver(); vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this); LogUtils.d("\n\n"+imageView.getHeight()+","+imageView.getWidth()); } });
这些都能获取到参数,但是只要离开那行代码,东西就没了还是0 .WHY 什么鬼!?
onCreate方法执行完了,我们定义的控件才会被度量(measure),所以我们在onCreate方法里面通过view.getHeight()获取控件的高度或者宽度肯定是0,因为它自己还没有被度量,也就是说他自己都不知道自己有多高,而你这时候去获取它的尺寸,是不行的.
那有两个办法,1.我去设一张图片,然后图片的大小就是我控件的大小。2.也就是我用的方法,人工控件的大小。脑洞来源于:http://stackoverflow.com/questions/19271609/imageview-getwidth-returns-0
文章中是这样
imageWidth = (int) getResources().getDimension(R.dimen.image_width); imageHeight = (int) getResources().getDimension(R.dimen.image_height);
那么有人要问了,我实际场景下也设定死吗?
我们的业务层不可能整一个页面都是一张图,那么UI给与我们界面定稿的时候总有一个相对大小,而我们的控件大小可以在适配的大小区间里来游走(反正在现实场景时,这图片总是点击放大才去加载,而那时候不已经全屏看了?你还在意控件大小么?)
所以,这个实现的使用场景就是在看大图时(一定得大,不然怎么都是瞬间),才有他的使用价值。
小解释:
代码中的paint 是用来画背景的 paint2 是用来画进度的文字的。
文字位置是 x=宽/2 y=长/2
图片更新方式:总长/100=每1%的Y向长度,然后每次更新的进度数*这个1%Y长度就行。
文章中的图片最后还是存于SD卡里的,如果想直接下载完Set到ImageView上的话就别存把流转一下就好了。
源码地址:https://github.com/ddwhan0123/BlogSample/tree/master/ImageLoadingAnim
记得点个赞哦!!
相关文章推荐
- 改善用户体验,用图片的自身变化以及进度通知摆脱传统的进度条,okhttp,Canvas,Paint实现
- SVN报错authorization failed: Could not authenticate to server: rejected Basic challenge
- Leetcode: Paint House II
- http://blog.csdn.net/tangaowen/article/details/8551762
- Chain Codes and Your Brain 链码和大脑
- Introduction to Chain Codes 链码导论
- Freeman Chain Code链码
- 为什么要用sub main
- Windows 下 tail 查看日志命令工具分享
- 博客作业:raid各级别特性
- svmtrain和svmpredict简介
- Genymotion问题解决之 INSTALL_FAILED_NO_MATCHING_ABIS (一)
- 执行yum:Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again
- await和async在一般处理程序中的使用
- NetworkInfo对象的isConnected()与isAvailable()区别
- Bug之解决Xcode 7编译错误:* does not contain bitcode.
- Brainteaser:Bulb Switcher
- 引用 Foxmail常用的25个技巧
- Paint及Canvas的简单应用
- RAID分类