Toolbar随着ScrollView滑动透明度渐变效果实现

一.思路：监听ScrollView的滑动事件 不断的修改Toolbar的透明度

二.注意

1.ScrollView 6.0以前没有scrollView.setOnScrollChangeListener(l)方法  所以要自定义ScrollView 在onScrollChanged()中监听
2.ScrollView 6.0（23）以前没有scrollView.setOnScrollChangeListener()方法  所以要自定义ScrollView 实现.为了Toolbar不遮盖ScrollView我们给ScrollView设置paddingTop
   但是ScrollView 设置paddintTop以后 Toolbar透明度变为0以后还占据空间 会出现空白,解决方法:

 为ScrollView设置两个属性：
 1〉.

[java]  view plain  copy

1. android:clipToPadding="false"    

表示控件的绘制范围是否不在padding里面  false就是表示空间的绘制可以绘制到padding中
 2〉

[java]  view plain  copy

1. android:clipChildren="false"  

表示子控件是否不能超出padding区域（比如： false ：ScrollView上滑的时候 child 可以滑出padding区域 ;true：ScrollView上滑的时候 child 不能可以滑出padding区域 ）

布局文件如下：

[java]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.   
7.     <com.dice.md.toolbar.transperent.TranslucentScrollView  
8.         android:id="@+id/scrollview"  
9.         android:clipToPadding="false"  
10.         android:clipChildren="true"  
11.         android:paddingTop="?attr/actionBarSize"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="match_parent" >  
14.           
15.         <LinearLayout  
16.             android:orientation="vertical"  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="wrap_content">  
19.             <TextView   
20.                 android:layout_width="fill_parent"  
21.                 android:layout_height="400dp"  
22.                 android:background="@android:color/holo_blue_dark"  
23.                 />  
24.             <TextView   
25.                 android:layout_width="fill_parent"  
26.                 android:layout_height="400dp"  
27.                 android:background="@android:color/holo_green_light"  
28.                 />  
29.             <TextView   
30.                 android:layout_width="fill_parent"  
31.                 android:layout_height="400dp"  
32.                 android:background="@android:color/holo_orange_light"  
33.                 />  
34.             <TextView   
35.                 android:layout_width="fill_parent"  
36.                 android:layout_height="400dp"  
37.                 android:background="@android:color/holo_blue_dark"  
38.                 />  
39.             <TextView   
40.                 android:layout_width="fill_parent"  
41.                 android:layout_height="400dp"  
42.                 android:background="@android:color/holo_green_light"  
43.                 />  
44.             <TextView   
45.                 android:layout_width="fill_parent"  
46.                 android:layout_height="400dp"  
47.                 android:background="@android:color/holo_orange_light"  
48.                 />  
49.             <TextView   
50.                 android:layout_width="fill_parent"  
51.                 android:layout_height="400dp"  
52.                 android:background="@android:color/holo_blue_dark"  
53.                 />  
54.             <TextView   
55.                 android:layout_width="fill_parent"  
56.                 android:layout_height="400dp"  
57.                 android:background="@android:color/holo_green_light"  
58.                 />  
59.             <TextView   
60.                 android:layout_width="fill_parent"  
61.                 android:layout_height="400dp"  
62.                 android:background="@android:color/holo_orange_light"  
63.                 />  
64.             <TextView   
65.                 android:layout_width="fill_parent"  
66.                 android:layout_height="400dp"  
67.                 android:background="@android:color/holo_blue_dark"  
68.                 />  
69.             <TextView   
70.                 android:layout_width="fill_parent"  
71.                 android:layout_height="400dp"  
72.                 android:background="@android:color/holo_green_light"  
73.                 />  
74.             <TextView   
75.                 android:layout_width="fill_parent"  
76.                 android:layout_height="400dp"  
77.                 android:background="@android:color/holo_orange_light"  
78.                 />  
79.         </LinearLayout>  
80.           
81.     </com.dice.md.toolbar.transperent.TranslucentScrollView>  
82.     <android.support.v7.widget.Toolbar  
83.         android:id="@+id/toolbar"  
84.         android:layout_width="match_parent"  
85.         android:background="?attr/colorPrimary"  
86.         android:layout_height="?attr/actionBarSize" >  
87.     </android.support.v7.widget.Toolbar>  
88. </RelativeLayout>  

三.步骤

1. 创建回调接口：

[java]  view plain  copy

1. public interface TranslucentListener {  
2.   
3.   
4. /** 
5.  * 透明度的回调 
6.  * @param alpha 
7.  */  
8. public void  onTranslucent(float alpha);  
9. }  

2.自定义ScrollView 在onScrollChange方法中回调TranslucentListener接口的方法 并且回传alpha的值：

[java]  view plain  copy

1. @Override  
2. protected void onScrollChanged(int l, int t, int oldl, int oldt) {  
3.     super.onScrollChanged(l, t, oldl, oldt);  
4.     if (translucentListener!=null) {  
5.         //translucentListener.onTranslucent(alpha);  
6.     }  
7. }  

3.alpha的值得计算：

[java]  view plain  copy

1. // alpha = 滑出去的高度/(screenHeight/3);  
2. float heightPixels = getContext().getResources().getDisplayMetrics().heightPixels;  
3. float scrollY = getScrollY();//该值 大于0  
4. float alpha = 1-scrollY/(heightPixels/3);// 0~1  透明度是1~0  
5. //这里选择的screenHeight的1/3 是alpha改变的速率 （根据你的需要你可以自己定义）  

最后MainActivity中

[java]  view plain  copy

1. @Override  
2. public void onTranslucent(float alpha) {  
3.     toolbar.setAlpha(alpha);  
4. }