仿QQ个人信息详情界面中背景图的下拉扩展放大功能

    一般一些项目中都少不了一些头部背景图，但是如果背景图静态的现实并不能呈现出与用户操作的交互感，所以要想办法让背景图动起来，qq的一些交互感我很喜欢，比如他的个人详情界面的背景图就是可以下拉扩展，并在扩展到一定程度中可以放大图片。其设计原理就是先隐藏头部和底部的一些视图，然后在下拉过程中慢慢把隐藏的部分显示出来，到完整显示后就可以放大图片，这样设计的好处就是：1、节省一些屏幕空间，不影响正常的操作内容显示。2、增加了趣味性，能更好的提升界面与用户的互动性。

   既然知道了原理就让我们自己来动手撸一个这样的控件出来吧。在此之前我也了解了一些别人实现的头部图片方法，一般是使用重写ScrollView实现的，但是其中的滑动冲突并没有解决，这自然满足不了对其他项目的兼容性，所以我实现的方法是重写NestedScrollView，使用原因是这个控件已经处理好了与子控件的滑动冲突。

  先上图：

   


  仔细看效果，这个背景图是先扩展然后再放大的。和qq的背景图的效果差不多。现在我们来分析一下怎么实现的

  第一步就是怎么一开始把图片的顶部和底部隐藏

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取头部视图的原始宽高
if (viewWidth <= 0 || viewHeight <=0) {
viewWidth = headView.getMeasuredWidth();
viewHeight = headView.getMeasuredHeight();
}
//绘制视图时隐藏头部View的顶部和底部
if (hideHeight==0){
hideHeight=viewHeight/hideRatio;
ViewGroup.LayoutParams layoutParams = headView.getLayoutParams();
((MarginLayoutParams) layoutParams).setMargins(0, -hideHeight, 0,-hideHeight);
headView.setLayoutParams(layoutParams);
}
}

  这里我采取的方式是通过在绘制时调整其顶部与底部的边距实现的。就这几行代码，就简单的实现了头部图片部分的隐藏

  但是在此之前还要注意一下头部View的获取:

@Override
protected void onFinishInflate() {
super.onFinishInflate();
//        不可过度滚动，否则上移后下拉会出现部分空白的情况
setOverScrollMode(OVER_SCROLL_NEVER);
//        获得默认第一个view
if (getChildAt(0) != null && getChildAt(0) instanceof ViewGroup && headView == null) {
ViewGroup mViewGroup = (ViewGroup) getChildAt(0);
if (mViewGroup.getChildCount() > 0) {
headView = mViewGroup.getChildAt(0);
}
}
}

  实现的方法很简单，就是获取其内容中的第一个子视图，因为滑动视图的特性，其最近的子视图是ViewGroup，所以则获取这个ViewGroup的第一个子View

  隐藏部分实现后接下来就是实现其下拉操作的部分：

@Override
public boolean onTouchEvent(MotionEvent ev) {
if (viewWidth <= 0 || viewHeight <=0) {
viewWidth = headView.getMeasuredWidth();
viewHeight = headView.getMeasuredHeight();
}
if (headView == null || viewWidth <= 0 || viewHeight <= 0) {
return super.onTouchEvent(ev);
}
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
if (!isUnfolding) {
if (getScrollY() == 0) {
pullY = ev.getY();//滑动到顶部时，记录位置
} else {
break;
}
}
int distance = (int) ((ev.getY() - pullY)*zoomRatio);
if (distance < 0) break;//若往下滑动
isUnfolding = true;
if (hideHeight>distance){
unfoldImage(distance);
unfoldHeight=distance;
return true;
}
setZoom(distance-hideHeight);

return true;
case MotionEvent.ACTION_UP:
isUnfolding = false;
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
if (!isUnfolding){
replyView();
}
}
}, 100);

break;
}
return super.onTouchEvent(ev);
}

  如果其子视图没有初始化宽高则初始化宽高，获取头部视图失败则过滤其滑动事件，只需要重写滑动事件即可，当滑动到顶部的时候记录下滑动的第一个位置，否则继续执行其滑动事件，当到达顶部并往上滑的时候传递滑动事件，正常使用滑动视图的功能，当到达顶部并下拉的时候开始进行扩展放大。首先是进行扩展，当图片完全展示出来后进行放大处理。当手指放开便进行视图返回操作，这里我加了个延时，目的是操作时更自然点。这个主要是介绍一下处理的逻辑，接下来分析一下扩展、放大、回弹的实现内容

  

/**
* 扩展头部视图
* @param distance 顶部和底部扩展的距离
*/
private void unfoldImage(float distance) {
ViewGroup.LayoutParams layoutParams = headView.getLayoutParams();
//下拉时保持居中,设置顶部和底部的边距让隐藏的部分视图显示出来，达到扩展目的
((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width
- viewWidth) / 2>0?0:-(layoutParams.width - viewWidth) / 2,
(int)(distance-hideHeight), 0,(int)(distance-hideHeight));
headView.setLayoutParams(layoutParams);
}

  扩展头部视图的实现就是根据下拉的距离来改变顶部和底部的边距，达到隐藏部分慢慢扩展显示的效果

/**
* 放大头部View
* @param distance  放大的距离
*/
private void setZoom(float distance) {
float scaleTimes = (float) ((viewWidth+distance)/(viewWidth*1.0));
//        如超过最大放大倍数，直接返回
if (scaleTimes > maxZoomRatio) return;

ViewGroup.LayoutParams layoutParams = headView.getLayoutParams();
layoutParams.width = (int) (viewWidth + distance);
layoutParams.height = (int)(viewHeight*((viewWidth+distance)/viewWidth));
//        设置控件水平居中
((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - viewWidth) / 2, 0, 0, 0);
headView.setLayoutParams(layoutParams);
isZoom=true;
}

  放大的效果即调整头部视图的宽度和高度来实现的，在放大的同时要注意保持头部空间的居中特性。因为在拉伸图片放大时高度会完全显示，但是宽度会超过屏幕，要是不居中，放大的焦点就会处于左上角，居中后放大的焦点将处于控件中心。

/**
* 头部视图还原
*/
private void replyView() {
/**
* 如果头部视图被放大，添加动画还原放大的头部视图
*/
if (isZoom){
final float distance = headView.getMeasuredWidth() - viewWidth;
// 设置动画
ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * replyTimeRatio));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
setZoom((Float) animation.getAnimatedValue());
}
});
anim.start();
}
/**
* 将扩展出来的头部视图还原
*/
ValueAnimator unfold = ObjectAnimator.ofFloat(unfoldHeight, 0.0F).setDuration((long) (unfoldHeight));
unfold.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
unfoldImage((Float) animation.getAnimatedValue());
}
});
unfold.start();
unfoldHeight=0;
}

  头部视图的回弹实现就是通过给头部控件添加一个动画实现的，内容比较简单，但是需要注意当图片只是扩展时不需要给视图添加放大回弹效果

  这样主要的内容就分析完成，实现起来还是比较简单的，有兴趣可以看下源码

  GitHub地址

  参考博客地址:http://blog.csdn.net/anyfive/article/details/52575262