安卓图片加载之使用universalimageloader加载圆形圆角图片

前言

话说这universalimageloader加载图片对搞过2年安卓程序都是用烂了再熟悉不过了，就是安卓新手也是百度就会有一大堆东西出来，今天为什么这里还要讲使用universalimageloader呢。一是因为这个东西确实是一个很不错的东西，第二让我们用imageloader来学习 加载圆形圆角图片。三呢以后项目中可能用到了直接copy。
GITHUB上的下载路径为：https://github.com/nostra13/Android-Universal-Image-Loader ，下载最新的库文件，并且导入到项目的LIB下便可以使用。该库以及DEMO本地下载链接：下载地址
效果图：

 

 

 

universalimageloader的简单介绍：

看了再也不担心会oom，然后也不需要去考率3级缓存，我们可以看出，UIL加载图片的一般流程是先判断内存中是否有对应的Bitmap，再判断磁盘（disk）中是否有，如果没有就从网络中加载。最后根据原先在UIL中的配置判断是否需要缓存Bitmap到内存或磁盘中。Bitmap加载完后，就对它进行解析，然后显示到特定的ImageView中。

universalimageloader的使用

第一步：加入库

 

1   3

<code> 1 .下载jar包放在libs文件夹中 2 .Maven dependency:  </code>

 

1 2 3 4 5

<code class = "hljs xml" ><dependency>      <groupid>com.nostra13.universalimageloader</groupid>      universal-image-loader</artifactid>      <version> 1.9 . 3 </version> </dependency></code>

3 .Gradle dependency:

?

1 2	<code class = "hljs bash" >compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.3' </code>

第二步：配置清单文件权限

?

1 2	<code class = "hljs xml" ><uses-permission android:name= "android.permission.WRITE_EXTERNAL_STORAGE" > <uses-permission android:name= "android.permission.INTERNET" ></uses-permission></uses-permission></code>

第三步：配置ImageLoaderConfiguration参数

在应用中配置ImageLoaderConfiguration参数（只能配置一次，如多次配置，则默认第一次的配置参数）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<code>File cacheDir = StorageUtils.getCacheDirectory(context);  //缓存文件夹路径 ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)          .memoryCacheExtraOptions( 480 , 800 ) // default = device screen dimensions 内存缓存文件的最大长宽          .diskCacheExtraOptions( 480 , 800 , null )  // 本地缓存的详细信息(缓存的最大长宽)，最好不要设置这个          .taskExecutor(...)          .taskExecutorForCachedImages(...)          .threadPoolSize( 3 ) // default  线程池内加载的数量          .threadPriority(Thread.NORM_PRIORITY - 2 ) // default 设置当前线程的优先级          .tasksProcessingOrder(QueueProcessingType.FIFO) // default          .denyCacheImageMultipleSizesInMemory()          .memoryCache( new LruMemoryCache( 2 * 1024 * 1024 )) //可以通过自己的内存缓存实现          .memoryCacheSize( 2 * 1024 * 1024 )  // 内存缓存的最大值          .memoryCacheSizePercentage( 13 ) // default          .diskCache( new UnlimitedDiscCache(cacheDir)) // default 可以自定义缓存路径           .diskCacheSize( 50 * 1024 * 1024 ) // 50 Mb sd卡(本地)缓存的最大值          .diskCacheFileCount( 100 )  // 可以缓存的文件数量          // default为使用HASHCODE对UIL进行加密命名， 还可以用MD5(new Md5FileNameGenerator())加密          .diskCacheFileNameGenerator( new HashCodeFileNameGenerator())          .imageDownloader( new BaseImageDownloader(context)) // default          .imageDecoder( new BaseImageDecoder()) // default          .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default           .discCache( new LimitedAgeDiscCache(cacheDir, 7 * 24 * 60 * 60 )) // 自定义缓存路径,7天后自动清除缓存          .writeDebugLogs() // 打印debug log          .build(); //开始构建  </code>

Configuration的参数就算是配好了，当然了怎么配置随你的便，但是必须在初始化以前必须要配置，为了不进行多次配置，我们都把它放在application里面的。

第四步：初始化imageLoder

ImageLoader.getInstance().init(config); // 初始化

第五步 ：imageLoder显示option的配置

?

1 2 3 4 5 6 7 8 9

<code class = "hljs avrasm" > options = new DisplayImageOptions.Builder()                  .showStubImage(R.drawable.ic_stub) //缓冲过程中图片                  .showImageForEmptyUri(R.mipmap.ic_launcher) // 设置图片Uri为空或是错误的时候显示的图片                  .showImageOnFail(R.drawable.ic_error) // 设置图片加载或解码过程中发生错误显示的图片                  .cacheInMemory( true ) //缓存道内存                  .cacheOnDisc( true ) //缓存到硬盘                  .bitmapConfig(Bitmap.Config.ARGB_8888)   //设置图片的解码类型                    .build();</code>

上段代码我们设置了加载显示过程中的图片处理，和缓存处理。

然后使用ImageLoader.getInstance().displayImage(url,imagview,options);
我们通过设置 .displayer属性来产生各种图片形状。

universalimageloader加载圆形图片

所以呢我们这里来了一个自定义圆形显示控件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

<code class = "hljs java" > import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.ColorFilter; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.PixelFormat; import android.graphics.Rect; import android.graphics.RectF; import android.graphics.Shader; import android.graphics.drawable.Drawable;   import com.nostra13.universalimageloader.core.assist.LoadedFrom; import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer; import com.nostra13.universalimageloader.core.imageaware.ImageAware;   /**   * Created by zengyu on 2016/3/2.   */   public class Displayer extends RoundedBitmapDisplayer {      public Displayer( int cornerRadiusPixels) {          super (cornerRadiusPixels);      }      // 显示位图      @Override      public void display(Bitmap bitmap, ImageAware imageAware,                          LoadedFrom loadedFrom) {          imageAware.setImageDrawable( new CircleDrawable(bitmap, margin));      }        public static class CircleDrawable extends Drawable {          private final int margin;          private final RectF mRect = new RectF();          private final BitmapShader bitmapShader;          private final Paint paint;          private RectF mBitmapRect;            public CircleDrawable(Bitmap bitmap, int margin) {              this .margin = 0 ;              // 创建着色器              bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,                      Shader.TileMode.CLAMP);              mBitmapRect = new RectF(margin, margin, bitmap.getWidth() - margin,                      bitmap.getHeight() - margin);              // 设置画笔              paint = new Paint();              paint.setAntiAlias( true );              paint.setShader(bitmapShader);          }            // 画圆，覆盖原来的位图          @Override          protected void onBoundsChange(Rect bounds) {              super .onBoundsChange(bounds);              mRect.set(margin, margin, bounds.width() - margin, bounds.height()                      - margin);                // 调整位图，设置该矩阵，转换映射源矩形和目的矩形              Matrix shaderMatrix = new Matrix();              shaderMatrix.setRectToRect(mBitmapRect, mRect,                      Matrix.ScaleToFit.FILL);              // 设置着色器矩阵              bitmapShader.setLocalMatrix(shaderMatrix);          }            // 画出其边界（通过设置的setBounds）          @Override          public void draw(Canvas canvas) {              canvas.drawRoundRect(mRect, mRect.width()/ 2 , mRect.height()/ 2 ,                      paint);          }            /**           * 返回此绘制对象的不透明度/透明度 ，返回的值是抽象的格式常数的PixelFormat之一：未知，半透明，透明或不透明           * */          @Override          public int getOpacity() {              // 半透明              return PixelFormat.TRANSLUCENT;          }            // 设置透明度          @Override          public void setAlpha( int alpha) {              paint.setAlpha(alpha);          }            // 彩色滤光片（通过设置setColorFilter）          @Override          public void setColorFilter(ColorFilter cf) {              paint.setColorFilter(cf);          }      } } </code>

好了基本的使用都讲完了。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<code class = "hljs avrasm" > import android.graphics.Bitmap; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ImageView;   import com.nostra13.universalimageloader.core.DisplayImageOptions; import com.nostra13.universalimageloader.core.ImageLoader; import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer; import butterknife.ButterKnife; import butterknife.InjectView; public class MainActivity extends AppCompatActivity {      @InjectView (R.id.iv_normal)      ImageView ivNormal;      @InjectView (R.id.iv_fillet)      ImageView ivFillet;      @InjectView (R.id.iv_circular)      ImageView ivCircular;      private  DisplayImageOptions options1,options2,options3;      @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.inject( this );          //原图显示          options1 = new DisplayImageOptions.Builder()                  .showStubImage(R.drawable.ic_stub)                  .showImageForEmptyUri(R.mipmap.ic_launcher)                  .showImageOnFail(R.drawable.ic_error)                  .cacheInMemory( true )                  .cacheOnDisc( true )                  .bitmapConfig(Bitmap.Config.ARGB_8888)   //设置图片的解码类型                  .build();          //圆角图片          options2 = new DisplayImageOptions.Builder()                  .showStubImage(R.drawable.ic_stub)                  .showImageForEmptyUri(R.mipmap.ic_launcher)                  .showImageOnFail(R.drawable.ic_error)                  .cacheInMemory( true )                  .cacheOnDisc( true )                  .bitmapConfig(Bitmap.Config.ARGB_8888)   //设置图片的解码类型                  .displayer( new RoundedBitmapDisplayer( 20 ))                  .build();          //圆形图片          options3 = new DisplayImageOptions.Builder()                  .showStubImage(R.drawable.ic_stub)                  .showImageForEmptyUri(R.mipmap.ic_launcher)                  .showImageOnFail(R.drawable.ic_error)                  .cacheInMemory( true )                  .cacheOnDisc( true )                  .bitmapConfig(Bitmap.Config.ARGB_8888)   //设置图片的解码类型                  .displayer( new Displayer( 0 ))                  .build();          ImageLoader.getInstance().displayImage( "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg" ,ivNormal,options1);          ImageLoader.getInstance().displayImage( "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg" ,ivFillet,options2);         ImageLoader.getInstance().displayImage( "https://img-my.csdn.net/uploads/201309/01/1378037193_1286.jpg" ,ivCircular,options3);      } }</code>

四、注意事项

1、ImageLoader是根据ImageView的height，width确定图片的宽高
2、一定要对ImageLoaderConfiguration进行初始化,否则会报错
3、开启缓存后默认会缓存到外置SD卡
4、清除缓存public void onClearMemoryClick(View view) { ImageLoader.getInstance().clearMemoryCache(); // 清除内存缓存 } public void onClearDiskClick(View view) { ImageLoader.getInstance().clearDiskCache(); // 清除本地缓存 }

ImageView 要使用 android:background="@mipmap/chat_default_avatar" 才会显示图片   android:src="@mipmap/chat_default_avatar" 不显示图片