Android---universal-image-loader应用-优快云博客

Universal-Image-loader GitHub源码地址

Universal Image Loader针对图片的加载、缓存、显示提供了强大、灵活的工具，它在图片的加载、缓存过程中提供了许多配置信息供我们选择。

特点：

多线程加载图片
图片的内存缓存或磁盘缓存
对图片的加载和下载过程进行监听，进行事件处理等

图片的来源可以是以下几种：

“http://site.com/image.png” // from Web
“file:///mnt/sdcard/image.png” // from SD card
“file:///mnt/sdcard/video.mp4” // from SD card (video thumbnail)
“content://media/external/images/media/13” // from content provider
“content://media/external/video/media/13” // from content provider
(video thumbnail)
“assets://image.png” // from assets
“drawable://” + R.drawable.img // from drawables (non-9patch images)

注意: 当使用drawable格式时，尽量使用原生方式ImageView.setImageResource(…)，而不要使用ImageLoader.

新建一个android工程，名为：UniversalImageLoader
导入jar包
在AndroidManifest中添加权限：

<manifest>
    <!-- Include following permission if you load images from Internet -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- Include following permission if you want to cache images on SD card -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    ...
</manifest>

4.ImageLoader在使用前，最好在全局Application中进行初始化配置，因此我们要自定义一个Application

public class CustomApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        initImageLoader(getApplicationContext());
    }

    private void initImageLoader(Context context){

        //图片的缓存路径
        File cacheDir = StorageUtils.getOwnCacheDirectory(context,"/aa");
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
        .memoryCache(new LruMemoryCache(20 * 1024 * 1024))
        .denyCacheImageMultipleSizesInMemory()
        .discCache(new UnlimitedDiskCache(cacheDir))
        .diskCacheFileNameGenerator(new Md5FileNameGenerator())
        .threadPoolSize(3)
        .threadPriority(Thread.NORM_PRIORITY - 2)
        .tasksProcessingOrder(QueueProcessingType.FIFO)
        .writeDebugLogs()
        .build();
        ImageLoader.getInstance().init(config);
    }
}

5.程序主布局文件activity.main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.universalimageloader.MainActivity" >

    <ListView 
        android:id="@+id/list_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="1dp"
        android:divider="#E0E0E0"
        />

</RelativeLayout>

6.ListView单项布局文件list_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    tools:context="com.example.universalimageloader.MainActivity" >

    <ImageView 
        android:id="@+id/img"
        android:layout_width="70dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        />
    <TextView 
        android:id="@+id/tv"    
        android:layout_toRightOf="@id/img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="50dp"
        android:gravity="center_vertical"
        />

</RelativeLayout>

7.MainActivity.java

public class MainActivity extends Activity {

    private ListView list_img;
    private List<Map<String,String>>datas = new ArrayList<>();
    private String[] images = new String[]{
                "http://api.androidhive.info/music/images/adele.png",
                "http://img1.imgtn.bdimg.com/it/u=4092462854,1557898995&fm=21&gp=0.jpg",
                "http://api.androidhive.info/music/images/eminem.png",
                "http://www.ld12.com/upimg358/allimg/c140921/14112A4V34010-219218.jpg",
                "http://www.ld12.com/upimg358/allimg/c150619/1434F6225920Z-105122.jpg",
                "http://api.androidhive.info/music/images/mj.png",
                "http://img0.imgtn.bdimg.com/it/u=4256610768,425170762&fm=21&gp=0.jpg",
                "http://gpgxx.nje.cn/JinBo_xscz_gpgxx/Space/uploadfile/photo/20130106201708.jpg",
                "http://p.3761.com/pic/88301406163694.jpg",
                "http://api.androidhive.info/music/images/rihanna.png",
                "http://www.feizl.com/upload2007/2012_06/120617142092295.jpg",
                "http://www.ld12.com/upimg358/allimg/c150715/143DPU03IF-5H92.jpg"
                };
    private String[] strs = new String[]{"item1","item2","item3","item4","item5",
                            "item6","item7","item8","item9","item10","item11","item12"};
    private String[] from = new String[]{"image","strs"};
    private int[] to = new int[]{R.id.img,R.id.tv};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();

        list_img = (ListView) findViewById(R.id.list_img);
        ImageAdapter adapter = new ImageAdapter(this, datas);
        list_img.setAdapter(adapter);
    }

    private void initData(){
        for(int i = 0; i < images.length; i++){
            Map<String, String>map = new HashMap<>();
            map.put("image", images[i]);
            map.put("strs", strs[i]);
            datas.add(map);
        }
    }

}

8.图片适配器文件ImageAdapter.java

public class ImageAdapter extends BaseAdapter {

    private Context mContext;
    private List<Map<String,String>>mDatas = new ArrayList<>();
    private LayoutInflater inflater;
    private DisplayImageOptions options;
    private ImageLoader loader;
    private ImageLoadingListener animateFirstListener = new AnimateFirstDisplayListener();

    public ImageAdapter(Context context, List<Map<String, String>> datas) {
        this.mContext = context;
        this.mDatas = datas;
        inflater = LayoutInflater.from(context);

        loader = ImageLoader.getInstance();
        options = new DisplayImageOptions.Builder()
        .showImageForEmptyUri(android.R.drawable.ic_delete)
        .showImageForEmptyUri(android.R.drawable.ic_menu_share)
        .showImageOnFail(R.drawable.ic_launcher)
        .cacheInMemory()
        .cacheOnDisc()
        .displayer(new RoundedBitmapDisplayer(100))
        .build();
    }

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

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

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if(convertView == null){
            convertView = inflater.inflate(R.layout.list_item, parent,false);
            holder = new ViewHolder();
            holder.img = (ImageView) convertView.findViewById(R.id.img);
            holder.tv = (TextView) convertView.findViewById(R.id.tv);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }

        loader.displayImage(mDatas.get(position).get("image"), holder.img, options,animateFirstListener);
        holder.tv.setText(mDatas.get(position).get("strs"));

        return convertView;
    }

    static class ViewHolder{
        private ImageView img;
        private TextView tv;
    }

    /**图片加载监听事件,当图片首次在屏幕上显示时,有一个淡入效果**/
    private static class AnimateFirstDisplayListener extends SimpleImageLoadingListener {
        static final List<String> displayedImages = Collections.synchronizedList(new LinkedList<String>());
        @Override
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
            if (loadedImage != null) {
                ImageView imageView = (ImageView) view;
                boolean firstDisplay = !displayedImages.contains(imageUri);
                if (firstDisplay) {
                    FadeInBitmapDisplayer.animate(imageView, 500); //设置image隐藏动画500ms
                    displayedImages.add(imageUri); //将图片uri添加到集合中
                }
            }
        }
    }
}

运行截图：
这里写图片描述

参考：http://smallwoniu.blog.51cto.com/3911954/1336194

源码下载

更改过后的代码，将ListView每一项的数据用一个实体类来存放。
ItemBean.java

public class ItemBean {

    private String img;
    private String tv;

    public String getImg() {
        return img;
    }
    public void setImg(String img) {
        this.img = img;
    }
    public String getTv() {
        return tv;
    }
    public void setTv(String tv) {
        this.tv = tv;
    }

}

MainActivity.java修改为：

private ArrayList<Object> itemList;

private void initData() {
        itemList = new ArrayList<>();
        for (int i = 0; i < strs.length; i++) {
            ItemBean item = new ItemBean();
            item.setImg(images[i]);
            item.setTv(strs[i]);
            itemList.add(item);
        }
    }

ImageAdapter adapter = new ImageAdapter(this, itemList);

适配器修改为：

private ArrayList<Object> itemList;

public ImageAdapter(Context context, ArrayList<Object> itemList) {
    this.mContext = context;
    this.itemList = itemList;
    inflater = LayoutInflater.from(context);
    ...

}

public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.list_item, parent, false);
            holder = new ViewHolder();
            holder.img = (ImageView) convertView.findViewById(R.id.img);
            holder.tv = (TextView) convertView.findViewById(R.id.tv);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        ItemBean bean = (ItemBean) itemList.get(position);
        loader.displayImage(bean.getImg(), holder.img, options,
                animateFirstListener);
        holder.tv.setText(bean.getTv());

        return convertView;
    }