仿支付宝模糊下拉图片

GIF.gif

主要设计理念。下拉图片----使用ScrollView 。让 计算滑动y方向偏移值 让图片向上-50个DP 自己定义，当向下移动时展示所以图片，不是下拉时不处理，松手返回，再进行高斯模糊图片。

原理比较简单下拉源码图片如下：

public class PullScrollView extends ScrollView implements 

ViewTreeObserver.OnGlobalLayoutListener {

View view;
int srcTopMargion;
float lastY;
float offsetY;

public PullScrollView(Context context, AttributeSet attrs) {
    super(context, attrs);
    ViewTreeObserver observer = getViewTreeObserver();
    if (null != observer)
        observer.addOnGlobalLayoutListener(this);
}


@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    view = findViewById(R.id.pull_img);
}


@Override
public boolean onTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    float y = ev.getY();
    Log.d("onTouchEvent", "action=" + action + ",y=" + y);
    MarginLayoutParams params = (MarginLayoutParams) view.getLayoutParams();
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            lastY = y;
            break;
        case MotionEvent.ACTION_MOVE:
            //计算滑动y方向偏移值
            offsetY = y - lastY;
            //向下移动
            if (offsetY > 0) {
                //滑动到看到所有图片展示，交给原来的逻辑处理
                if (params.topMargin == 0) {
                    return super.onTouchEvent(ev);
                }
                //在不是下拉图片的时候，向下移动，交给原来的逻辑处理
                if (getScrollY() != 0) {
                    return super.onTouchEvent(ev);
                }
                //可以下拉图片的情况
                params.topMargin += offsetY / 10;
                Log.d("onTouchEvent", "topMargin" + params.topMargin + ",lastY=" + lastY + ",y=" + y + ",offsetY" + offsetY);
                if (params.topMargin >= 0) {
                    params.topMargin = 0;
                }
                view.setLayoutParams(params);
                invalidate();
            }
            lastY = y;
            break;
        case MotionEvent.ACTION_UP:
            //不和原始margion偏移一样的时候
            if (params.topMargin != -srcTopMargion) {
                Log.d("ACTION_UP", "moveY=" + (srcTopMargion + params.topMargin));
                //滚动原始偏移值和现在偏移值之间的差值 eg:3~10
                ObjectAnimator animator = ObjectAnimator.ofInt(this, "moveY", params.topMargin, -srcTopMargion);
                animator.setDuration(200);
                animator.setInterpolator(new AccelerateDecelerateInterpolator());
                animator.start();
            }
            break;
    }
    return super.onTouchEvent(ev);
}

/**
 * 设置移动中的Y值
 *
 * @param value
 */
public void setMoveY(int value) {
    MarginLayoutParams params = (MarginLayoutParams) view.getLayoutParams();
    params.topMargin = value;
    Log.d("computeScroll", "topMargin=" + params.topMargin);
    view.setLayoutParams(params);
    invalidate();
}

@Override
public void onGlobalLayout() {
    MarginLayoutParams params = (MarginLayoutParams) view.getLayoutParams();
    srcTopMargion = -params.topMargin;
    Log.d("srcTopMargion", "" + srcTopMargion);
    getViewTreeObserver()
            .removeGlobalOnLayoutListener(this);
}}

高斯模糊代码:

public class BitmapBlurUtil {
    private static ExecutorService executor;

    private static int POOL_SIZE = 2;// 单个CPU线程池大小

    private static ExecutorService getExecutor() {

        if (executor == null) {

            int cpuNums = Runtime.getRuntime().availableProcessors();

            executor = Executors.newFixedThreadPool(cpuNums * POOL_SIZE);

        }

        return executor;

    }

    public static void addTask(Bitmap bitmap, Handler handler) {

        getExecutor().submit(new BitmapVagueTask(bitmap, handler));

    }

    /**
     * 水平方向模糊度
     */

    private static float hRadius = 3;

    /**
     * 竖直方向模糊度
     */

    private static float vRadius = 3;

    /**
     * 模糊迭代度
     */

    private static int iterations = 5;

    /**
     * 异步
     *
     * @author baiyuliang
     */

    private static class BitmapVagueTask implements Runnable {

        private Bitmap bitmap;

        private Handler handler;

        public BitmapVagueTask(Bitmap bitmap, Handler handler) {

            super();

            this.bitmap = bitmap;

            this.handler = handler;

        }

        @Override

        public void run() {

            boxBlurFilter(bitmap, handler);

        }

    }

    /**
     * 高斯模糊
     *
     * @param bmp
     * @return
     */

    private static void boxBlurFilter(Bitmap bmp, Handler handler) {

        int width = bmp.getWidth();

        int height = bmp.getHeight();

        int[] inPixels = new int[width * height];

        int[] outPixels = new int[width * height];

        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        bmp.getPixels(inPixels, 0, width, 0, 0, width, height);

        for (int i = 0; i < iterations; i++) {

            blur(inPixels, outPixels, width, height, hRadius);

            blur(outPixels, inPixels, height, width, vRadius);

        }

        blurFractional(inPixels, outPixels, width, height, hRadius);

        blurFractional(outPixels, inPixels, height, width, vRadius);

        bitmap.setPixels(inPixels, 0, width, 0, 0, width, height);

        if (handler != null) {

            @SuppressWarnings("deprecation")

            Drawable drawable = new BitmapDrawable(bitmap);

            Message message = new Message();

            message.obj = drawable;

            handler.sendMessage(message);

        }

    }

    private static void blur(int[] in, int[] out, int width, int height, float radius) {

        int widthMinus1 = width - 1;

        int r = (int) radius;

        int tableSize = 2 * r + 1;

        int divide[] = new int[256 * tableSize];

        for (int i = 0; i < 256 * tableSize; i++)

            divide[i] = i / tableSize;

        int inIndex = 0;

        for (int y = 0; y < height; y++) {

            int outIndex = y;

            int ta = 0, tr = 0, tg = 0, tb = 0;

            for (int i = -r; i <= r; i++) {

                int rgb = in[inIndex + clamp(i, 0, width - 1)];

                ta += (rgb >> 24) & 0xff;

                tr += (rgb >> 16) & 0xff;

                tg += (rgb >> 8) & 0xff;

                tb += rgb & 0xff;

            }

            for (int x = 0; x < width; x++) {

                out[outIndex] = (divide[ta] << 24) | (divide[tr] << 16)

                        | (divide[tg] << 8) | divide[tb];

                int i1 = x + r + 1;

                if (i1 > widthMinus1)

                    i1 = widthMinus1;

                int i2 = x - r;

                if (i2 < 0)

                    i2 = 0;

                int rgb1 = in[inIndex + i1];

                int rgb2 = in[inIndex + i2];

                ta += ((rgb1 >> 24) & 0xff) - ((rgb2 >> 24) & 0xff);

                tr += ((rgb1 & 0xff0000) - (rgb2 & 0xff0000)) >> 16;

                tg += ((rgb1 & 0xff00) - (rgb2 & 0xff00)) >> 8;

                tb += (rgb1 & 0xff) - (rgb2 & 0xff);

                outIndex += height;

            }

            inIndex += width;

        }

    }

    private static void blurFractional(int[] in, int[] out, int width,

                                       int height, float radius) {

        radius -= (int) radius;

        float f = 1.0f / (1 + 2 * radius);

        int inIndex = 0;

        for (int y = 0; y < height; y++) {

            int outIndex = y;

            out[outIndex] = in[0];

            outIndex += height;

            for (int x = 1; x < width - 1; x++) {

                int i = inIndex + x;

                int rgb1 = in[i - 1];

                int rgb2 = in[i];

                int rgb3 = in[i + 1];

                int a1 = (rgb1 >> 24) & 0xff;

                int r1 = (rgb1 >> 16) & 0xff;

                int g1 = (rgb1 >> 8) & 0xff;

                int b1 = rgb1 & 0xff;

                int a2 = (rgb2 >> 24) & 0xff;

                int r2 = (rgb2 >> 16) & 0xff;

                int g2 = (rgb2 >> 8) & 0xff;

                int b2 = rgb2 & 0xff;

                int a3 = (rgb3 >> 24) & 0xff;

                int r3 = (rgb3 >> 16) & 0xff;

                int g3 = (rgb3 >> 8) & 0xff;

                int b3 = rgb3 & 0xff;

                a1 = a2 + (int) ((a1 + a3) * radius);

                r1 = r2 + (int) ((r1 + r3) * radius);

                g1 = g2 + (int) ((g1 + g3) * radius);

                b1 = b2 + (int) ((b1 + b3) * radius);

                a1 *= f;

                r1 *= f;

                g1 *= f;

                b1 *= f;

                out[outIndex] = (a1 << 24) | (r1 << 16) | (g1 << 8) | b1;

                outIndex += height;

            }

            out[outIndex] = in[width - 1];

            inIndex += width;

        }

    }

    public static int clamp(int x, int a, int b) {

        return (x < a) ? a : (x > b) ? b : x;

    }
}

高斯使用方法如下：
layout.xml

<com.seekbaromdocated.PullScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hengxian"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

            <ImageView
                android:id="@+id/pull_img"
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:layout_marginTop="-50dp"
                android:scaleType="fitXY"
                android:src="@mipmap/connect_ap_manually" />

            <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/profile_image"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_centerInParent="true"
                android:layout_marginTop="98dp"
                android:src="@mipmap/connect_ap_manually"
                app:civ_border_color="@color/white"
                app:civ_border_width="2dp" />

            <ImageButton
                android:id="@+id/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="16.7dp"
                android:layout_marginStart="16.7dp"
                android:layout_marginTop="25dp"
                android:background="#00000000"
                 />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignBottom="@+id/profile_image"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_gravity="center"
                android:layout_marginTop="13.3dp"
                android:textColor="#ff333333"
                android:text="昵称：哈哈哈" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="#ff333333"
                android:text="123456789" />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="15dp"
                android:textColor="#ff333333"
                android:orientation="horizontal">
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/id_tab_shape"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/id_tab_shape_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="#00000000"
                        android:clickable="false"
                        android:scaleType="fitXY"
                        />

                    <TextView
                        android:id="@+id/id_tab_shape_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="3dip"
                        android:text="开发..."
                        />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/id_tab_log"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/id_tab_log_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="#00000000"
                        android:clickable="false"
                        android:scaleType="fitXY"
                       />

                    <TextView
                        android:id="@+id/id_tab_log_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="3dip"
                        android:text="学习..."
                      />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="6.7dp"
            android:background="@color/white"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/tRUpdates"
                android:layout_width="fill_parent"
                android:layout_height="52dp"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:drawablePadding="10.0dip"
                    android:gravity="center_vertical"
                    android:includeFontPadding="false"
                    android:paddingLeft="16.7dip"
                    android:text="检查更新"
                    android:textColor="#ff333333"
                    android:textSize="13sp" />

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="1px"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="13dp"
                    android:layout_marginRight="13dp"
                    android:background="@color/hengxian"></RelativeLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/tRFeedback"
                android:layout_width="fill_parent"
                android:layout_height="52dp"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:drawablePadding="10.0dip"
                    android:gravity="center_vertical"
                    android:includeFontPadding="false"
                    android:paddingLeft="16.7dip"
                    android:text="意见反馈"
                    android:textColor="#ff333333"
                    android:textSize="13sp" />

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="1px"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="13dp"
                    android:layout_marginRight="33dp"
                    android:background="@color/hengxian"></RelativeLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/tROperation"
                android:layout_width="fill_parent"
                android:layout_height="52dp"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:drawablePadding="10.0dip"
                    android:gravity="center_vertical"
                    android:includeFontPadding="false"
                    android:paddingLeft="16.7dip"
                    android:text="操作说明"
                    android:textColor="#ff333333"
                    android:textSize="13sp" />

            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="6.7dp"
            android:background="@color/white"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/tRChange"
                android:layout_width="fill_parent"
                android:layout_height="52dp"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:drawablePadding="10.0dip"
                    android:gravity="center_vertical"
                    android:includeFontPadding="false"
                    android:paddingLeft="16.7dip"
                    android:text="修改密码"
                    android:textColor="#ff333333"
                    android:textSize="13sp" />

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="1px"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="13dp"
                    android:layout_marginRight="13dp"
                    android:background="@color/hengxian"></RelativeLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/tROutlogin"
                android:layout_width="fill_parent"
                android:layout_height="52dp"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:drawablePadding="10.0dip"
                    android:gravity="center_vertical"
                    android:includeFontPadding="false"
                    android:paddingLeft="16.7dip"
                    android:text="退出登录"
                    android:textColor="#ff333333"
                    android:textSize="13sp" />

            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</com.seekbaromdocated.PullScrollView>

Activity如下：

public class PersonalActivity extends Activity implements View.OnClickListener {
    ImageView pull_img;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_personal);
        pull_img = (ImageView) findViewById(R.id.pull_img);
        Resources res = getResources();
        Bitmap bmp = BitmapFactory.decodeResource(res, R.mipmap.connect_ap_manually);
       
        BitmapBlurUtil.addTask(bmp, new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                Drawable drawable = (Drawable) msg.obj;
                pull_img.setImageDrawable(drawable);
                
            }
        });
    }

    @Override
    public void onClick(View view) {

    }
}

使用起来还是比较简单的。
圆形图像的可以参考我的这篇文章http://www.jianshu.com/p/86e9a22a9c68

或者是使用 感谢。https://github.com/hdodenhof/CircleImageView

下载链接：http://pan.baidu.com/s/1kUAGjJp 密码：jwb9

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,046评论 25赞 707
  • 夜微凉，相思愁长寄无方
    遥远的安慰，寄不到身边，浮华的城市，只剩下喧嚣。寻不见的身影，在脑海中浮现！望不断的思念，落在心里化作缕缕哀愁，...
    意成君阅读 368评论 0赞 1
  • 我老了吗
    只有在这夜深了的时刻，我们才能更清醒的认清自己。 很多时候，常常感觉自己已然暮年，感觉一切都将枯槁，于...
    浅语陌阅读 288评论 0赞 0