仿安居客详情页动画效果

首先看下安居客房产详情页的效果：

1.gif

效果解析：
1、点击banner或者在banner上垂直滑动，banner布局滚动到屏幕中间，再次点击，可以回到最初的状态；
2、图片可以缩放。

安居客使用的是自定义scrollView，而我之前做过的产品，是顶部banner，下面是一些介绍，然后最底部是一个产品的列表，需要使用listView来做，因此这篇文章使用自定义ListView来做，原理大致都一样。

关键点：
1、动画执行过程中，通过回调，实时的对图片进行缩放以及位移的处理

public static void matrix(int screenWidth, ImageView imageView, LayoutParams layoutParams) {   
int intrinsicWidth = imageView.getDrawable().getIntrinsicWidth();   
float f = screenWidth * 1.0f / intrinsicWidth;   
matrix.reset();   
float g = 0;   
matrix.setScale(f, f);   
g = layoutParams.height - f * imageView.getDrawable().getIntrinsicHeight();   matrix.postTranslate(0.0F, g / 2.0F);   
imageView.setImageMatrix(matrix);}

2、自定义listView，当在banner上垂直滑动的时候，需要禁止listView的滚动；

public boolean judgeTouch(MotionEvent e)
{   
boolean bool = true;  
float f = e.getY();   
mBottomView.getLocationOnScreen(location);   
if ((f < location[1] - titleHeight) && (f > 0.0F)) {      
  bool = false;   
}   
return bool;
}

然后再自定义的ListView中重写onInterceptTouchEvent方法：

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) 
{   
boolean b = true;  
if (touchListener != null) {      
    b = touchListener.onTouch(ev);   
}   
if (b) {      
    return super.onInterceptTouchEvent(ev);   
}   
return b;}

其余的部分看代码也不难理解，有兴趣可以下载看看效果，demo比较简陋，见谅！
demo地址：https://github.com/dhhuanghui/ScaleAbleDemo

仿安居客详情页动画效果

推荐阅读更多精彩内容