【android】仿知乎ScrollView滚动改变标题栏透明度

刷知乎的时候看到，专题栏里面 往下滚动标题栏会由透明逐渐变蓝色，觉得这个效果不错，就想自己写一下

这是自己实现的效果图：

说下实现思路：

1、先获取顶部图片的高度height，这个有3种方式获取，我用的是监听onGlobalLayout方法的回调

2、监听scrollview的滚动坐标，原生的没有这个监听，需要我们自己写个view继承scrollview，然后重写onScrollChanged()方法，创建一个监听，在这个方法里面回调

3、根据图片高度height和滚动的纵坐标y进行判断，算出比例，透明度范围0~255，根据比例设置改变的透明度，当y>height是不做改变

实现代码：

[java]  view plain  copy

 

1. import com.example.d_changealphabyscroll.widget.ObservableScrollView;  
2. import com.example.d_changealphabyscroll.widget.ObservableScrollView.ScrollViewListener;  
3.   
4. import android.app.Activity;  
5. import android.graphics.Color;  
6. import android.os.Bundle;  
7. import android.util.Log;  
8. import android.view.Menu;  
9. import android.view.MenuItem;  
10. import android.view.View;  
11. import android.view.ViewTreeObserver;  
12. import android.view.ViewTreeObserver.OnGlobalLayoutListener;  
13. import android.webkit.WebSettings;  
14. import android.webkit.WebView;  
15. import android.webkit.WebViewClient;  
16. import android.widget.ImageView;  
17. import android.widget.ScrollView;  
18.   
19. public class MainActivity extends Activity implements ScrollViewListener{  
20.       
21.     private View layoutHead;  
22.     private ObservableScrollView scrollView;  
23.     private ImageView imageView;  
24.     private WebView webView;  
25.   
26.     private int height ;  
27.       
28.     @Override  
29.     protected void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.         setContentView(R.layout.activity_main);  
32.           
33.         initView();  
34.     }  
35.       
36.       
37.     private void initView() {  
38.         webView = (WebView) findViewById(R.id.webview1);  
39.         scrollView = (ObservableScrollView) findViewById(R.id.scrollview);  
40.         layoutHead = findViewById(R.id.view_head);  
41.         imageView = (ImageView) findViewById(R.id.imageView1);  
42.         layoutHead.setBackgroundColor(Color.argb(0, 0xfd, 0x91, 0x5b));  
43.           
44.         //初始化webview  
45.         //启用支持javascript  
46.         WebSettings settings = webView.getSettings();  
47.         settings.setJavaScriptEnabled(true);  
48.         webView.loadUrl("http://www.topit.me/");  
49.         //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开  
50.         webView.setWebViewClient(new WebViewClient(){  
51.            @Override  
52.         public boolean shouldOverrideUrlLoading(WebView view, String url) {  
53.                //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器  
54.              view.loadUrl(url);  
55.             return true;  
56.         }  
57.        });  
58.   
59.           
60.         //获取顶部图片高度后，设置滚动监听  
61.         ViewTreeObserver vto = imageView.getViewTreeObserver();    
62.         vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {  
63.             @Override    
64.             public void onGlobalLayout() {  
65.                 imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
66.                 height =   imageView.getHeight();  
67.                 imageView.getWidth();  
68.                   
69.                 scrollView.setScrollViewListener(MainActivity.this);  
70.             }    
71.         });  
72.           
73.           
74.          
75.     }  
76.   
77.   
78.     @Override  
79.     public void onScrollChanged(ObservableScrollView scrollView, int x, int y,  
80.             int oldx, int oldy) {  
81.           
82. //      Log.i("TAG","y--->"+y+"    height-->"+height);  
83.         if(y<=height && y>=0){  
84.             float scale =(float) y /height;  
85.             float alpha =  (255 * scale);  
86. //          Log.i("TAG","alpha--->"+alpha);  
87.               
88.             //layout全部透明  
89. //          layoutHead.setAlpha(scale);  
90.               
91.             //只是layout背景透明(仿知乎滑动效果)  
92.             layoutHead.setBackgroundColor(Color.argb((int) alpha, 0xfd, 0x91, 0x5b));  
93.         }  
94.           else if(y > height){
                layoutHead.getBackground().setAlpha(255);
            }
95. 
    
96.     }  
97. }  

带滚动监听的scrollview

[java]  view plain  copy

 

1. import android.content.Context;  
2. import android.util.AttributeSet;  
3. import android.widget.ScrollView;  
4. /** 
5.  * 带滚动监听的scrollview 
6.  * 
7.  */  
8. public class ObservableScrollView extends ScrollView {  
9.   
10.     public interface ScrollViewListener {  
11.   
12.         void onScrollChanged(ObservableScrollView scrollView, int x, int y,  
13.                 int oldx, int oldy);  
14.   
15.     }  
16.   
17.     private ScrollViewListener scrollViewListener = null;  
18.   
19.     public ObservableScrollView(Context context) {  
20.         super(context);  
21.     }  
22.   
23.     public ObservableScrollView(Context context, AttributeSet attrs,  
24.             int defStyle) {  
25.         super(context, attrs, defStyle);  
26.     }  
27.   
28.     public ObservableScrollView(Context context, AttributeSet attrs) {  
29.         super(context, attrs);  
30.     }  
31.   
32.     public void setScrollViewListener(ScrollViewListener scrollViewListener) {  
33.         this.scrollViewListener = scrollViewListener;  
34.     }  
35.   
36.     @Override  
37.     protected void onScrollChanged(int x, int y, int oldx, int oldy) {  
38.         super.onScrollChanged(x, y, oldx, oldy);  
39.         if (scrollViewListener != null) {  
40.             scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);  
41.         }  
42.     }  
43.   
44. }  

Demo下载地址：点击打开链接