本文是学习笔记,原视频地址:异步加载。主要是从慕课网提供提供的接口(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是Bitmap
1.创建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);至此,缓存也已经完成,运行程序,可以看到当加载完图片之后,再往上滑动,将会使用缓存,不会重复加载,这就省了流量
(待续。。。。)