Android仿淘寶商品詳情的標(biāo)題欄漸變
最近電商項目需要實現(xiàn)類似淘寶商品詳情頁的標(biāo)題欄漸變的效果，我們先來看看淘寶的效果圖。
淘寶效果圖：
實現(xiàn)最終效果圖：
實現(xiàn)過程：
分析：從淘寶效果圖我們可以看到標(biāo)題欄漸變效果，文字漸變隱藏，透明通知欄，這些毫無疑問是通過ScrollView來實現(xiàn)的，我們需要根據(jù)滑動的距離，手指向上還是向下滑動來做相應(yīng)的透明和顯示操作就可以完成這種效果了。
1、ScrollView滑動監(jiān)聽：
然而Google并沒有提供ScrollView的滑動距離、是否滑動到布局底部、頂部的方法，但提供了onScrollChanged方法：
@Overrideprotected 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暴露該方法，我們來看看實現(xiàn)過程：
/*** 帶滾動監(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;}@Overrideprotected 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() {@Overridepublic void onGlobalLayout() {headerIv.getViewTreeObserver().removeOnGlobalLayoutListener(this);imageHeight = headerIv.getHeight();Log.i(TAG, "imageHeight:-------->" + imageHeight);scrollView.setScrollViewListener(MainActivity.this);}});}
2、設(shè)置ScrollView的滑動監(jiān)聽
分析：
1、當(dāng)y <= 0時，這個時候還沒有滑動或者手指先向上滑動一會兒滑又向下滑動值到頂部不能再滑動位置。
2、當(dāng)y > 0 && y <= imageHeight時，這個時候表示滑動的距離在這個頭部的banner圖的高度范圍之內(nèi)滑動，也就是說距離是小于banner圖的高度，這種情況又分為2種，手指向上滑和向下滑，當(dāng)手指向上滑動，屏幕內(nèi)容下滑時，3張圖片是從透明漸變變成不透明，當(dāng)手指向下滑動，屏幕內(nèi)容上滑，3張圖片是不透明漸變成透明，具體實現(xiàn)過程如下：
@Overridepublic void onScrollChanged(ObservableScrollView 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);//設(shè)置透明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);}}
到這里就實現(xiàn)啦。
需要源碼的童鞋【龍旋】公眾號對話框回復(fù)關(guān)鍵字：淘寶漸變?，即可獲取下載鏈接地址。