从网站解析JSON异步加载到ListView事例

从http://www.imooc.com/learn/406学习到「从网站解析JSON异步加载到ListView」这样一个例子。整理如下。

主要知识点包括：异步（子线程）下载图片、图片的缓存、JSON解析

最终列表效果如图

主布局就是一个ListView，没什么好说的。

然后是每个子View的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="5dp">

        <TextView
            android:id="@+id/title_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="Title"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/content_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="content"
            android:textSize="10sp" />

    </LinearLayout>
</LinearLayout>

默认左边一张android机器人小图，右边标题和内容

public class MainActivity extends AppCompatActivity {

    private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.list_view);
        String URL = "http://www.imooc.com/api/teacher?type=4&num=30";
        /*开启异步进程*/
        new newsAsyncTask().execute(URL);
    }

    class newsAsyncTask extends AsyncTask<String, Void, List<NewsBean>> {

        @Override
        protected List<NewsBean> doInBackground(String... params) {
            String url = params[0];
            List<NewsBean> newsBeanList = new ArrayList<>();
            NewsBean newsBean;
            try {
                /*打开url对应的输入流，用readStream方法得到String格式的数据*/
                String jsonString = readStream(new URL(url).openStream());
                JSONObject jsonObject = new JSONObject(jsonString);
                JSONArray jsonArray = jsonObject.getJSONArray("data");
                for (int i = 0; i < jsonArray.length(); i++) {
                    /*每个JSONArray里的一项都是一个包含图片、标题、内容的JSONObject对象，依次把他们存入
                    * 一个封装的newsBean数组中*/
                    jsonObject = jsonArray.getJSONObject(i);
                    newsBean = new NewsBean();
                    newsBean.newsImageUrl = jsonObject.getString("picSmall");
                    newsBean.newsTitle = jsonObject.getString("name");
                    newsBean.newsContent = jsonObject.getString("description");
                    newsBeanList.add(newsBean);
                }
            } catch (IOException | JSONException e) {
                e.printStackTrace();
            }
            return newsBeanList;
        }

        @Override
        protected void onPostExecute(List<NewsBean> newsBeans) {
            super.onPostExecute(newsBeans);
            NewsArrayAdapter newsArrayAdapter = new NewsArrayAdapter(MainActivity.this,
                    R.layout.item_layout, newsBeans);
            listView.setAdapter(newsArrayAdapter);
        }
    }

    private String readStream(InputStream inputStream) {
        String result = "";
        try {
            String line;
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            while ((line = bufferedReader.readLine()) != null) {
                result += line;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }
}

MainActivity中的url是一个慕课网的API

可以看到整个的首先是一个Object，点击展开

我们需要的是这个名为“data”的JSONArray

遍历JSONArray中的每个JSONObject，我们需要的就是里面的数据。把他们存进一个NewsBean封装类里

public class NewsBean {
    public String newsImageUrl;
    public String newsTitle;
    public String newsContent;
}

完成后把List<NewsBean> newsBeans传入我们自定义的Adapter中，加载到ListView里显示出来。

那么我们具体的去看看这个自定义的Adapter

public class NewsArrayAdapter extends ArrayAdapter<NewsBean> {

    private int resource;
    private List<NewsBean> objects;
    private ImageLoader imageLoader;

    public NewsArrayAdapter(Context context, int resource, List<NewsBean> objects) {
        super(context, resource, objects);
        this.resource = resource;
        this.objects = objects;
        imageLoader = new ImageLoader();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;
        ViewHolder viewHolder;

        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resource, null);
            /*viewHolder用来对控件实例进行缓存，避免每次通过findViewById()获取控件*/
            viewHolder = new ViewHolder();
            viewHolder.titleView = (TextView) view.findViewById(R.id.title_text);
            viewHolder.contentView = (TextView) view.findViewById(R.id.content_text);
            viewHolder.imageView = (ImageView) view.findViewById(R.id.image_view);
            view.setTag(viewHolder);
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();
        }
        viewHolder.titleView.setText(objects.get(position).newsTitle);
        viewHolder.contentView.setText(objects.get(position).newsContent);
        String imageUrl = objects.get(position).newsImageUrl;
        /*每个imageView设置独立对应的标签(对应的url)，避免上下滑动listView时，
        缓存中的图片加载显示到不对应的imageView中*/
        viewHolder.imageView.setTag(imageUrl);
        /*通过自定义的imageLoader类设置图片*/
        imageLoader.setImageByThread(viewHolder.imageView, imageUrl);
        return view;
    }

    class ViewHolder {
        TextView titleView;
        TextView contentView;
        ImageView imageView;
    }
}

ListView中经典的利用convertView和ViewHolder避免多次加载的技巧我们当然用到了，我们还用到了一个自定义的类，用这个类中的方法去加载图片。那我们去看看这个类。

public class ImageLoader {

    private ImageView imageView;
    private String imageUrl;
    private LruCache<String, Bitmap> mCache;

    public ImageLoader() {
        int maxMemory = (int) Runtime.getRuntime().maxMemory();
        int cacheSize = maxMemory / 4;
        /*用来缓存图片的内存，设置大小为最大可用内存的1/4*/
        mCache = new LruCache<String, Bitmap>(cacheSize) {
            @Override
            protected int sizeOf(String key, Bitmap value) {
                /*默认返回的是数量，我们重写让它返回每个bitmap的大小*/
                return value.getByteCount();
            }
        };
    }

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            /*当imageView与设置的Tag配对时才加载图片*/
            if (imageView.getTag().equals(imageUrl)) {
                imageView.setImageBitmap((Bitmap) msg.obj);
            }
        }
    };

    public void setImageByThread(ImageView imageView, final String newsImageUrl) {
        this.imageView = imageView;
        imageUrl = newsImageUrl;
        new Thread() {
            @Override
            public void run() {
                Bitmap bitmap = getBitmapFromURL(newsImageUrl);
                Message message = Message.obtain();
                message.obj = bitmap;
                handler.sendMessage(message);
            }
        }.start();
    }

    public Bitmap getBitmapFromURL(String newsImageUrl) {
        Bitmap bitmap = getBitmapFromCache(newsImageUrl);
        /*如果内存中已有缓存的此图，直接返回此图*/
        if (bitmap != null) {
            return bitmap;
        }
        InputStream inputStream = null;
        try {
            URL url = new URL(newsImageUrl);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            inputStream = new BufferedInputStream(connection.getInputStream());
            bitmap = BitmapFactory.decodeStream(inputStream);
            connection.disconnect();
            if (bitmap != null) {
                addBitmapToCache(newsImageUrl, bitmap);
                return bitmap;
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if (inputStream != null) {
                    inputStream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

    public void addBitmapToCache(String imageUrl, Bitmap bitmap) {
        if (getBitmapFromCache(imageUrl) == null) {
            mCache.put(imageUrl, bitmap);
        }
    }

    public Bitmap getBitmapFromCache(String imageUrl) {
        return mCache.get(imageUrl);
    }
}

值得注意的是，我们之前在Adapter中已经对每个imageView设置了特定的Tag，在这里就用到了这个判断，保证不会因为imageView的复用出现图片多次加载的情况。至此整个demo就基本完成了。