Home

fangxiaogang

我可以！

Home About Github Email
‹
›

2017-06-26
仿淘宝商品详情页

把玩淘宝客户端时，觉得淘宝详情页效果还不错，上拉标题栏渐变。就想着模仿做一个，于是有了这篇文章。
来，先看东西

q

上代码 自定义的 ScrollView
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
public class ObservableScrollView extends ScrollView {
	public interface ScrollViewListener {
		void onScrollChanged(ObservableScrollView scrollView, int x, int y,
                             int oldx, int oldy);
	}
	private ScrollViewListener scrollViewListener = null;
	public ObservableScrollView(Context context) {
		super(context);
	}
	public ObservableScrollView(Context context, AttributeSet attrs,
                                int defStyle) {
		super(context, attrs, defStyle);
	}
	public ObservableScrollView(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);
		}
	}
}
activity 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@Override
   public 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) {
           //设置渐变的头部的背景颜色
           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图的高度时，设置背景和字体颜色颜色透明度渐变
           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) {
               // 手指向上滑动，屏幕内容下滑
               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) {
               // 手指向下滑动，屏幕内容上滑
               backIv.setImageResource(R.mipmap.ic_back);
               shopCartIv.setImageResource(R.mipmap.ic_shopping_cart);
               moreIv.setImageResource(R.mipmap.ic_more);
           }
       } else {
           //滑动到banner下面设置普通颜色
           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);
       }
   }
完整代码已经上至 Github

fangxiaogang

scribble

Home About Github Email