ScrollView实现图片拉伸效果，仿QQ好友动态头部效果

一.功能介绍

自定义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));
}
}
});

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

/**
* 滑动监听,标题改动
*/
private void intseco() {

//获取dimen属性中 标题和头部图片的高度
final float title_height = getResources().getDimension(R.dimen.title
bace
_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));
TitleAlphaChange(dy,move_distance);
} else if (!isUp && dy > move_distance) {
// 手指往上滑,距离超过头部高度
iv_back.setImageResource(R.mipmap.back_black);

} 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) {
//返回顶部，但距离头部位置小于头部高度
iv_back.setImageResource(R.mipmap.back_white);
biaoti.setBackgroundColor(Color.argb((int) 0, 0, 0, 0));
TitleAlphaChange(dy,move_distance);
}
}
});
}
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);
biaoti.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
}

效果演示

demo下载地址:https://download.csdn.net/download/shanshan_1117/10288895
点击打开链接