ScrollView使用技巧之实现滑动遮盖ImageView(View)

前言：

前几天一个小伙伴拿着他的iphone6 plus给我展示了一个效果，因效果为iOS上，我没有效果原图，就贴上实现之后的效果图。



分析：

可以从动图中看到，顶部的ImageView在ScrollView滑动的时候被遮盖或重现，一开始我以为这种效果实现起来会很复杂，分析许久无果，突然想到ScrollView滑动的过程,其实是在不断修改坐标值(也就是坐标系Y值)，那么实现这个效果imageView的Y值必须也要改变了。从图中可以看出imageView和ScrollView的Y值都在改变，并且可以看出ImageView的Y值改变的速率要比ScrollView的慢、ImageView是随着ScrollView变动而变动的，所以ImageView要以ScrollView为参照物。因此实现步骤：

通过onScrollChanged(int l, int t, int oldl, int oldt)获得ScrollView变动的Y值

通过View.setTranslationY()方法改变ImageView的Y值

实现：

一、通过onScrollChanged(int l, int t, int oldl, int oldt)获得ScrollView变动的Y值

要想通过onScrollChanged(int l, int t, int oldl, int oldt)获得ScrollView变动的Y值并且暴露出来（传递出来），那我们得自己定义一个ScrollView了，下面是自定义的ScrollVIew，取名CoverScrollView。

1、自定义CoverScrollView：

public class CoverScrollView extends ScrollView {

public CoverScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public CoverScrollView(Context context) {
super(context);
}

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

private ScrollViewListener scrollViewListener;

public void setonScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}

public interface ScrollViewListener {

void onScrollChanged(CoverScrollView scrollView, int x, int y, int oldx,
int oldy);

}

}

是不是很简单，通过接口把onScrollChanged()方法得到的参数暴露出去，至于为什么通过onScrollChanged()得到这些参数，有兴趣的同学可以深入跟踪了解ScrollView和View相关源码。

2、相关xml文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@null" >

<ImageView
android:id="@+id/img_head"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/head"
android:contentDescription="@null" />

<com.skycracks.coverscrollview.CoverScrollView
android:id="@+id/cover_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:orientation="vertical" >

<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@android:color/transparent"                             />

<--! ScrollView中的填充内容，效果图中填充区域就是View设置固定高度和颜色-->
</LinearLayout>
</com.skycracks.coverscrollview.CoverScrollView>

</RelativeLayout>

</RelativeLayout>

在xml布局中我们要注意ImageView的高度设置为300dp，那么为什么ScrollView中为什么还有一个View高度也是300dp并且背景色设置的透明呢？没错，关键就在这里了。效果图中ImageView看上去是在ScrollView中，但是我们把ImageView真正的放入ScrollView是达不到效果图不同的滑动速率的(速率不同时，ImageView和ScrollView之间会出现白色空白区域)，因此我们要造成一种假象ImageView在ScrollView中。我们知道RelativeLayout不设置相对关系(如toleft、toright、above、below)的效果和Framement布局的效果类似(你可以把RelativeLayout换成Framement试试)，这个时候就相当于把ScrollView”贴在”ImageView上，为了将ImageView与ScrollView中的内容区分开来，通过设置一个高度与ImageView高度相同并且背景透明View来达到ScrolView设置android:layout_below=”@+id/img_head”的视觉效果。

二、通过View.setTranslationY()方法改变ImageView的Y值

我们在Activity中通过监听ScrollViewListener获取到ScrollView变动的Y值，从而给ImageView调用setTranslationY(）改变Y值。

public class MainActivity extends Activity {

private ImageView headImageView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
headImageView = (ImageView) findViewById(R.id.img_head);
CoverScrollView mCoverScrollView =  (CoverScrollView) findViewById(R.id.cover_scrollview);
mCoverScrollView.setonScrollViewListener(new ScrollViewListener() {

@Override
public void onScrollChanged(CoverScrollView scrollView, int x, int y,
int oldx, int oldy) {
//坐标系往上为负值
headImageView.setTranslationY(-y/2);
}
});
}

}

在调用setTranslationY的时候，值在上面代码设置为ScrollView滑动速率的一半，当然你也可以随便改变，但是不要造成视觉效果混乱或背离要实现的效果。

总结：

看完文章，你会发现实现这个功能不算难，甚至可以说非常容易，简简单单几十行代码加上对xml的布局的熟练就能实现。由此当我们看到一个效果、可能会很炫酷，不要一开始就觉得实现很难，静下心分析，其实没有你想象中的那么难。

Don’t act, you will never succeed.