Imageloader四种图片显示（圆形，淡入，圆角，修饰）使用

最新推荐文章于 2026-05-04 07:02:46 发布

原创最新推荐文章于 2026-05-04 07:02:46 发布 · 4.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#图片 #动画 #开源

android 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用特定组件实现图片的圆形、圆角显示效果及图片修饰，并提供了代码示例，包括如何添加淡入动画。

这一长篇我们来看这四种图片显示在代码中如何使用，以开源组件中的例子为准。

先看一组圆形和淡入动画的效果

这个淡入为了能看清效果我的时间改成了10s;

圆角的效果图：

1.圆形图片的使用

options = new DisplayImageOptions.Builder()
					.showImageOnLoading(R.drawable.ic_stub)
					.showImageForEmptyUri(R.drawable.ic_empty)
					.showImageOnFail(R.drawable.ic_error)
					.cacheInMemory(true)
					.cacheOnDisk(true)
					.considerExifParams(true)
					.displayer(new CircleBitmapDisplayer(Color.WHITE, 5))
					.build();

其它的参数就网上的说明比较多，只说下关于圆图片：

displayer(newCircleBitmapDisplayer(Color.WHITE,5))

圆边为白色5个像素。然后调用下面的语句

ImageLoader.getInstance().displayImage(url, imageView, options);

如果要在圆形的图片上加一个淡入和效果

private ImageLoadingListener animateFirstListener = new AnimateFirstDisplayListener();
ImageLoader.getInstance().displayImage(url, imageView, options, animateFirstListener);   
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);
                    displayedImages.add(imageUri);
                }
            }
        }
    }

解释一下动画的监听

onLoadingComplete图片加载完成的方法

在方法里面先判断图片不为空，然后判断图片url不存在集合中是第一次显示，然后调用FadeInBitmapDisplayer.animate(imageView,500);

具体的实现过程可以看上一片代码分析中的FadeInBitmapDisplayer类。动画显示之后氢这个图加放已经显示的集合中

2.圆角图片的显示

	options = new DisplayImageOptions.Builder()
					.showImageOnLoading(R.drawable.ic_stub)
					.showImageForEmptyUri(R.drawable.ic_empty)
					.showImageOnFail(R.drawable.ic_error)
					.cacheInMemory(true)
					.cacheOnDisk(true)
					.considerExifParams(true)
					.bitmapConfig(Bitmap.Config.RGB_565)
					.displayer(new RoundedBitmapDisplayer(20))
					.build();
    ImageLoader.getInstance().displayImage(url, imageView, options);

和圆形的过种一样把CircleBitmapDisplayer(Color.WHITE,5)换成newRoundedBitmapDisplayer(20),圆角的半径20像素

3.图片修饰

我们先看一组正常情况的图片

下面看一下修饰过的图

除去不一们的圆角还有一个地方，仔细发现哦

	options = new DisplayImageOptions.Builder()
					.showImageOnLoading(R.drawable.ic_stub)
					.showImageForEmptyUri(R.drawable.ic_empty)
					.showImageOnFail(R.drawable.ic_error)
					.cacheInMemory(true)
					.cacheOnDisk(true)
					.considerExifParams(true)
					.bitmapConfig(Bitmap.Config.RGB_565)
					.displayer(new RoundedVignetteBitmapDisplayer(20,20))
					.build();
		}