效果如下:
之前项目中加载图片框架一直使用ImageLoader,最近发现,有点古老,而且很久没人更新了,于是决定寻觅新的框架,今天先说一下,Glide,此框架优点很多
1.使用简单
2.扩展功能比较多
3.可以加载的资源比较多,比如加载网络,本地资源,drawable中的资源,手机内存卡中的资源等等。
使用方法:studio 打开tools 然后选择android,Android Device Monitor,选择你要跑项目的移动设备,然后找到storage文件夹,将图片拖动到sdcard0文件夹下即可。
1.在buid.gradle文件中加入如下:
compile 'com.github.bumptech.glide:glide:3.7.0'
2.Glide.with(context).load(path).into(img);
代码如下:
public class GlideBaseActivity extends Activity {
private ImageView img1,img2,img3,img4,img5,img6,img7;
private ImageView img8;
private ImageView img9;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_glide_base);
img1=(ImageView)findViewById(R.id.img1);
img2=(ImageView)findViewById(R.id.img2);
img3=(ImageView)findViewById(R.id.img3);
img4=(ImageView)findViewById(R.id.img4);
img5=(ImageView)findViewById(R.id.img5);
img6=(ImageView)findViewById(R.id.img6);
img7=(ImageView)findViewById(R.id.img7);
img8=(ImageView)findViewById(R.id.img8);
img9=(ImageView)findViewById(R.id.img9);
//加载网络图片
Glide.with(GlideBaseActivity.this).load("http://www.doolii.cn/static/hgj/image/online/161215/151231-11/STORE/SHOW/20161215145416_37692443866219C1FD723170FFF76FC1.png").into(img1);
//加载本地资源图片
Glide.with(GlideBaseActivity.this).load(R.mipmap.ic_launcher).into(img2);
//加载本地图片
String path=Environment.getExternalStorageDirectory()+"/d.jpg";
File file=new File(path);
Uri uri= Uri.fromFile(file);
Glide.with(GlideBaseActivity.this).load(uri).into(img3);
//加载网络gif
String gifUrl="http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=gif%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&cs=4274283541,1926494440&os=1193630673,825001875&simid=3345578633,77151300&pn=2&rn=1&di=115852003412&ln=1905&fr=&fmq=1481788237902_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D33e67285d343ad4ba67b4ec4b7327699%2F574e9258d109b3de76576b48cebf6c81800a4c22.jpg&rpstart=0&rpnum=0&adpicid=0";
//placeholder()占位图片
Glide.with(GlideBaseActivity.this).load(gifUrl).placeholder(R.mipmap.ic_launcher).into(img4);
//加载资源里的gif
Glide.with(GlideBaseActivity.this).load(R.drawable.gif).asGif().placeholder(R.mipmap.ic_launcher).into(img5);
//加载本地的gif
String gifPath=Environment.getExternalStorageDirectory()+"/a.gif";
File gifFile=new File(gifPath);
Glide.with(this).load(gifFile).placeholder(R.mipmap.ic_launcher).into(img6);
//加载本地小视频和快照
String videoPaht=Environment.getExternalStorageDirectory()+"/ceshi.mp4";
File videoFile=new File(videoPaht);
Glide.with(this).load(Uri.fromFile(videoFile)).into(img7);
//设置图片比例 然后 先加载图片缩略图 然后加载原图
String path1=Environment.getExternalStorageDirectory()+"/d.jpg";
File file1=new File(path1);
Glide.with(this).load(file1).thumbnail(0.1f).centerCrop().placeholder(R.mipmap.ic_launcher).into(img8);
//先建立一个缩略图对象 然后,先加载缩略图 再加载原图 将requestBuilder作为缩略图 加载到img9上 然后在加载原图
DrawableRequestBuilder requestBuilder=Glide.with(this).load(new File(path1));
Glide.with(this).load(Uri.fromFile(videoFile)).thumbnail(requestBuilder).centerCrop().into(img9);
}
glide的补充: 1.加载圆角 /** * 圆形图 * * Created by <lzh> on 2016/7/29. */ public class GlideCircleTransform extends BitmapTransformation { public GlideCircleTransform(Context context) { super(context); } @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { return circleCrop(pool, toTransform); } private static Bitmap circleCrop(BitmapPool pool, Bitmap source) { if (source == null) return null; int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; // TODO this could be acquired from the pool too Bitmap squared = Bitmap.createBitmap(source, x, y, size, size); Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888); if (result == null) { result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(result); Paint paint = new Paint(); paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP)); paint.setAntiAlias(true); float r = size / 2f; canvas.drawCircle(r, r, r, paint); return result; } @Override public String getId() { return getClass().getName(); } } 然后调用.transform(new GlideCircleTransform(context))即可实现图片切换成圆角 2.加载中图片和加载失败的图片 .placeholder(R.drawable.loading) //占位符 也就是加载中的图片,可放个gif .error(R.drawable.failed) //失败图片 3.添加图片加载淡入的效果 .crossFade() 4.自定义动画 (1)可以用xml实现动画 .animate( android.R.anim.slide_in_left ) <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-50%p" android:toXDelta="0" android:duration="@android:integer/config_mediumAnimTime"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="@android:integer/config_mediumAnimTime" /> </set> 此动画自己可以随便定义效果 (2)可以用动画类自定义动画 ViewPropertyAnimation.Animator animationObject = new ViewPropertyAnimation.Animator() { @Override public void animate(View view) { // if it's a custom view class, cast it here // then find subviews and do the animations // here, we just use the entire view for the fade animation view.setAlpha( 0f ); ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f ); fadeAnim.setDuration( 2500 ); fadeAnim.start(); }}; 然后调用 Glide.with( context ).load( url).animate( animationObject ) .into( imageView ); 5.添加图片加载完成监听 Glide.with(ShowImgActivity.this).load(urlString).centerCrop().error(R.drawable.failed).crossFade().into(new GlideDrawableImageViewTarget(imageView) { @Override public void onResourceReady(GlideDrawable drawable, GlideAnimation anim) { super.onResourceReady(drawable, anim); //在这里添加一些图片加载完成的操作 })}; 6.图片缓存机制 Glide默认开启磁盘缓存和内存缓存,当然也可以对单张图片进行设置特定的缓存策略。 Glide.with( context ).load( url).skipMemoryCache( true ).into( imageViewInternet ); 设置图片不加入到磁盘缓存 Glide.with( context ).load( url ).diskCacheStrategy( DiskCacheStrategy.NONE ).into( imageView); Glide支持多种磁盘缓存策略: DiskCacheStrategy.NONE :不缓存图片 DiskCacheStrategy.SOURCE :缓存图片源文件 DiskCacheStrategy.RESULT:缓存修改过的图片 DiskCacheStrategy.ALL:缓存所有的图片,默认7.设置加载图片的宽高 .override(1080, 1024) 8.图片的缩放,centerCrop()和fitCenter() 使用centerCrop是利用图片图填充ImageView设置的大小,如果ImageView的Height是match_parent则图片就会被拉伸填充 使用fitCenter即缩放图像让图像都测量出来等于或小于 ImageView 的边界范围该图像将会完全显示,但可能不会填满整个 ImageView。 9.加载成功回调 Glide.with(MainActivity.this).load(imgUrl).asGif().diskCacheStrategy(DiskCacheStrategy.SOURCE).into(new SimpleTarget<GifDrawable>() { @Override public void onResourceReady(GifDrawable resource, GlideAnimation<? super GifDrawable> glideAnimation) { //成功处理 img.setImageDrawable(resource); } }); Glide.with(MainActivity.this).load(imgUrl).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(new SimpleTarget<GlideDrawable>() { @Override public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) { //成功处理 img.setImageDrawable(resource); }}); 注意事项 不能直接给要使用glide的imageview设置tag, 因为glide在加载图片的时候用到了tag,会造成冲突,并报错。 当要用到tag写逻辑代码的时候,可以这样 .setTag(R.string.xxx,xxx);并.getTag(R.string.xxx); 布局文件代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context="www.basketi.cn.basketball.glidedemo.GlideBaseActivity"> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:text="加载网络图片" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img1" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text="加载本地资源图片" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img2" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text="加载本地图片" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img3" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text="加载网络gif" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img4" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text="加载资源里的gif" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img5" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text="加载本地的gif" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img6" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:text=" 加载本地小视频和快照" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img7" android:layout_width="match_parent" android:layout_height="180dp" /> <TextView android:text=" 设置图片比例 然后 先加载图片缩略图 然后加载原图" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img8" android:layout_width="match_parent" android:layout_height="180dp" /> <TextView android:text="先建立一个缩略图对象 然后,先加载缩略图 再加载原图 将requestBuilder作为缩略图 加载到img9上 然后在加载原图" android:layout_width="80dp" android:layout_height="80dp" /> <ImageView android:id="@+id/img9" android:layout_width="match_parent" android:layout_height="180dp" /> </LinearLayout> </ScrollView> </LinearLayout> 项目地址:http://download.csdn.net/download/lzq520210/9712644 使用centerCrop是利用图片图填充ImageView设置的大小,如果ImageView的Height是match_parent则图片就会被拉伸填充 使用fitCenter即缩放图像让图像都测量出来等于或小于 ImageView 的边界范围该图像将会完全显示,但可能不会填满整个 ImageView