正文

android 之图片异步加载

IP云
IP云V管理员/6 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.概述

本文来自"慕课网" 的学习,只是对代码做一下分析

图片异步加载有2种方式:  (多线程/线程池) 或者 用其实AsyncTask , 其实AsyncTask底层也是用的多线程.

使用缓存的好处是 , 提高流畅度, 节约流量.

二.代码

1.先看图片加载工具类

public class ImageLoader {
private ImageView mImageview;
private String mUrl;
//创建缓存
private LruCache<String, Bitmap> mCaches;
private ListView mListView;
private Set<NewsAsyncTask> mTask; public ImageLoader(ListView listView) {
mListView = listView;
mTask = new HashSet<>();
//获得最大的缓存空间
int maxMemory = (int) Runtime.getRuntime().maxMemory();
//赋予缓存区最大缓存的四分之一进行缓存
int cacheSize = maxMemory / 4;
mCaches = new LruCache<String, Bitmap>(cacheSize) {
@Override
protected int sizeOf(String key, Bitmap value) {
//在每次存入缓存的时候调用
return value.getByteCount();
}
};
} //将图片通过url与bitmap的键值对形式添加到缓存中
public void addBitmapToCache(String url, Bitmap bitmap) {
if (getBitmapFromCache(url) == null) {
mCaches.put(url, bitmap);
}
} //通过缓存得到图片
public Bitmap getBitmapFromCache(String url) {
return mCaches.get(url);
} private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (mImageview.getTag().equals(mUrl))
mImageview.setImageBitmap((Bitmap) msg.obj);
}
}; //通过线程的方式去展示图片
public void showImageByThread(ImageView imageView, String url) {
mImageview = imageView;
mUrl = url;
new Thread() {
@Override
public void run() {
super.run();
Bitmap bitmap = getBitmapFromUrl(mUrl);
Message message = Message.obtain();
message.obj = bitmap;
mHandler.sendMessage(message);
}
}.start();
} //通过异步任务的方式去加载图片 public void showImageByAsyncTask(ImageView imageView, String url) {
//先从缓存中获取图片
Bitmap bitmap = getBitmapFromCache(url);
if (bitmap == null) {
imageView.setImageResource(R.mipmap.ic_launcher);
} else {
imageView.setImageBitmap(bitmap);
}
} private class NewsAsyncTask extends AsyncTask<String, Void, Bitmap> { // private ImageView mImageView;
private String mUrl; public NewsAsyncTask( String url) {
// mImageview = imageView;
mUrl = url;
} @Override
protected Bitmap doInBackground(String... params) {
String url = params[0];
//从网络获取图片
Bitmap bitmap = getBitmapFromUrl(url);
//将图片加入缓存中
if (bitmap != null) {
addBitmapToCache(url, bitmap);
}
return bitmap;
} @Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);
ImageView imageView = (ImageView) mListView.findViewWithTag(mUrl);
if (imageView!=null&&bitmap!=null){
imageView.setImageBitmap(bitmap);
}
mTask.remove(this);
}
} //滑动时加载图片
public void loadImages(int start, int end) {
for (int i = start; i < end; i++) {
String url = NewsAdapter.URLS[i];
//先从缓存中获取图片
Bitmap bitmap = getBitmapFromCache(url);
if (bitmap == null) {
NewsAsyncTask task = new NewsAsyncTask(url);
task.execute(url);
mTask.add(task);
} else {
ImageView imageView = (ImageView) mListView.findViewWithTag(url);
imageView.setImageBitmap(bitmap);
}
}
} //停止时取消所有任务加载
public void cancelAllTasks(){
if (mTask!=null){
for (NewsAsyncTask task :mTask){
task.cancel(false);
}
}
}
//网络获取图片
private Bitmap getBitmapFromUrl(String urlString) {
Bitmap bitmap;
InputStream is = null;
try {
URL url = new URL(urlString);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
is = new BufferedInputStream(connection.getInputStream());
bitmap = BitmapFactory.decodeStream(is);
connection.disconnect();
return bitmap;
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
assert is != null;
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
}

需要注意的几个部分:

<1

LruCache<String, Bitmap> mCaches 这是创建一个集合去存储缓存的图片,底层是HashMap实现的,其实和我们之前java中用到HashMap 弱引用/软引用比较类似, 但是

自2.3以后Android将更频繁的调用GC，导致软引用缓存的数据极易被释放。所以不能用之前的方式来缓存图片了,

LruCache使用一个LinkedHashMap简单的实现内存的缓存，没有软引用，都是强引用。如果添加的数据大于设置的最大值，就删除最先缓存的数据来调整内存。
我们可以在构造方法中,先得到当前应用所占总缓存大小,然后分出1/4用于存储图片,对应代码如下:

//获得当前应用最大的缓存空间
int maxMemory = (int) Runtime.getRuntime().maxMemory();
//赋予缓存区最大缓存的四分之一进行缓存
int cacheSize = maxMemory / 4;
mCaches = new LruCache<String, Bitmap>(cacheSize) {
@Override
protected int sizeOf(String key, Bitmap value) {
//在每次存入缓存的时候调用
return value.getByteCount();
}
};

<2

Set<NewsAsyncTask> mTask
定义一个Task任务集合,每个任务对应一个图片,当该图片被加载后要是否这个对应的task,对应代码如下:

ImageView imageView = (ImageView) mListView.findViewWithTag(mUrl);
if (imageView!=null&&bitmap!=null){
imageView.setImageBitmap(bitmap);
}
mTask.remove(this);

<3代码中根据 adapter 给每个图片设置 Tag 标识来获取图片,作用是: 避免 listview滚动时,由于convertView缓存造成图片错位显示, 对应代码如下: ----------> adapter代码后面给出

private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (mImageview.getTag().equals(mUrl))//--------------根据adapter设置的tag获取
mImageview.setImageBitmap((Bitmap) msg.obj);
}
};

<4

当listview一边滚动,一边加载图片会造成一个问题,可能会出现暂时的卡顿现象,尽管这个现象是偶尔发生,如果网络不好情况下,会加重这种情况,这是为什么呢?

因为listview滚动时,对画面流畅度要求比较高
虽然异步加载是在新线程中执行的,并未阻塞UI线程,当加载好图片后,去更新UI线程
就会导致UI线程发生一次重绘,如果这次重绘正好发生在listview滚动的时候
就会导致这个listview滚动过程中卡顿一下, 这样用户体验大大滴不好

为解决该问题:

我们可以在 listview滚动停止后 才去加载可见项, listview滚动过程中,取消加载项(滚动过程中不加载图片数据)
就能解决这个问题, 因为我们在滚动过程中,其实我并不关心 滚动的内容,我只会关心 滚动停止后要显示的内容,所以这么做是 完全OK的.  对应代码如下:

//滑动时加载图片 , 这里的 start 和end是 listview第一个和最后一个可见项
// adapter代码中会有详述
public void loadImages(int start, int end) {
for (int i = start; i < end; i++) {
String url = NewsAdapter.URLS[i];
//先从缓存中获取图片
Bitmap bitmap = getBitmapFromCache(url);
if (bitmap == null) {
NewsAsyncTask task = new NewsAsyncTask(url);
task.execute(url);
mTask.add(task);
} else {
ImageView imageView = (ImageView) mListView.findViewWithTag(url);
imageView.setImageBitmap(bitmap);
}
}
}

以上就是图片工具类比较重点的部分 ,下面介绍adapter

常常的分割线-------------------------------------------------------------------------------------------------------------

public class NewsAdapter extends BaseAdapter implements AbsListView.OnScrollListener{ private List<NewsBeans> mList;
private LayoutInflater mInflater;
private ImageLoader mImageLoader;
private int mStart;
private int mEnd;
//创建静态数组保存图片的url地址
public static String[] URLS;
private boolean mFirstIn; public NewsAdapter(Context context, List<NewsBeans> data,ListView listView) {
mList = data;
mInflater = LayoutInflater.from(context);
mImageLoader = new ImageLoader(listView);
URLS = new String[data.size()];
for(int i=0;i<data.size();i++){
URLS[i] = data.get(i).iv_title;
}
listView.setOnScrollListener(this);
mFirstIn = true;
} @Override
public int getCount() {
return mList.size();
} @Override
public Object getItem(int position) {
return mList.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
viewHolder = new ViewHolder();
convertView = mInflater.inflate(R.layout.list_item, null);
viewHolder.iv_title = (ImageView) convertView.findViewById(R.id.iv_icon);
viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
viewHolder.tv_content = (TextView) convertView.findViewById(R.id.tv_content);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
//设置默认显示的图片
viewHolder.iv_title.setImageResource(R.mipmap.ic_launcher);
//避免缓存影响使同一位置图片加载多次混乱
String url = mList.get(position).iv_title;
viewHolder.iv_title.setTag(url);
// new ImageLoader().showImageByThread(viewHolder.iv_title, url);
mImageLoader.showImageByAsyncTask(viewHolder.iv_title, url);
viewHolder.tv_content.setText(mList.get(position).tv_content);
viewHolder.tv_title.setText(mList.get(position).tv_title);
return convertView;
} @Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if(scrollState==SCROLL_STATE_IDLE){
//加载可见项
mImageLoader.loadImages(mStart,mEnd);
}else{
//停止加载
mImageLoader.cancelAllTasks();
}
} @Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
mStart = firstVisibleItem;
mEnd = firstVisibleItem + visibleItemCount;
if (mFirstIn && visibleItemCount>0){
mImageLoader.loadImages(mStart,mEnd);
}
} class ViewHolder {
private ImageView iv_title;
private TextView tv_title;
private TextView tv_content;
}
}

这里我们只需要注意3点

1.设置图片唯一标识Tag,避免图片错位显示

viewHolder.iv_title.setTag(url);

2.滚动过程中不加载图片,只有滚动停止后加载,下面重点分析2个方法

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if(scrollState==SCROLL_STATE_IDLE){
//加载可见项
mImageLoader.loadImages(mStart,mEnd);
}else{
//停止加载
mImageLoader.cancelAllTasks();
}
} @Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
mStart = firstVisibleItem;
mEnd = firstVisibleItem + visibleItemCount;
if (mFirstIn && visibleItemCount>0){
mImageLoader.loadImages(mStart,mEnd);
}
}

onScrollStateChanged()该方法,在listview第一次出现的时候,并不会执行,注意"并不会执行".oncroll()该方法在listview创建的时候就会执行,所以我们定义一个标志mFirstIn,在构造方法中初始为true,表示我们是第一次启动listview
对 mFirstIn && visibleItemCount>0 判断的解释:
"当前列表时第一次显示,并且listview的item已经展示出来",然后mFirstIn =false ,保证此段代码只有listview第一次显示的时候才会执行,之后滚动过程中不再执行这里为什么要判断visibleItemCount>0 呢?

其实 oncroll会被多次回调的, 但是初次调用
visibleItemCount 是 等于0的,也就是说此时item还未被加载
所以我们要判断 >0 跳过==0的情况,因为==0 item未被加载,当然 也就不会显示网络图片了

分割线--------------------------------------------------------------------------------------------------------------------------------------最后是 MainActivity代码,比较简单不再分析

public class MainActivity extends AppCompatActivity { private static String URL = "http://www.imooc.com/api/teacher?type=4&num=30";
private ListView mListView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.list_main);
new LoadImageAsync().execute(URL);
} //异步加载所有的网络数据
class LoadImageAsync extends AsyncTask<String, Void, List<NewsBeans>> { @Override
protected List<NewsBeans> doInBackground(String... params) {
return getJsonData(params[0]);
} @Override
protected void onPostExecute(List<NewsBeans> newsBeans) {
super.onPostExecute(newsBeans);
NewsAdapter adapter = new NewsAdapter(MainActivity.this, newsBeans,mListView);
mListView.setAdapter(adapter);
}
} //得到JSON数据
private List<NewsBeans> getJsonData(String url) {
List<NewsBeans> data = new ArrayList<>();
try {
//读取流得到json数据
String jsonList = readStream(new URL(url).openStream());
JSONObject jsonObject;
NewsBeans newsBeans;
try {
//解析JSON数据
jsonObject = new JSONObject(jsonList);
JSONArray jsonArray = jsonObject.getJSONArray("data");
for (int i = 0; i <= jsonArray.length(); i++) {
jsonObject = jsonArray.getJSONObject(i);
newsBeans = new NewsBeans();
newsBeans.iv_title = jsonObject.getString("picSmall");
newsBeans.tv_title = jsonObject.getString("name");
newsBeans.tv_content = jsonObject.getString("description");
data.add(newsBeans);
}
} catch (JSONException e) {
e.printStackTrace();
}
} catch (IOException e) {
e.printStackTrace();
}
return data;
} //读取输入流
private String readStream(InputStream is) {
InputStreamReader isr;
String result = "";
try {
String line;
//读取输入流
isr = new InputStreamReader(is, "utf-8");
//输入流转换成字节流
BufferedReader br = new BufferedReader(isr);
//逐行读取
while ((line = br.readLine()) != null) {
result += line;
}
} catch (IOException e) {
e.printStackTrace();
}
return result;
}
}

以上代码只是做了内存缓存,如果想做二级缓存,可以用

DiskLruCache 硬盘缓存.最后来张图吧