Android -- 仿小米锁屏画报

1，首先看一下我们今天实现的效果，效果图如下：

2，首先说一下大体的实现思路，首先这个视图一共分为三层，最外层是一个RecyclerView,第二层是一个被虚化的ImageView，第三层是一个正常的ImageView。当用户滑动RecyclerView，监听滑动的高度而动态的改变第二层ImageView的透明度，当RecyclerView滑动高度超过某个特定的高度的时候，透明度达到最大值即第二层虚化的ImageView完全展现。当RecyclerView滑动到起始位置的时候，透明度达到最小值即第二层虚化的ImageView完全隐藏从而展示的是第一层的ImageView。，下面看一下具体的实现步骤：

　　第一步：了解Renderscript

　　这是它的官方文档，我们只需要了解它的使用就行了，大致分为一下几个步骤：

① 首先需要通过 Context 创建一个 Renderscript ；
② 其次通过创建的 Renderscript 来创建一个自己需要的脚本( ScriptIntrinsic )，比如这里③ 需要模糊，那就是 ScriptIntrinsicBlur ；
④ 然后至少创建一个 Allocation 类来创建、分配内存空间；
⑤ 接着就是对图像进行一些处理，比如说模糊处理；
⑥ 处理完成后，需要刚才的 Allocation 类来填充分配好的内存空间；
⑦ 最后可以选择性的对一些资源进行回收。

　　这里我们创建一个BlurBitmapUtil来简单的封装一下，注释很详细，就不废话了,代码如下：

　　BlurBitmapUtil.java

package com.qianmo.xiaomiblue.utils;

import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;

/**
 * Created by wangjitao on 2017/3/6 0006.
 * E-Mail：543441727@qq.com
 * <p>
 * 模糊图片工具类
 */

public class BlurBitmapUtil {

    /**
     * Renderscript 的简单的使用步骤
     * 下面简单说一下使用的步骤，这也是官方文档中的说明：
     * 首先需要通过 Context 创建一个 Renderscript ；
     * 其次通过创建的 Renderscript 来创建一个自己需要的脚本( ScriptIntrinsic )，比如这里需要模糊，那就是 ScriptIntrinsicBlur ；
     * 然后至少创建一个 Allocation 类来创建、分配内存空间；
     * 接着就是对图像进行一些处理，比如说模糊处理；
     * 处理完成后，需要刚才的 Allocation 类来填充分配好的内存空间；
     * 最后可以选择性的对一些资源进行回收。
     */

    //图片等比缩放
    private static final float BITMAP_SCALE = 0.4f;

    /**
     * 模糊图片工具类
     *
     * @param context
     * @param image
     * @param blurRadius
     * @return
     */
    public static Bitmap blurBitmap(Context context, Bitmap image, float blurRadius) {
        //设置渲染模糊程度，25f是最大的模糊化度
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            //计算等比缩小的长宽度
            int width = Math.round(image.getWidth() * BITMAP_SCALE);
            int height = Math.round(image.getHeight() * BITMAP_SCALE);

            //将缩小后的图片作为预渲染的图片
            Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
            //创建一张渲染后的输出图片
            Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);

            //创建RenderScript内核对象
            RenderScript rs = RenderScript.create(context);
            //创建模糊效果的RenderScript工具对象
            ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));

            //由于RenderScript并没有使用VM分配内存，所以需要使用Allocation来创建和分配内存空间
            //创建Allocation对象的时候其实内存使用的，需要使用copyto将数据填充
            Allocation allocationInput = Allocation.createFromBitmap(rs, inputBitmap);
            Allocation allocationOutput = Allocation.createFromBitmap(rs, outputBitmap);


            blurScript.setRadius(blurRadius);

            //设置blurscript对象的输入内存
            blurScript.setInput(allocationInput);
            //将输出数据保存到输入内存中
            blurScript.forEach(allocationOutput);

            //将数据填充到allocation中
            allocationOutput.copyTo(outputBitmap);
            return outputBitmap;
        } else {
            return null;
        }

    }
}

　　第二步：自定义BlurredView，具体实现是实现原ImageView和虚化ImageView的组合，继承自Relativelayout，注释很详细，就直接贴代码了，只要是由setBlurredLevel（）方法来控制透明度的改变

　　自定义的属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="BlurredView">
        <attr name="src" format="reference"/>
        <attr name="disableBlurred" format="boolean"/>
    </declare-styleable>
</resources>

　　对应的布局文件blurredview.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <ImageView
        android:id="@+id/blurredview_blurred_img"
        android:scaleType="fitXY"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:id="@+id/blurredview_origin_img"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

　　BlurredView.java

package com.qianmo.xiaomiblue.view;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.qianmo.xiaomiblue.R;
import com.qianmo.xiaomiblue.utils.BitmapUtil;
import com.qianmo.xiaomiblue.utils.BlurBitmapUtil;

import static android.R.attr.level;

/**
 * Created by wangjitao on 2017/3/6 0006.
 * E-Mail：543441727@qq.com
 */

public class BlurredView extends RelativeLayout {
    private Context mContext;

    //最大透明值
    private static final int ALPHA_MAX_VALUE = 255;
    //最大模糊度
    private static final float BLUR_RADIUS = 25f;

    //原图片
    private ImageView mOriginalImg;
    //模糊化后
    private ImageView mBlurredImg;

    private Bitmap mOriginalBitmap;
    private Bitmap mBlurredBitmap;

    //是否禁止使用高斯模糊
    private boolean isDisableBlurred;

    public BlurredView(Context context) {
        super(context);
        initView(context);
    }

    public BlurredView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        initAttr(context, attrs);
    }

    public BlurredView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        initAttr(context, attrs);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public BlurredView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView(context);
        initAttr(context, attrs);
    }

    /**
     * 当所有子View出现后 设置相关内容
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        setImageView();
    }

    /**
     * 初始化View
     *
     * @param context
     */
    private void initView(Context context) {
        mContext = context;
        LayoutInflater.from(mContext).inflate(R.layout.blurredview, this);
        mOriginalImg = (ImageView) findViewById(R.id.blurredview_origin_img);
        mBlurredImg = (ImageView) findViewById(R.id.blurredview_blurred_img);
    }

    /**
     * 初始化属性
     *
     * @param context
     * @param attrs
     */
    private void initAttr(Context context, AttributeSet attrs) {

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BlurredView);
        Drawable drawable = typedArray.getDrawable(R.styleable.BlurredView_src);
        isDisableBlurred = typedArray.getBoolean(R.styleable.BlurredView_disableBlurred, false);
        typedArray.recycle();

        //虚化照片
        if (null != drawable) {
            mOriginalBitmap = BitmapUtil.drawableToBitmap(drawable);
            mBlurredBitmap = BlurBitmapUtil.blurBitmap(context, mOriginalBitmap, BLUR_RADIUS);
        }

        //是否可见
        if (!isDisableBlurred) {
            mBlurredImg.setVisibility(VISIBLE);
        }
    }


    /**
     * 以代码的方式添加待模糊的图片
     *
     * @param blurredBitmap 待模糊的图片
     */
    public void setBlurredImg(Bitmap blurredBitmap) {
        if (null != blurredBitmap) {
            mOriginalBitmap = blurredBitmap;
            mBlurredBitmap = BlurBitmapUtil.blurBitmap(mContext, blurredBitmap, BLUR_RADIUS);
            setImageView();
        }
    }

    /**
     * 以代码的方式添加待模糊的图片
     *
     * @param blurDrawable 待模糊的图片
     */
    public void setBlurredImg(Drawable blurDrawable) {
        if (null != blurDrawable) {
            mOriginalBitmap = BitmapUtil.drawableToBitmap(blurDrawable);
            mBlurredBitmap = BlurBitmapUtil.blurBitmap(mContext, mOriginalBitmap, BLUR_RADIUS);
            setImageView();
        }
    }

    /**
     * 填充ImageView
     */
    private void setImageView() {
        mBlurredImg.setImageBitmap(mBlurredBitmap);
        mOriginalImg.setImageBitmap(mOriginalBitmap);
    }

    /**
     * 设置模糊程度
     *
     * @param level 模糊程度, 数值在 0~100 之间.
     */
    @SuppressWarnings("deprecation")
    public void setBlurredLevel(int level) {
        //超过模糊级别范围 直接抛异常
        if (level < 0 || level > 100) {
            throw new IllegalStateException("No validate level, the value must be 0~100");
        }

        //禁用模糊直接返回
        if (isDisableBlurred) {
            return;
        }

        //设置透明度
        mOriginalImg.setAlpha((int) (ALPHA_MAX_VALUE - level * 2.55));
    }

    /**
     * 显示模糊图片
     */
    public void showBlurredView() {
        mBlurredImg.setVisibility(VISIBLE);
    }

    /**
     * 选择是否启动/禁止模糊效果
     *
     * @param isDisableBlurred 是否禁用模糊效果
     */
    @SuppressWarnings("deprecation")
    public void setBlurredable(boolean isDisableBlurred) {
        if (isDisableBlurred) {
            mOriginalImg.setAlpha(ALPHA_MAX_VALUE);
            mBlurredImg.setVisibility(INVISIBLE);
        } else {
            mBlurredImg.setVisibility(VISIBLE);
        }
    }

    /**
     * 禁用模糊效果
     */
    @SuppressWarnings("deprecation")
    public void disableBlurredView() {
        isDisableBlurred = true;
        mOriginalImg.setAlpha(ALPHA_MAX_VALUE);
        mBlurredImg.setVisibility(INVISIBLE);
    }

    /**
     * 启用模糊效果
     */
    public void enableBlurredView() {
        isDisableBlurred = false;
        mBlurredImg.setVisibility(VISIBLE);
    }
}

　　第三步：设置RecyclerView，并监听滑动，改变虚化图片的透明度

　　MyAdapter

package com.qianmo.xiaomiblue.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.qianmo.xiaomiblue.R;

/**
 * Created by Administrator on 2017/3/6 0006.
 * E-Mail：543441727@qq.com
 */

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context context;
    private static final int ITEM_COUNT = 10;
    private static final int TYPE_HEAD = 0;
    private static final int TYPE_ITEM = 1;

    public MyAdapter(Context context) {
        this.context = context;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == TYPE_HEAD) {
            return new HeadViewHolder(LayoutInflater.from(context).inflate(R.layout.recyclerview_head, parent, false));
        }
        return new ItemViewHolder(LayoutInflater.from(context).inflate(R.layout.recyclerview_item, parent, false));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return TYPE_HEAD;
        } else {
            return TYPE_ITEM;
        }
    }

    @Override
    public int getItemCount() {
        return ITEM_COUNT;
    }

    public class ItemViewHolder extends RecyclerView.ViewHolder {
        public ItemViewHolder(View itemView) {
            super(itemView);
        }
    }

    public class HeadViewHolder extends RecyclerView.ViewHolder {
        public HeadViewHolder(View itemView) {
            super(itemView);
        }
    }
}

　　在MainActivity中设置

 recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(new MyAdapter(this));

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                mScrollerY += dy;
                //根据滚动距离控制模糊程度 滚动距离是模糊程度的十倍
                if (Math.abs(mScrollerY) > 1000) {
                    mAlpha = 100;
                } else {
                    mAlpha = Math.abs(mScrollerY) / 10;
                }
                //设置透明度等级
                blurredView.setBlurredLevel(mAlpha);
            }
        });

　　ok，这样我们的功能就实现了  ，很简单有没有，主要是Rederscript的掌握

　　github项目地址