github地址（完整Demo，歡迎下載）

https://github.com/zhouxu88/ScrollViewTextGradual

最近項目需要，電商項目，需要仿淘寶商品詳情頁的標(biāo)題欄漸變的效果。

效果圖：

淘寶.gif

實現(xiàn)

分析：標(biāo)題欄漸變，文字漸變隱藏 透明通知欄，這是通過ScrollView來做的，我們只需要在ScrollView的滑動監(jiān)聽事件中根據(jù)滑動的距離，手指向上還是向下滑動來做相應(yīng)的透明和顯示操作就可以完成這種效果了。

1、ScrollView滑動監(jiān)聽：

Google并沒有給我們提供ScrollView的滑動距離、是否滑動到布局底部、頂部的方法，但是提供了一個onScrollChanged方法：

@Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
       
        }
    }

參數(shù)說明

• x ：當(dāng)前橫向滑動距離
• y： 當(dāng)前縱向滑動距離
• oldx： 之前橫向滑動距離
• oldy ：之前縱向滑動距離

但是很遺憾這個方法我們不可以調(diào)用，所以我們不得不重寫ScrollView暴露該方法：

/**
 * 帶滾動監(jiān)聽的scrollview
 *
 */
public class GradationScrollView extends ScrollView {

    public interface ScrollViewListener {

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

    }

    private ScrollViewListener scrollViewListener = null;

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

    public GradationScrollView(Context context, AttributeSet attrs,
                               int defStyle) {
        super(context, attrs, defStyle);
    }

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

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

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

}

然后我們需要獲取圖片的高度，并且設(shè)置滾動監(jiān)聽，隨著滾動的距離來設(shè)置標(biāo)題欄的顏色透明度和字體顏色的透明度

private void initListener() {
        // 獲取頂部圖片高度后，設(shè)置滾動監(jiān)聽
        ViewTreeObserver treeObserver = headerIv.getViewTreeObserver();
        treeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                headerIv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                imageHeight = headerIv.getHeight();
                Log.i(TAG, "imageHeight:-------->" + imageHeight);
                scrollView.setScrollViewListener(MainActivity.this);

            }
        });
    }

ScrollView的滑動監(jiān)聽
分析：y <= 0，還沒有滑動或者手指先向上滑動一會兒滑又向下滑動值到頂部不能再滑動位置，y > 0 && y <= imageHeight，表示滑動的距離在這個頭部的banner圖的高度范圍之內(nèi)，也就是說距離是小于banner圖的高度，這種情況又分為2種，手指向上滑和向下滑，當(dāng)手指向上滑動，屏幕內(nèi)容下滑時，3張圖片是從透明漸變變成不透明，當(dāng)手指向下滑動，屏幕內(nèi)容上滑，3張圖片是不透明漸變成透明

@Override
    public void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy) {
        Log.i(TAG, "y:-------->" + y);
        Log.i(TAG, "oldy:-------->" + oldy);
        if (y <= 0) {
            //設(shè)置漸變的頭部的背景顏色
            Log.i(TAG, "y <= 0:----------->");
            headLayout.setBackgroundColor(Color.argb((int) 0, 255, 255, 255));
            tv1.setTextColor(Color.TRANSPARENT);
            tv2.setTextColor(Color.TRANSPARENT);
            tv3.setTextColor(Color.TRANSPARENT);
            tv4.setTextColor(Color.TRANSPARENT);
            dividerView.setVisibility(View.GONE);
        } else if (y > 0 && y <= imageHeight) {
            //滑動距離小于banner圖的高度時，設(shè)置背景和字體顏色顏色透明度漸變
            Log.i(TAG, "滑動距離小于banner圖的高度---->" + imageHeight);
            float scale = (float) y / imageHeight;
            int alpha = (int) (scale * 255);
            headLayout.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
            tv1.setTextColor(Color.argb(alpha, 1, 24, 28));
            tv2.setTextColor(Color.argb(alpha, 1, 24, 28));
            tv3.setTextColor(Color.argb(alpha, 1, 24, 28));
            tv4.setTextColor(Color.argb(alpha, 1, 24, 28));
            backIv.getBackground().setAlpha(255 - alpha);
            shopCartIv.getBackground().setAlpha(255 - alpha);
            moreIv.getBackground().setAlpha(255 - alpha);
            if (oldy < y) {
                // 手指向上滑動，屏幕內(nèi)容下滑
                backIv.setImageResource(R.mipmap.ic_back_dark);
                shopCartIv.setImageResource(R.mipmap.ic_shopping_dark);
                moreIv.setImageResource(R.mipmap.ic_more_dark);
            } else if (oldy > y) {
                // 手指向下滑動，屏幕內(nèi)容上滑
                backIv.setImageResource(R.mipmap.ic_back);
                shopCartIv.setImageResource(R.mipmap.ic_shopping_cart);
                moreIv.setImageResource(R.mipmap.ic_more);
            }
        } else {
            //滑動到banner下面設(shè)置普通顏色
            Log.i(TAG, "滑動到banner下面---->" + imageHeight);
            headLayout.setBackgroundColor(Color.WHITE);
            tv1.setTextColor(Color.BLACK);
            tv2.setTextColor(Color.BLACK);
            tv3.setTextColor(Color.BLACK);
            tv4.setTextColor(Color.BLACK);
            dividerView.setVisibility(View.VISIBLE);
        }
    }