Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

附录1简单介绍了Android开源的图片加载框架。在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬而未决:比如用户的头像,往往用户的头像是从服务器端读出的一个普通矩形图片,但是现在的设计一般要求在APP端的用户头像显示成圆形头像,那么此时虽然Glide可以加载,但加载出来的是一个矩形,如果要Glide在加载过程中就把矩形图转换成圆形的,则需要在Glide之上引入一个开源项目:glide-transformations
glide-transformations在github上的项目主页是:https://github.com/wasabeef/glide-transformations 
写一个例子说明。

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. package zhangphil.app;  
  2.   
  3. import android.support.v7.app.AppCompatActivity;  
  4. import android.os.Bundle;  
  5. import android.widget.ImageView;  
  6.   
  7. import com.bumptech.glide.Glide;  
  8.   
  9. import jp.wasabeef.glide.transformations.BlurTransformation;  
  10. import jp.wasabeef.glide.transformations.CropCircleTransformation;  
  11. import jp.wasabeef.glide.transformations.RoundedCornersTransformation;  
  12.   
  13. public class MainActivity extends AppCompatActivity {  
  14.   
  15.     //我csdn博客头像  
  16.     String url = "http://avatar.csdn.net/9/7/A/1_zhangphil.jpg";  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.activity_main);  
  22.   
  23.         //原图,是我博客的头像  
  24.         ImageView image1 = (ImageView) findViewById(R.id.image1);  
  25.         Glide.with(this).load(url).crossFade(1000).into(image1);  
  26.   
  27.         //原图 -> 圆图  
  28.         ImageView image2 = (ImageView) findViewById(R.id.image2);  
  29.         Glide.with(this).load(url).bitmapTransform(new CropCircleTransformation(this)).crossFade(1000).into(image2);  
  30.   
  31.         //原图的毛玻璃、高斯模糊效果  
  32.         ImageView image3 = (ImageView) findViewById(R.id.image3);  
  33.         Glide.with(this).load(url).bitmapTransform(new BlurTransformation(this25)).crossFade(1000).into(image3);  
  34.   
  35.         //原图基础上复合变换成圆图 +毛玻璃(高斯模糊)  
  36.         ImageView image4 = (ImageView) findViewById(R.id.image4);  
  37.         Glide.with(this).load(url).bitmapTransform(new BlurTransformation(this25), new CropCircleTransformation(this)).crossFade(1000).into(image4);  
  38.   
  39.         //原图处理成圆角,如果是四周都是圆角则是RoundedCornersTransformation.CornerType.ALL  
  40.         ImageView image5 = (ImageView) findViewById(R.id.image5);  
  41.         Glide.with(this).load(url).bitmapTransform(new RoundedCornersTransformation(this300, RoundedCornersTransformation.CornerType.BOTTOM)).crossFade(1000).into(image5);  
  42.     }  
  43. }  


布局则比较简单,是一个垂直方向的线性布局布局了5个ImageView,不再赘述。


代码运行结果。


原文:http://blog.csdn.net/zhangphil/article/details/52806374

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值