一.概述
本文来自"慕课网" 的学习,只是对代码做一下分析
图片异步加载有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 硬盘缓存.最后来张图吧
