效果如下:
之前项目中加载图片框架一直使用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>
项目地址:
使用centerCrop是利用图片图填充ImageView设置的大小,如果ImageView的Height是match_parent则图片就会被拉伸填充
使用fitCenter即缩放图像让图像都测量出来等于或小于 ImageView 的边界范围该图像将会完全显示,但可能不会填满整个 ImageView