一.概述
目前为止,第三方的图片加载框架挺多的,比如UIL , Volley Imageloader等等。但是最好能知道实现原理,所以下面就来看看设计并开发一个加载网络、本地的图片框架。
总所周知,图片框架中肯定需要用到缓存,这里我们和其他框架一样,采用LruCache来管理图片的缓存,当然图片的加载测量使用LIFO比较好点,因为要加载最新的给用户。
我们采用异步消息处理机制来实现图片异步加载任务:用于UI线程当Bitmap加载完成后更新ImageView。
加载网络图片的原理,就是如果启用了硬盘缓存,加载时,先从内存中加载,然后从硬盘加载,最后再从网络下载。下载完成后,写入硬盘和内存缓存。
如果没有启用硬盘缓存,就直接从网络压缩下载获取,最后加入内存缓存即可。
二.演示效果图
三.图片加载框架实现解析
1、图片压缩
很多情况下,网络或者本地的图片都比较大,而我们的ImageView显示大小比较小,这时候就需要我们进行图片的压缩,以显示到ImageView上面去。
1.1、本地图片压缩
(1)获取ImageView所显示的大小
/**
* 获取ImageView所要显示的宽和高
*/
public static ImageSize getImageViewSize(ImageView imageView)
{
ImageSize imageSize = new ImageSize();
DisplayMetrics displayMetrics = imageView.getContext().getResources()
.getDisplayMetrics();
ViewGroup.LayoutParams lp = imageView.getLayoutParams();
// 获取imageview的实际宽度
int width = imageView.getWidth();
if (width <= 0)
{// 获取imageview在layout中声明的宽度
width = lp.width;
}
if (width <= 0)
{// 检查最大值
width = getImageViewFieldValue(imageView, "mMaxWidth");
}
if (width <= 0)
{
width = displayMetrics.widthPixels;
}
// 获取imageview的实际高度
int height = imageView.getHeight();
if (height <= 0)
{// 获取imageview在layout中声明的宽度
height = lp.height;
}
if (height <= 0)
{// 检查最大值
height = getImageViewFieldValue(imageView, "mMaxHeight");
}
if (height <= 0)
{
height = displayMetrics.heightPixels;
}
imageSize.width = width;
imageSize.height = height;
return imageSize;
}
上面代码中最大宽度,没有用getMaxWidth();用的是反射获取的,这是因为getMaxWidth竟然要API 16,没办法,为了兼容问题,只能采用反射机制,所以不太赞同反射。
(2)设置图片的inSampleSize
根据ImageView所要显示的大小和图片的实际大小来计算inSampleSize,实现如下:
/**
* 根据ImageView的宽高和图片实际的宽高计算SampleSize
*/
public static int calculateInSampleSize(BitmapFactory.Options options,
int reqWidth,int reqHeight)
{
int width = options.outWidth;
int height = options.outHeight;
int inSampleSize = 1;
if (width > reqWidth || height > reqHeight)
{
int widthRadio = Math.round(width * 1.0f / reqWidth);
int heightRadio = Math.round(height * 1.0f / reqHeight);
inSampleSize = Math.max(widthRadio, heightRadio);
}
return inSampleSize;
}
1.2、网络压缩
上面是本地的图片的压缩,如果是网络图片的话, 分两种情况,如果硬盘缓存开启的话, 就把图片下载到本地,然后在采用上面本地压缩方法;
如果硬盘缓存没有开启的话,才用BitmapFactory.decodeStream()来获取bitmap,然后和本地压缩一样的方法来计算采样率压缩。如下:
/**
* 根据url下载图片并压缩
*/
public static Bitmap downloadImageByUrl(String urlStr, ImageView imageview)
{
InputStream is = null;
try
{
URL url = new URL(urlStr);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
is = new BufferedInputStream(conn.getInputStream());
is.mark(is.available());
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inJustDecodeBounds = true;
Bitmap bitmap = BitmapFactory.decodeStream(is, null, opts);
//获取imageview想要显示的宽和高
ImageSize imageViewSize = ImageUtils.getImageViewSize(imageview);
opts.inSampleSize = ImageUtils.calculateInSampleSize(opts,
imageViewSize.width, imageViewSize.height);
opts.inJustDecodeBounds = false;
is.reset();
bitmap = BitmapFactory.decodeStream(is, null, opts);
conn.disconnect();
return bitmap;
} catch (Exception e)
{
e.printStackTrace();
} finally
{
try
{
if (is != null)
is.close();
} catch (IOException e)
{
}
}
return null;
}
图片压缩差不多就这样了,下面来看看图片加载框架的设计与实现
2、图片加载框架的设计架构
图片压缩完了,就放入我们的LruCache,然后通过setImageBitmap方法设置到我们的ImageView上。
图片加载框架的整体架构如下:
(1)、单例实现,单例默认不传参数,当然也支持传参单例调用框架。
(2)、图片缓存管理:包含一个LruCache用于管理我们的图片。
(3)、任务队列:每来一次新的加载图片的请求,封装成Task添加到的任务队列TaskQueue中去;
(4)、后台轮询线程:该线程在第一次初始化实例的时候启动,然后会一直在后台运行;当每来一次加载图片请求的时候,
除了会创建一个新的任务到任务队列中去,同时发一个消息到后台线程,后台线程去使用线程池去TaskQueue去取一个任务执行;
基本的框架设计架构就是上面这些,下面来看看具体的实现:
3、图片加载框架的具体实现
3.1、单例实现以及构造方法:
public static XCImageLoader getInstance()
{
if (mInstance == null)
{
synchronized (XCImageLoader.class)
{
if (mInstance == null)
{
mInstance = new XCImageLoader(DEAFULT_THREAD_COUNT,Type.LIFO);
}
}
}
return mInstance;
}
public static XCImageLoader getInstance(int threadCount,Type type)
{
if (mInstance == null)
{
synchronized (XCImageLoader.class)
{
if (mInstance == null)
{
mInstance = new XCImageLoader(threadCount,type);
}
}
}
return mInstance;
}
private XCImageLoader(int threadCount,Type type){
init(threadCount, type);
}
/**
* 初始化信息
* @param threadCount
* @param type
*/
private void init(int threadCount,Type type){
initBackThread();
//获取当前应用的最大可用内存
int maxMemory = (int) Runtime.getRuntime().maxMemory();
mLruCache = new LruCache(maxMemory/8){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getRowBytes() * value.getHeight();
}
};
//创建线程池
mThreadPool = Executors.newFixedThreadPool(threadCount);
mTaskQueue = new LinkedList();
mType = type;
mPoolTThreadSemaphore = new Semaphore(threadCount);
}
3.2、后台轮询线程:
后台线程中,创建一个Handler用来处理图片加载任务发过来的图片显示消息。
/**
* 初始化后台轮询线程
*/
private void initBackThread() {
//后台轮询线程
mPoolThread = new Thread(){
@Override
public void run() {
Looper.prepare();
mPoolThreadHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
//从线程池中取出一个任务开始执行
mThreadPool.execute(getTaskFromQueue());
try {
mPoolTThreadSemaphore.acquire();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
};
//释放信号量
mPoolThreadHandlerSemaphore.release();
Looper.loop();
}
};
mPoolThread.start();
}
3.3、使用框架显示图片-加载图片并显示到ImageView上
加载显示图片的时候,判断是否有LruCache,如果有的话,就从LruCache中取出来加载显示;
否则的话,就新建一个图片加载任务并添加到任务队列中。
/**
* 加载图片并显示到ImageView上
*/
public void displayImage(final String path,final ImageView imageView
,final boolean isFromNet){
imageView.setTag(path);
if(mUIHandler == null){
mUIHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
// 获取得到图片,为imageview回调设置图片
ImageHolder holder = (ImageHolder) msg.obj;
Bitmap bmp = holder.bitmap;
ImageView imageview = holder.imageView;
String path = holder.path;
// 将path与getTag存储路径进行比较,防止错乱
if (imageview.getTag().toString().equals(path))
{
if(bmp != null){
imageview.setImageBitmap(bmp);
}
}
}
};
}
// 根据path在缓存中获取bitmap
Bitmap bm = getBitmapFromLruCache(path);
if (bm != null)
{
refreshBitmap(path, imageView, bm);
}else{//如果没有LruCache,则创建任务并添加到任务队列中
addTaskToQueue(createTask(path, imageView, isFromNet));
}
}
3.4、创建图片加载任务并添加到任务队列中
图片加载任务首先会判断是否从网络加载,如果是的话,再一次判断是否有LruCache和DiskCache,如果都没有的话, 就从网络下载加载;
如果不从网络加载,就直接从本地加载;最后无论是否网络加载,都要把图片写入到LruCache和DiskCache中去,并且刷新显示Bitmap到
ImageView上。
当然最后添加任务到任务队列后,会通过mPoolThreadHandler.sendEmptyMessage(24)方法来通知后台线程去任务线程池中取出一个
任务线程来执行。
/**
* 添加任务到任务队列中
*/
private synchronized void addTaskToQueue(Runnable runnable)
{
mTaskQueue.add(runnable);
try
{
if (mPoolThreadHandler == null)
mPoolThreadHandlerSemaphore.acquire();
} catch (InterruptedException e)
{
e.printStackTrace();
}
mPoolThreadHandler.sendEmptyMessage(24);
}
/**
* 根据参数,创建一个任务
*/
private Runnable createTask(final String path, final ImageView imageView,
final boolean isFromNet)
{
return new Runnable()
{
@Override
public void run()
{
Bitmap bm = null;
if (isFromNet)
{
File file = getDiskCacheDir(imageView.getContext(),
Utils.makeMd5(path));
if (file.exists())// 如果在缓存文件中发现
{
Log.v(TAG, "disk cache image :" + path);
bm = loadImageFromLocal(file.getAbsolutePath(),
imageView);
} else
{
if (mIsDiskCacheEnable)// 检测是否开启硬盘缓存
{
boolean downloadState = ImageDownloadUtils
.downloadImageByUrl(path, file);
if (downloadState)// 如果下载成功
{
Log.v(TAG,
"download image :" + path
+ " to disk cache: "
+ file.getAbsolutePath());
bm = loadImageFromLocal(file.getAbsolutePath(),
imageView);
}
} else
{// 直接从网络加载
bm = ImageDownloadUtils.downloadImageByUrl(path,
imageView);
}
}
} else
{
bm = loadImageFromLocal(path, imageView);
}
// 3、把图片加入到缓存
setBitmapToLruCache(path, bm);
refreshBitmap(path, imageView, bm);
mPoolTThreadSemaphore.release();
}
};
}
3.4、显示Bitmap到ImageView上
通过UIHandler发消息来显示Bitmap到ImageView上去。
/**
* 刷新图片到ImageView
*/
private void refreshBitmap(final String path, final ImageView imageView,
Bitmap bm)
{
Message message = Message.obtain();
ImageHolder holder = new ImageHolder();
holder.bitmap = bm;
holder.path = path;
holder.imageView = imageView;
message.obj = holder;
mUIHandler.sendMessage(message);
}
最后,框架中使用到了两个信号量,下面稍微解析下:
第一个:mPoolThreadHandlerSemaphore= new Semaphore(0); 用于控制我们的mPoolThreadHandler的初始化完成,我们在使用mPoolThreadHandler会进行判空,如果为null,会通过mPoolThreadHandlerSemaphore.acquire()进行阻塞;当mPoolThreadHandler初始化结束,我们会调用.release();解除阻塞。
第二个:mPoolTThreadSemaphore= new Semaphore(threadCount);这个信号量的数量和我们加载图片的线程个数一致;每取一个任务去执行,我们会让信号量减一;每完成一个任务,会让信号量+1,再去取任务;目的是什么呢?为什么当我们的任务到来时,如果此时在没有空闲线程,任务则一直添加到TaskQueue中,当线程完成任务,可以根据策略去TaskQueue中去取任务,只有这样,我们的LIFO才有意义。
四.框架的使用实例
这里,我们用一个简单GridView加载显示1000张图片来演示我们的框架使用。
4.1、布局文件实现:
activity_xcimager_loader.xml:
layout_gridview_item.xml:
4.2、实例演示类文件实现:
public class XCImagerLoaderActivity extends AppCompatActivity {
private GridView mGridView;
private String[] mUrlStrs = ImageSources.imageUrls;
private XCImageLoader mImageLoader;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_xcimager_loader);
init();
mImageLoader = XCImageLoader.getInstance(3, XCImageLoader.Type.LIFO);
}
private void init() {
mGridView = (GridView) findViewById(R.id.gridview);
GridViewAdpter adapter = new GridViewAdpter(this,0,mUrlStrs);
mGridView.setAdapter(adapter);
}
private class GridViewAdpter extends ArrayAdapter
{
private Context mContext;
public GridViewAdpter(Context context, int resource, String[] datas)
{
super(context, 0, datas);
mContext = context;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
if (convertView == null)
{
convertView = LayoutInflater.from(mContext).inflate(
R.layout.layout_gridview_item, parent, false);
}
ImageView imageview = (ImageView) convertView
.findViewById(R.id.image_view);
imageview.setImageResource(R.mipmap.img_default);
TextView textview = (TextView)convertView.findViewById(R.id.text_pos);
textview.setText(""+(position + 1));
mImageLoader.displayImage(getItem(position), imageview, true);
return convertView;
}
}
}
五.项目代码目录结构图