Android 高级UI设计笔记06:仿微信图片选择器

仿微信图片选择器:

一、项目整体分析:

1. Android加载图片的3个目标:

(1)尽可能的去避免内存溢出。

  a. 根据图片的显示大小去压缩图片

  b. 使用缓存对我们图片进行管理(LruCache)

(2)用户操作UI控件必须充分的流畅。

  a. getView里面尽可能不去做耗时的操作(异步加载 + 回调显示)

(3)用户预期显示的图片尽可能的快(图片的加载策略的选择,一般选择是LIFO)。

  a. LIFO

 

2. 定义一个Imageloader完成上面1中的3个目标:

Imageloader

getView()

{

    url   -> Bitmap

    url   -> LruCache 查找

                           ->找到返回

         ->找不到 url -> Task -> TaskQueue且发送一个通知去提醒后台轮询线程。

 

}

 •Task ->run() {根据url加载图片:

                  1. 获得图片显示的大小

                  2. 使用Options对图片进行压缩

                  3. 加载图片且放入LruCache

           }

   后台轮询线程

    TaskQueue ->Task ->将Task交给线程池去执行(执行run方法)

      一般情况下:(我们没有采用,效率低)

     new  Thread() {

                    run() {

                             while(true) {}

                     }

      }.start();

     这里这种场景,采用Handler + looper + Message

    

二、代码实践-图片缓存、获取、展示

1.  打开Eclipse,新建一个Android工程,命名为"Imageloader",如下:

Android 高级UI设计笔记06:仿微信图片选择器

 

 

2. 新建一个包"com.himi.imageloader.util",编写一个图片加载工具类,如下:

Android 高级UI设计笔记06:仿微信图片选择器

 

ImageLoader.java,如下:

  1 package com.himi.imageloader.util;
  2 
  3 import java.lang.reflect.Field;
  4 import java.util.LinkedList;
  5 import java.util.concurrent.ExecutorService;
  6 import java.util.concurrent.Executors;
  7 import java.util.concurrent.Semaphore;
  8 
  9 import android.annotation.SuppressLint;
 10 import android.graphics.Bitmap;
 11 import android.graphics.BitmapFactory;
 12 import android.graphics.BitmapFactory.Options;
 13 import android.os.Handler;
 14 import android.os.Looper;
 15 import android.os.Message;
 16 import android.util.DisplayMetrics;
 17 import android.util.LruCache;
 18 import android.view.ViewGroup.LayoutParams;
 19 import android.widget.ImageView;
 20 
 21 /**
 22  * 图片加载类
 23  * 这个类使用单例模式
 24  * @author hebao
 25  *
 26  */
 27 public class ImageLoader {
 28     private static ImageLoader mInstance;
 29     /**
 30      * 图片缓存的核心对象 
 31      *      管理我们所有图片加载的所需的内存
 32      */
 33     private LruCache<String, Bitmap> mLruCache;
 34     /**
 35      * 线程池
 36      *      执行一些我们加载图片的任务
 37      */
 38     private ExecutorService mThreadPool;
 39     /**
 40      * 线程池中默认线程数
 41      */
 42     private static final int DEAFULT_THREAD_COUNT = 1;
 43     
 44     /**
 45      * 队列的调度方式
 46      */
 47     private Type mType = Type.LIFO;
 48     /**
 49      * 任务队列
 50      *         任务队列提供给线程池取任务的
 51      */
 52     private LinkedList<Runnable> mTaskQueue;
 53     /**
 54      * 后台轮询线程
 55      */
 56     private Thread mPoolThread;
 57     /**
 58      * 后台轮询线程的handler
 59      */
 60     private Handler mPoolThreadHandler;
 61     /**
 62      * UI线程的handler
 63      * 用于:更新ImageView
 64      */
 65     private Handler mUIHandler;
 66     /**
 67      * mPoolThreadHandler的信号量,防止使用mPoolThreadHandler的时候其本身没有初始化完毕,报空指针异常
 68      */
 69     private Semaphore mSemaphorePoolThreadHandler = new Semaphore(0);
 70     /**
 71      * 任务线程信号量,保证线程池真正做到LIFO
 72      */
 73     private Semaphore mSemaphoreThreadPool;
 74     
 75     /**
 76      * 
 77      * 调度方式
 78      *FIFO:先入先出
 79      *LIFO:后入先出
 80      */
 81     
 82     public enum Type  {
 83         FIFO,LIFO;
 84     }
 85     
 86     
 87     private ImageLoader(int threadCount, Type type) {
 88         init(threadCount, type);
 89     }
 90     
 91     /**
 92      * 初始化操作
 93      * @param threadCount
 94      * @param type
 95      */
 96     private void init(int threadCount, Type type) {
 97         //后台轮询线程初始化
 98         mPoolThread = new Thread() {
 99             @Override
100             public void run() {
101                 Looper.prepare();
102                 mPoolThreadHandler = new Handler() {
103                     @Override
104                     public void handleMessage(Message msg) {
105                         //线程池取出一个任务进行执行
106                         mThreadPool.execute(getTask());
107                         try {
108                             mSemaphoreThreadPool.acquire();
109                         } catch (InterruptedException e) {
110                             // TODO 自动生成的 catch 块
111                             e.printStackTrace();
112                         }
113                     }
114                 };
115                 //释放一个信号量
116                 mSemaphorePoolThreadHandler.release();
117                 //Looper不断进行轮询
118                 Looper.loop();
119             };
120         };
121         mPoolThread.start();
122         
123         //获取我们应用的最大可用内存
124         int maxMemory = (int) Runtime.getRuntime().maxMemory();
125         int cacheMemory = maxMemory / 8;
126         //图片缓存初始化
127         mLruCache = new LruCache<String, Bitmap>(cacheMemory) {
128             /**
129              * 测量每一个Bitmap图片的大小
130              */
131             @Override
132             protected int sizeOf(String key, Bitmap value) {
133                 // 每一个Bitmap图片的大小 = 每一行字节数 * 高度
134                 return value.getRowBytes() * value.getHeight();
135             }
136         };
137         
138         //创建线程池
139         mThreadPool = Executors.newFixedThreadPool(threadCount);
140         mTaskQueue = new LinkedList<Runnable>();
141         mType = type;
142         
143         //初始化信号量
144         mSemaphoreThreadPool = new Semaphore(threadCount);
145     }
146     
147     /**
148      * 从任务队列中取出一个方法 
149      * @return
150      */
151     private Runnable getTask() {
152         if(mType == Type.FIFO) {
153             return mTaskQueue.removeFirst();
154         }else if(mType == Type.LIFO) {
155             return mTaskQueue.removeLast();
156         }
157         return null;
158     }
159     
160 
161     public static ImageLoader getInstance() {
162         if(mInstance == null) {
163             synchronized (ImageLoader.class) {
164                 if(mInstance == null) {
165                     mInstance = new ImageLoader(DEAFULT_THREAD_COUNT, Type.LIFO);
166                 }
167             }
168             
169         }
170         return mInstance;
171     }
172     
173     public static ImageLoader getInstance(int threadCount, Type type) {
174         if(mInstance == null) {
175             synchronized (ImageLoader.class) {
176                 if(mInstance == null) {
177                     mInstance = new ImageLoader(threadCount, type);
178                 }
179             }
180             
181         }
182         return mInstance;
183     }
184     
185     
186     /**
187      * 根据path为ImageView是设置图片
188      * @param path
189      * @param imageView
190      */
191     public void loadImage(final String path, final ImageView imageView ) {
192         imageView.setTag(path);//设置Tag主要是为了校验,防止图片的混乱
193         if(mUIHandler == null) {
194             mUIHandler = new Handler() {
195                 @Override
196                 public void handleMessage(Message msg) {
197                     //获取得到图片,为imageview回调设置图片
198                     ImgBeanHolder holder = (ImgBeanHolder) msg.obj;
199                     Bitmap bm = holder.bitmap;
200                     ImageView imageview = holder.imageView;
201                     String path = holder.path;
202                     /**
203                      * 将path和getTag存储路径进行比较
204                      * 如果不比较,就会出现我们滑动到第二张图片,但是显示的还是第一张的图片
205                      * 这里我们绑定imageview和path就是为了防止这种情况
206                      */
207                     if(imageview.getTag().toString().equals(path)) {
208                         imageview.setImageBitmap(bm);
209                     }
210                     
211                 };
212             };
213         }
214         //根据path在缓存中获取bitmap
215         Bitmap bm = getBitmapFromLruCache(path);
216         if(bm != null) {
217             refreashBitmap(path, imageView, bm);    
218         } else {//内存中没有图片,加载图片到内存
219             addTasks(new Runnable() {
220                 public void run() {
221                     /**加载图片
222                      *  图片的压缩
223                      */
224                     //1. 获得图片需要显示的大小
225                     ImageSize imageSize = getImageViewSize(imageView);
226                     //2. 压缩图片
227                     Bitmap bm = decodeSampleBitmapFromPath(path,imageSize.width,imageSize.height);
228                     //3. 把图片加载到缓存 (一定要记得)
229                     addBitmapToLruCache(path,bm);        
230                     refreashBitmap(path, imageView, bm);    
231                     //每次线程任务加载完图片,之后释放一个信号量,即:信号量-1,此时就会寻找下一个任务(根据FIFO/LIFO不同的策略取出任务)
232                     mSemaphoreThreadPool.release();
233                 }
234 
235             });
236         }
237     }
238     
239     
240     public void refreashBitmap(final String path,
241             final ImageView imageView, Bitmap bm) {
242         Message message = Message.obtain();    
243         ImgBeanHolder holder = new ImgBeanHolder();
244         holder.bitmap = bm;
245         holder.path = path;
246         holder.imageView = imageView;
247         
248         message.obj = holder;
249         mUIHandler.sendMessage(message);
250     }                
251     
252     /**
253      * 将图片加入缓存LruCache
254      * @param path
255      * @param bm
256      */
257     private void addBitmapToLruCache(String path, Bitmap bm) {
258         if(getBitmapFromLruCache(path) == null) {
259             if(bm != null) {
260                 mLruCache.put(path, bm);
261             }
262         }
263         
264     }
265 
266     
267     /**
268      * 根据图片需要显示的宽和高,对图片进行压缩
269      * @param path
270      * @param width
271      * @param height
272      * @return
273      */
274     private Bitmap decodeSampleBitmapFromPath(String path,
275             int width, int height) {
276         //获取图片的宽和高,但是不把图片加载到内存中
277         BitmapFactory.Options options = new BitmapFactory.Options();
278         options.inJustDecodeBounds =true;//不把图片加载到内存中
279         BitmapFactory.decodeFile(path, options);
280         
281         options.inSampleSize = caculateInSampleSize(options,width, height);//计算获取压缩比
282         //使用获取到的inSampleSize再次解析图片
283         options.inJustDecodeBounds =false;//加载图片到内存
284         Bitmap bitmap = BitmapFactory.decodeFile(path, options);
285         
286         
287         return bitmap;
288     }
289 
290     
291     /**
292      *根据需求的宽和高,以及图片实际的宽和高,计算inSampleSize
293      * @param options
294      * @param width
295      * @param height
296      * @return inSampleSize 压缩比
297      */
298     private int caculateInSampleSize(Options options, int reqWidth, int reqHeight) {
299         int width = options.outWidth;
300         int height = options.outHeight;
301         
302         int inSampleSize = 1;
303         if(width>reqWidth || height > reqHeight) {
304             int widthRadio = Math.round(width*1.0f / reqWidth);
305             int heightRadio = Math.round(height*1.0f / reqHeight);
306             
307             inSampleSize = Math.max(widthRadio, heightRadio);    
308         }
309         
310         return inSampleSize;
311     }
312 
313     /**
314      * 根据ImageView获取适当的压缩的宽和高
315      * @param imageView
316      * @return
317      */
318     protected ImageSize getImageViewSize(ImageView imageView) {
319         ImageSize imageSize = new ImageSize();
320         DisplayMetrics displayMetrics = imageView.getContext().getResources().getDisplayMetrics();
321         LayoutParams lp = imageView.getLayoutParams();
322         
323         int width = imageView.getWidth();//获取imageview的实际宽度
324         if(width<=0) {
325             width = lp.width;//获取imageview在layout中声明的宽度
326         }
327         if(width<=0) {
328             width = getImageViewFieldValue(imageView, "mMaxWidth");//利用反射,检测获得最大值
329         }
330         if(width<=0) {
331             width = displayMetrics.widthPixels;
332         }
333         
334         
335         int height = imageView.getHeight();//获取imageview的实际高度
336         if(height<=0) {
337             height = lp.height;//获取imageview在layout中声明的高度
338         }
339         if(height<=0) {
340             height = getImageViewFieldValue(imageView, "mMaxHeight");//利用反射,检测获得最大值
341         }
342         if(height<=0) {
343             height = displayMetrics.heightPixels;
344         }
345         
346         imageSize.width = width;
347         imageSize.height = height;
348         return imageSize;
349     };
350     
351 /**
352  * 
353  * 通过反射获取imageview的某个属性值
354  * @param object
355  * @param fieldName
356  * @return
357  * 由于方法getMaxHeight是API16以上的才能使用,这里我们用反射使用这个方法
358  */
359 private static int getImageViewFieldValue(Object object, String fieldName) {
360     int value=0;
361         try {
362             Field field = ImageView.class.getDeclaredField(fieldName);
363             field.setAccessible(true);
364 
365             int fieldValue = field.getInt(object);
366             if (fieldValue > 0 && fieldValue < Integer.MAX_VALUE) {
367                 value = fieldValue;
368             }
369         } catch (Exception e) {
370             // TODO 自动生成的 catch 块
371             e.printStackTrace();
372         }
373     return value;
374 }
375     
376 /**
377  * 添加任务到任务队列,交给线程池执行
378  * @param runnable
379  */
380     @SuppressLint("NewApi")
381     private synchronized void addTasks(Runnable runnable) {//synchronized同步代码,防止多个线程进来出现死锁
382         mTaskQueue.add(runnable);
383         //if(mPoolThreadHandler == null) wait();
384         //确保我们在使用mPoolThreadHandler之前,我们初始化完毕mPoolThreadHandler(不为空),这里引入信号量
385         try {
386             if(mPoolThreadHandler == null) {
387                 mSemaphorePoolThreadHandler.acquire();
388             }    
389         } catch (InterruptedException e) {
390             // TODO 自动生成的 catch 块
391             e.printStackTrace();
392         }
393         mPoolThreadHandler.sendEmptyMessage(0x110);
394         
395         
396     }
397     
398 
399     /**
400      * 根据path在缓存中获取bitmap
401      * @param key
402      * @return
403      */
404     private Bitmap getBitmapFromLruCache(String key) {
405         // TODO 自动生成的方法存根
406         return mLruCache.get(key);
407     }
408     
409     /**
410      * 压缩图片之后的宽和高
411      * @author Administrator
412      *
413      */
414     private class ImageSize {
415         int width;
416         int height;
417     }
418     
419     private class ImgBeanHolder {
420         Bitmap bitmap;
421         ImageView imageView;
422         String path;
423     }
424 
425 }

 

三、代码实践-UI、UI适配器

1. 布局文件设计,首先我们从美工那边获得布局设计需要的图片,如下:

Android 高级UI设计笔记06:仿微信图片选择器

 

来到activity_main.xml,如下:

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     tools:context="com.himi.imageloader.MainActivity" >
 6 
 7     <!--
 8      android:numColumns="3" 设置显示的列数
 9      android:stretchMode="columnWidth" 缩放与列宽大小同步
10      android:cacheColorHint="@android:color/transparent" 自定义GridView拖动背景色
11      android:listSelector="@android:color/transparent" 选中item,item显示透明
12     -->
13 
14     <GridView
15         android:id="@+id/id_gridView"
16         android:layout_width="match_parent"
17         android:layout_height="match_parent"
18         android:cacheColorHint="@android:color/transparent"
19         android:horizontalSpacing="3dp"
20         android:listSelector="@android:color/transparent"
21         android:numColumns="3"
22         android:stretchMode="columnWidth"
23         android:verticalSpacing="3dp" />
24     <RelativeLayout 
25         android:layout_width="match_parent"
26         android:layout_height="50dp"
27         android:layout_alignParentBottom="true"
28         android:background="#ee000000"
29         android:clipChildren="true"
30         android:id="@+id/id_bottom_ly"
31         >
32         <TextView 
33             android:id="@+id/id_dir_name"
34             android:layout_width="wrap_content"
35             android:layout_height="wrap_content"
36             android:layout_alignParentLeft="true"
37             android:layout_centerVertical="true"
38             android:paddingLeft="10dp"
39             android:text="所有图片"
40             android:textColor="@android:color/white"
41             />
42          <TextView 
43             android:id="@+id/id_dir_count"
44             android:layout_width="wrap_content"
45             android:layout_height="wrap_content"
46             android:layout_alignParentRight="true"
47             android:layout_centerVertical="true"
48             android:paddingRight="10dp"
49             android:text="100张"
50             android:textColor="@android:color/white"
51             />
52         
53     </RelativeLayout>
54     
55 
56 </RelativeLayout>

显示布局效果如下:

Android 高级UI设计笔记06:仿微信图片选择器

Android 高级UI设计笔记06:仿微信图片选择器

上一篇:微信小程序の小程序事件流


下一篇:PC网页分享到微信,QQ空间,微博等