Android(安卓)毛玻璃效果实现(Glide)

Android 毛玻璃效果实现

前段时间公司要做一个类似于慕课网APP个人界面的毛玻璃的效果，如下图所示，个人头像是从服务器获取的，找了很多资料，都没有找到简洁方便的实现方式，后来在Github上看到glide-transformations这个库，如获至宝，这个库和Glide一起使用，有很多常用的效果都可以通过它搞定，如：圆角图片等等，并且使用起来很简单，通过它毛玻璃效果可以很很轻松地实现啦，一行代码就搞定。

首先要导入两个库

compile 'com.github.bumptech.glide:glide:3.7.0'compile 'jp.wasabeef:glide-transformations:2.0.1'

布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent" android:layout_height="match_parent"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView android:id="@+id/iv_blur"            android:layout_width="match_parent"            android:layout_height="200dp" />        <ImageView android:id="@+id/iv_avatar"            android:layout_width="60dp"            android:layout_height="60dp"            android:layout_centerInParent="true"/>    RelativeLayout>LinearLayout>

代码：

/** * Created by keithwang on 16/8/14. */public class BlurTestActivity extends BaseActivity{    private ImageView blurImageView;    private ImageView avatarImageView;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_blur_test);        findViews();        initData();    }    private void findViews(){        blurImageView = (ImageView) findViewById(R.id.iv_blur);        avatarImageView = (ImageView) findViewById(R.id.iv_avatar);    }    private void initData(){        Glide.with(this).load(R.drawable.placeholder_avatar)                .bitmapTransform(new BlurTransformation(this, 25), new CenterCrop(this))                .into(blurImageView);        Glide.with(this).load(R.drawable.placeholder_avatar)                .bitmapTransform(new CropCircleTransformation(this))                .into(avatarImageView);    }}

运行起来效果如下所示：

BlurTransformation 这个就是毛玻璃的实现类

Android 毛玻璃效果实现

更多相关文章

随机推荐