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);
}
}
