自定义ScrollView 实现图片放大,上滑修改标题栏状态

一.功能介绍

自定义ScrollView实现图片拉伸效果,下拉放大头部图片,监听滑动,改变标题头部是个图片,下面是个WebView,滑动改变标题状态;

二.代码介绍

1.自定义ScrollView ,重写onTouchEvent()方法,监听触摸下拉 上滑位置,实现图片放大以及回弹;

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (zoomViewWidth <= 0 || zoomViewHeight <=0) {
            zoomViewWidth = zoomView.getMeasuredWidth();
            zoomViewHeight = zoomView.getMeasuredHeight();
        }
        if (zoomView == null || zoomViewWidth <= 0 || zoomViewHeight <= 0) {
            return super.onTouchEvent(ev);
        }
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
                if (!mScaling) {
                    if (getScrollY() == 0) {
                        y = ev.getY();//滑动到顶部时，记录位置
                    } else {
                        break;
                    }
                }
                int distance = (int) ((ev.getY() - y)*mScaleRatio);
                if (distance < 0) break;//若往下滑动
                mScaling = true;
                setZoom(distance);
                return true;
            case MotionEvent.ACTION_UP:
                mScaling = false;
                replyView();
                break;
        }
        return super.onTouchEvent(ev);
    }

2.重写oonScrollChanged()方法,监听滑动

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (onScrollListener != null) {

            if (oldt < y ) {
                // 手指向上滑动，屏幕内容下滑
                onScrollListener.onScroll(oldt,t,false);

            } else if (oldt > y ) {
                // 手指向下滑动，屏幕内容上滑
                onScrollListener.onScroll(oldt,t,true);
            }

        }
    }

3.滑动监听,改变标题状态

//获取dimen属性中 标题和头部图片的高度
        final float title_height = getResources().getDimension(R.dimen.title_height);
        final float head_height = getResources().getDimension(R.dimen.head_height);

        //滑动事件回调监听（一次滑动的过程一般会连续触发多次）
        head_zoomscrollview.setOnScrollListener(new HeadZoomScrollView.OnScrollListener() {
            @Override
            public void onScroll(int oldy, int dy, boolean isUp) {
                float move_distance = head_height - title_height;
                if (!isUp && dy <= move_distance) {
                    //手指往上滑,距离未超过头部高度
                    iv_back.setImageResource(R.mipmap.back_white);
                    biaoti.setBackgroundColor(Color.argb((int) 0, 0, 0, 0));
                } else if (!isUp && dy > move_distance) {
                    // 手指往上滑,距离超过头部高度
                    iv_back.setImageResource(R.mipmap.back_black);
                    biaoti.setBackgroundColor(Color.argb((int) 255, 255, 255, 255));

                } else if (isUp && dy > move_distance) {
                    //返回顶部，但距离头部位置大于头部高度

                } else if (isUp && dy <= move_distance) {
                    //返回顶部，但距离头部位置小于头部高度
                    iv_back.setImageResource(R.mipmap.back_white);
                    biaoti.setBackgroundColor(Color.argb((int) 0, 0, 0, 0));
                }
            }
        });

效果演示

demo下载地址:

http://download.csdn.net/download/shanshan_1117/10206296

点击打开链接

补充:

滑动监听,改变标题栏渐变透明

  //滑动事件回调监听（一次滑动的过程一般会连续触发多次）
        head_zoomscrollview.setOnScrollListener(new HeadZoomScrollView.OnScrollListener() {
            @Override
            public void onScroll(int oldy, int dy, boolean isUp) {
                float move_distance = head_height - title_height;
                if (!isUp && dy <= move_distance) {
                    //手指往上滑,距离未超过头部高度
                    TitleAlphaChange(dy, move_distance);//标题栏渐变
                    HeaderTranslate(dy);//图片视差平移
                } else if (!isUp && dy > move_distance) {
                    // 手指往上滑,距离超过头部高度
                    TitleAlphaChange(1, 1);//设置不透明百分比为100%，防止因滑动速度过快，导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。
                    HeaderTranslate(head_height);//这里也设置平移，是因为不设置的话，如果滑动速度过快，会导致图片没有完全隐藏。
                    iv_back.setImageResource(R.mipmap.back_black);

                } else if (isUp && dy > move_distance) {
                    //返回顶部，但距离头部位置大于头部高度

                } else if (isUp && dy <= move_distance) {
                    //返回顶部，但距离头部位置小于头部高度
                    //标题栏逐渐从不透明变成透明
                    TitleAlphaChange(dy, move_distance);//标题栏渐变
                    HeaderTranslate(dy);//图片视差平移
                    iv_back.setImageResource(R.mipmap.back_white);
                }
            }
        });

  private void HeaderTranslate(float distance) {
        lvHeader.setTranslationY(-distance);
        ivHeader.setTranslationY(distance/2);
    }

    private void TitleAlphaChange(int dy, float mHeaderHeight_px) {//设置标题栏透明度变化
        float percent = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);
        //如果是设置背景透明度，则传入的参数是int类型，取值范围0-255
        //如果是设置控件透明度，传入的参数是float类型，取值范围0.0-1.0
        //这里我们是设置背景透明度就好，因为设置控件透明度的话，返回ICON等也会变成透明的。
        //alpha 值越小越透明
        int alpha = (int) (percent * 255);
        toolbar.getBackground().setAlpha(alpha);//设置控件背景的透明度，传入int类型的参数（范围0~255）

        ivBack.getBackground().setAlpha(255 - alpha);
        ivMore.getBackground().setAlpha(255 - alpha);
        ivShoppingCart.getBackground().setAlpha(255 - alpha);
    }