异步加载(AsyncTask异步任务、Handler、Json解析、Lrucache缓存、ListView滑动优化等来实现ListView图文混排)

本文是学习笔记,原视频地址：异步加载。主要是从慕课网提供提供的接口（www.imooc.com/api/teacher?type=4&num=30）获取数据进行Json解析，将解析得到的数据放到ListView中，观察Json数据，我们主要用到的是name 作为标题，description作为内容，picSmall作为ImageView获取图片的网址。其中用到的网络请求，AsyncTask，Json解析，将在本文的末尾贴出详细地址（如果还没贴就是我还没更完）一、AsyncTask请求网络获取Jason数据解析后获取数据源，建立适配器显示在ListView中（注：由于返回Json数据中picSmall为图片地址，所以第一步骤，先将ImageView中的图片设置为ic_launcher，在第二步骤中将听过两种方式来处理）先新建布局文件item.xml作为ListView的Item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/item_pic"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="@mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="4dp"
android:layout_gravity="center">
<TextView
android:id="@+id/item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="This is a Title"
android:gravity="center"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="@+id/item_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
android:textSize="15sp"
android:text="This is Content"
/>

</LinearLayout>

</LinearLayout>

也就是左边一个显示图片的ImageView，右边有两行，放两个TextView分别显示标题和内容在MainActivity中：1.先在MainActivity的布局文件中加一个ListView，比较简单，略去不写2.在MainActivity中，我们需要考虑到由于是网络请求属于费时操作，此处需要使用多线程和Handelr或者使用AsyncTask来处理，此处我们使用AsyncTask来处理。开始之前，我们先搞清楚需要传进去的参数，以及最终向要的结果是什么？本程序中，我们传进去一个url，想最终返回的是包含图片地址的url(还要对图片地址做进一步处理才会达到最终想要的图片)、题目、内容的多个对象，所以我们需要新建一个类来封装这些属性2.1新建NewsBean:

package com.example.administrator.asyncapplication;

public class NewsBean {
public  String newsPicUrl;
public String newsTitle;
public String newsContent;

}

2.2使用AsyncTask:

class NewsAsyncTask extends AsyncTask<String,Void,List<NewsBean>>{
@Override
protected List<NewsBean> doInBackground(String... params) {
return getJsonData (params[0]);
}

@Override
protected void onPostExecute(List<NewsBean> newsBeans) {
super.onPostExecute(newsBeans);

}

}

此时，我们需要一个getJsonData来返回我们所需要的List<NewsBean> 对象2.2 获取从网络上返回的数据之后进行Json解析：

private List<NewsBean> getJasonData(String url){
List<NewsBean> news = new ArrayList<NewsBean>();

try {
String data = getDataFromInputStream(new URL(url).openStream());
// Log.i("xyz", data);
//Json解析
NewsBean bean;
JSONObject jsonObject;
try {
jsonObject = new JSONObject(data);
JSONArray jsonArray = jsonObject.getJSONArray("data");
for(int i=0;i<jsonArray.length();i++){
jsonObject = jsonArray.getJSONObject(i);
bean = new NewsBean();
bean.newsPicUrl=jsonObject.getString("picSmall");
bean.newsTitle=jsonObject.getString("name");
bean.newsContent=jsonObject.getString("description");
news.add(bean);
}

} catch (JSONException e) {
e.printStackTrace();
}
;
} catch (IOException e) {
e.printStackTrace();
}
//System.out.println(news.size());
return news;

}

2.3读取服务器返回的InputStream数据 getDataFromInputStream

//读取输入流，返回字符
private String getDataFromInputStream(InputStream is){
InputStreamReader isr;
String result = "";//获取读取每一行之后的所有数据

try {
isr = new InputStreamReader(is, "utf-8");
BufferedReader bufferedReader = new BufferedReader(isr);
String line = "";
while ((line = bufferedReader.readLine()) != null) {
result += line;
}
} catch (IOException e) {
e.printStackTrace();
}

return result;
}

以上几个步骤，我们得到数据源List<NewsBean>，之后3.1建立适配器NewAdapter(用BaseAdapter)：

public class NewAdapter extends BaseAdapter {
List<NewsBean> list;
LayoutInflater inflater;

public NewAdapter(Context context,List<NewsBean> list){
this.list=list;
inflater = LayoutInflater.from(context);

}
@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int position) {
return list.get(position);
}

@Override
public long getItemId(int position) {

return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder=null;
NewsBean bean = list.get(position);
if(convertView==null){
viewHolder = new ViewHolder();
convertView=inflater.inflate(R.layout.item,null);
viewHolder.pic = (ImageView)convertView.findViewById(R.id.item_pic);
viewHolder.title =(TextView)convertView.findViewById(R.id.item_title);
viewHolder.content=(TextView)convertView.findViewById(R.id.item_content);
convertView.setTag(viewHolder);
}
else{
viewHolder =(ViewHolder)convertView.getTag();
}

//先将ImageView的图片设为固定的，后面会更改
viewHolder.pic.setImageResource(R.mipmap.ic_launcher);
viewHolder.title.setText(bean.newsTitle);
viewHolder.content.setText(bean.newsContent);

return convertView;
}
class ViewHolder{
public TextView title,content;
public ImageView pic;
}
}

3.2需要在MainActivity中创建异步任务的onPostExecute方法中设置适配器：

protected void onPostExecute(List<NewsBean> newsBeans) {
super.onPostExecute(newsBeans);
listView.setAdapter(new NewAdapter(MainActivity.this,newsBeans));
}

3.3在MainActivity中的onCreate()方法中执行异步任务：

public class MainActivity extends ActionBarActivity {

ListView listView;
private static String URL ="http://www.imooc.com/api/teacher?type=4&num=30" ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (ListView)findViewById(R.id.lv_main);

//请求网络，异步加载
new NewsAsyncTask().execute(URL);

}

之后运行程序。二、将得到的图片url解析成图片并设置给ImageView，并且做规避ListView的View复用的处理以及用Lrucache对图片进行缓存然后，我们来处理图片，由于Jason数据中解析出来的是图片地址，所以们需要连接网络，获取所需要的图片。可以用多线程和异步加载：1.采用多线程的方式给ImageView设置图片：1.1新建类ImageLoader,之后新建两个成员变量。ImageView mImageView; String mUrl;之后：

//从内部类中访问url需要被声明为最终类型
public void showImageByThread(ImageView imageView,final String url){
mUrl = url;
mImageView = imageView;
new Thread(){
@Override
public void run() {
super.run();
Bitmap bitmap = getbitMapFromUrl(url);
Message message = Message.obtain();
message.obj=bitmap;
//用Handler机制，将获得的图片通过消息发送出去
mHandler.sendMessage(message);
}
}.start();
}

1.2 getbitMapFromUrl :

//通过一个网络url地址返回一个图片
//得到拂去其返回的输入流
//通过BitmapFactory的decodeStream()方法来获取图片
public Bitmap getbitMapFromUrl(String url){
InputStream in=null;
Bitmap bitMap;
URL url1 = null;

try {
url1 = new URL(url);
HttpURLConnection connection= (HttpURLConnection) url1.openConnection();
in = new BufferedInputStream(connection.getInputStream());//对InputStream进行封装
bitMap = BitmapFactory.decodeStream(in);//根据InputStream得到BitMap
connection.disconnect();
return bitMap;
} catch (IOException e) {
e.printStackTrace();
}finally {
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}

return null;

1.3 在Handler中进行消息处理 handleMessage

private Handler mHandler = new Handler(){
//收到并处理消息
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);

mImageView.setImageBitmap((Bitmap) msg.obj);

}
};

1.4在NewAdapter中在设置完默认图片之后，加上一行new ImageLoader(viewHolder.pic,uri);(String url = list.get(position).newsPicUrl; url即为newsBean的属性之一）1.5之后运行程序，可以看到现在已经完全能接收到图片了，是不是已经完美了呢？远远不是！在快速滑动的过程中，可以看到图片出现闪动的状态，原因是刷新了多次，第一次是ListView中的缓存，先从缓存池中拿出图片，然后再从网络上下载，等于显示了两次，有时候会造成图片错位等。如何解决，将ViewHolder.pic和url联系起来，只有是当前的url时，才设置图片。在NewAdapter中 viewHolder.pic.setTag(url);在ImageLoader中的Handler处理中加上;if(mImageView.getTag().equals(mUrl)){mImageView.setBitmap((Bitmap)mas.obj)}，之后再快速滑动，可以看到不会出现刚才的情况。2.用AsyncTask的方式加载图片，不再详解2.1

//异步任务
class NewsAsyncTask extends AsyncTask<String,Void,Bitmap>{
//前期在设置ImageView和后期在避免ListView的缓存机制设置Tag时，需要用到url
private ImageView mImageView;
private String mUrl;
public NewsAsyncTask(ImageView imageView,String url){
mImageView = imageView;
mUrl = url;
}

@Override
protected Bitmap doInBackground(String... params) {

return  <span style="font-family: Arial, Helvetica, sans-serif;">getbitMapFromUrl(url);</span>
}

@Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);
if (mImageView.getTag().equals(mUrl)) {
mImageView.setImageBitmap(bitmap);
}
}

2.2

//通过异步任务将图片设置给ImageView
public void showImageByAsyncTask(ImageView imageView,String url){

new NewsAsyncTask(imageView, url).execute(url);

}

之后再NewAdapter做相应的更改即可。现在程序上下滑动可以看到先出现默认图标，然后才显示了图片，还不够完美，因为图片没有缓存，导致每次都得重新加载下面通过AsyncTask来介绍使用LruCache缓存三、使用LruCache缓存注意lruche对象的底层是用map来是实现的，所以很多map的方法，我们在这里也可以使用，存储也是通过键值对的方式，key在此处是图像的url，value是Bitmap1.创建cache对象我们在ImageLoader的构造函数中来初始化LruCache这样当ImageLoader对象被创建时，也就初始化了cache

public class ImageLoader {

private LruCache<String,Bitmap> caches;
public ImageLoader(){
//获得最大内存，从而设置缓存的空间大小，当款村的图骗超过设置的空间大小时
//lru最近未被使用的图片就会被抛出缓存
int maxMermory = (int)Runtime.getRuntime().maxMemory();
int cacheSize = maxMermory/8;
//匿名内部类 获得cache实例
caches = new LruCache<String,Bitmap>(cacheSize){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getByteCount();
}
};

}

2.两个方法，一个时从缓存中获取图片，另一个是添加图片到缓存中：

//先看缓存中是否有图片，没有的话就加到缓存中去
public void addBitmapToCache(String url,Bitmap bitmap){
if(getBitmapFromCache(url)==null){
caches.put(url,bitmap);
}

}
//根据url（key）从缓存中取出Bitmao(value)
public Bitmap getBitmapFromCache(String url){
return caches.get(url);
}

3.之后，还需要对showImageByAsyncTask进行修改，给ImageView设置图片之前，先看缓存中是否有对应图片，没有的话，从网络上进行加载，有的话，直接设置，但是，还有一点，从网络上加载完了，应该添加到缓存中，以便下次备用

//通过异步任务将图片设置给ImageView
public void showImageByAsyncTask(ImageView imageView,String url){
Bitmap bitMap = getBitmapFromCache(url);
//如果缓存中没有图片，就从网络上下载
//如果缓存中有图片了，直接设置
if(bitMap==null) {
new NewsAsyncTask(imageView, url).execute(url);
}else{
imageView.setImageBitmap(bitMap);
}

}

//异步任务
class NewsAsyncTask extends AsyncTask<String,Void,Bitmap>{
//前期在设置ImageView和后期在避免ListView的缓存机制设置Tag时，需要用到url
private ImageView mImageView;
private String mUrl;
public NewsAsyncTask(ImageView imageView,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);
if (mImageView.getTag().equals(mUrl)) {
mImageView.setImageBitmap(bitmap);
}
}
}

经过这几个步骤，缓存已经差不多了，为什么说差不多呢？因为我们在NewAdapter中还没有修改的，回想一下我们如何调用的

new ImageLoader().showImageByAsyncTask(viewHolder.pic,url);

这样，每次调用都重新生成了ImageLoader对象，哪里有缓存了？解决办法，将生成的ImageLoader对象保存起来

在NewAdapter中

private ImageLoader mImageLoader;

之后再NewAdapter的构造函数中，

mImageLoader = new ImageLoader();

之后在getView方法中更改：

mImageLoader.showImageByAsyncTask(viewHolder.pic,url);

至此，缓存也已经完成，运行程序，可以看到当加载完图片之后，再往上滑动，将会使用缓存，不会重复加载，这就省了流量

（待续。。。。）