前言：
前幾天一個小夥伴拿著他的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.