Android沉浸式状态栏及悬浮效果

一、概述

现在大多数的电商APP的详情页长得几乎都差不多，几乎都是上面一个商品的图片，当你滑动的时候，会有Tab悬浮在上面，这样做用户体验确实不错，如果Tab滑上去，用户可能还需要滑下来，在来点击Tab，这样确实很麻烦。沉浸式状态栏那，郭霖说过谷歌并没有给出沉浸式状态栏这个明白，谷歌只说了沉浸式模式(Immersive Mode)。不过沉浸式状态栏这个名字其实听不粗，随大众吧，但是Android的环境并没有IOS环境一样特别统一，比如华为rom的跟小米rom的虚拟按键完全不一样，所有Android开发者不容易。。。。。

二、淘宝的效果

三、我们的效果

只能传2M，把我的美女都给压失真了。。。。。。

四、实现类

自定义ScrollView (StickyScrollView)

StatusBarUtil //非常不错的状态栏工具

五、布局

1. <?xml version="1.0" encoding="utf-8"?> 
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3. xmlns:tools="http://schemas.android.com/tools" 
4. android:layout_width="match_parent" 
5. android:layout_height="match_parent"> 
6.  
7. <FrameLayout 
8.     android:layout_width="match_parent" 
9.     android:layout_height="match_parent"> 
10.  
11.     <com.xiaoyuan.StickyScrollView 
12.         android:id="@+id/scrollView" 
13.         android:layout_width="match_parent" 
14.         android:layout_height="match_parent" 
15.         android:focusable="true" 
16.         android:focusableInTouchMode="true"> 
17.  
18.         <LinearLayout 
19.             android:id="@+id/ll_content" 
20.             android:layout_width="match_parent" 
21.             android:layout_height="match_parent" 
22.             android:orientation="vertical"> 
23.  
24.             <ImageView 
25.                 android:layout_width="match_parent" 
26.                 android:layout_height="500dip" 
27.                 android:background="@mipmap/meinv"/> 
28.  
29.             <TextView 
30.                 android:id="@+id/title" 
31.                 android:layout_width="match_parent" 
32.                 android:layout_height="50dp" 
33.                 android:gravity="center" 
34.                 android:text="美" /> 
35.  
36.             <TextView 
37.                 android:layout_width="match_parent" 
38.                 android:layout_height="50dip" 
39.                 android:gravity="center" 
40.                 android:text="女"/> 
41.  
42.             <TextView 
43.                 android:layout_width="match_parent" 
44.                 android:layout_height="50dip" 
45.                 android:gravity="center" 
46.                 android:text="美"/> 
47.             <TextView 
48.                 android:layout_width="match_parent" 
49.                 android:layout_height="50dip" 
50.                 android:gravity="center" 
51.                 android:text="不"/> 
52.             <TextView 
53.                 android:layout_width="match_parent" 
54.                 android:layout_height="50dip" 
55.                 android:gravity="center" 
56.                 android:text="美"/> 
57.  
58.             <LinearLayout 
59.                 android:layout_width="match_parent" 
60.                 android:layout_height="wrap_content" 
61.                 android:orientation="vertical" 
62.                 android:tag="sticky"> 
63.  
64.                 <LinearLayout 
65.                     android:layout_width="match_parent" 
66.                     android:layout_height="45dp" 
67.                     android:background="#ffffff" 
68.                     android:orientation="horizontal"> 
69.  
70.                     <TextView 
71.                         android:id="@+id/infoText" 
72.                         android:layout_width="0dp" 
73.                         android:layout_height="match_parent" 
74.                         android:layout_weight="1" 
75.                         android:gravity="center" 
76.                         android:text="美女信息" 
77.                         android:textColor="#000000" 
78.                         android:textSize="16dp" /> 
79.  
80.                     <TextView 
81.                         android:id="@+id/secondText" 
82.                         android:layout_width="0dp" 
83.                         android:layout_height="match_parent" 
84.                         android:layout_weight="1" 
85.                         android:gravity="center" 
86.                         android:text="美女介绍" 
87.                         android:textColor="#000000" 
88.                         android:textSize="16dp" /> 
89.                 </LinearLayout> 
90.             </LinearLayout> 
91.  
92.             <FrameLayout 
93.                 android:id="@+id/tabMainContainer" 
94.                 android:layout_width="match_parent" 
95.                 android:layout_height="wrap_content" 
96.                 android:background="#ffffff" 
97.                 android:minHeight="400dp"> 
98.  
99.             </FrameLayout> 
100.         </LinearLayout> 
101.     </com.xiaoyuan.StickyScrollView> 
102.  
103.     <RelativeLayout 
104.         android:id="@+id/ll_good_detail" 
105.         android:layout_width="match_parent" 
106.         android:layout_height="49dp" 
107.         android:background="#00000000" 
108.         android:paddingTop="@dimen/spacing_normal"> 
109.  
110.         <TextView 
111.             android:layout_width="wrap_content" 
112.             android:layout_height="wrap_content" 
113.             android:textColor="#ffffff" 
114.             android:layout_alignParentLeft="true" 
115.             android:layout_marginLeft="10dip" 
116.             android:layout_centerHorizontal="true" 
117.             android:text="返回"/> 
118.  
119.         <TextView 
120.             android:layout_width="wrap_content" 
121.             android:layout_height="wrap_content" 
122.             android:textColor="#ffffff" 
123.             android:layout_centerInParent="true" 
124.             android:layout_centerHorizontal="true" 
125.             android:layout_marginLeft="10dip" 
126.             android:text="美女"/> 
127.  
128.         <TextView 
129.             android:layout_width="wrap_content" 
130.             android:layout_height="wrap_content" 
131.             android:textColor="#ffffff" 
132.             android:layout_alignParentRight="true" 
133.             android:layout_marginRight="10dip" 
134.             android:layout_centerHorizontal="true" 
135.             android:text="分享"/> 
136.  
137.     </RelativeLayout> 
138.  
139. </FrameLayout> 
140.  
141. </RelativeLayout>  

注意：我们把要悬浮的Tab设置了android:tag=”sticky”这样的属性

六、实现代码

1. public class MainActivity extends AppCompatActivity implements View.OnClickListener, StickyScrollView.OnScrollChangedListener { 
2.  
3. TextView oneTextView, twoTextView; 
4. private StickyScrollView stickyScrollView; 
5. private int height; 
6. private LinearLayout llContent; 
7. private RelativeLayout llTitle; 
8. private FrameLayout frameLayout; 
9. private TextView title; 
10.  
11. @Override 
12. protected void onCreate(Bundle savedInstanceState) { 
13.     super.onCreate(savedInstanceState); 
14.     setContentView(R.layout.activity_main); 
15.     initView(); 
16.     initListeners(); 
17.  
18. } 
19.  
20. /** 
21.  * 初始化View 
22.  */ 
23. private void initView() { 
24.     stickyScrollView = (StickyScrollView) findViewById(R.id.scrollView); 
25.     frameLayout = (FrameLayout) findViewById(R.id.tabMainContainer); 
26.     title = (TextView) findViewById(R.id.title); 
27.     oneTextView = (TextView) findViewById(R.id.infoText); 
28.     llContent = (LinearLayout) findViewById(R.id.ll_content); 
29.     llTitle = (RelativeLayout) findViewById(R.id.ll_good_detail); 
30.     oneTextView.setOnClickListener(this); 
31.     twoTextView = (TextView) findViewById(R.id.secondText); 
32.     twoTextView.setOnClickListener(this); 
33.  
34.     stickyScrollView.setOnScrollListener(this); 
35.     StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); 
36.     FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) llTitle.getLayoutParams(); 
37.     params.setMargins(0, getStatusHeight(), 0, 0); 
38.     llTitle.setLayoutParams(params); 
39.  
40.     //默认设置一个Frg 
41.     getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit(); 
42. } 
43.  
44. /** 
45.  * 获取状态栏高度 
46.  * @return 
47.  */ 
48. private int getStatusHeight() { 
49.     int resourceId = MainActivity.this.getResources().getIdentifier("status_bar_height", "dimen", "android"); 
50.     return getResources().getDimensionPixelSize(resourceId); 
51.  
52. } 
53.  
54. @Override 
55. public void onClick(View v) { 
56.     if (v.getId() == R.id.infoText) { 
57.         getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit(); 
58.     } else if (v.getId() == R.id.secondText) { 
59.         getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment1.newInstance()).commit(); 
60.  
61.     } 
62. } 
63.  
64. private void initListeners() { 
65.     //获取内容总高度 
66.     final ViewTreeObserver vto = llContent.getViewTreeObserver(); 
67.     vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
68.         @Override 
69.         public void onGlobalLayout() { 
70.             height = llContent.getHeight(); 
71.             //注意要移除 
72.             llContent.getViewTreeObserver() 
73.                     .removeGlobalOnLayoutListener(this); 
74.  
75.         } 
76.     }); 
77.  
78.     //获取Fragment高度 
79.     ViewTreeObserver viewTreeObserver = frameLayout.getViewTreeObserver(); 
80.     viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
81.         @Override 
82.         public void onGlobalLayout() { 
83.             height = height - frameLayout.getHeight(); 
84.             //注意要移除 
85.             frameLayout.getViewTreeObserver() 
86.                     .removeGlobalOnLayoutListener(this); 
87.         } 
88.     }); 
89.  
90.     //获取title高度 
91.     ViewTreeObserver viewTreeObserver1 = llTitle.getViewTreeObserver(); 
92.     viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
93.         @Override 
94.         public void onGlobalLayout() { 
95.             height = height - llTitle.getHeight() - getStatusHeight();//计算滑动的总距离 
96.             stickyScrollView.setStickTop(llTitle.getHeight() + getStatusHeight());//设置距离多少悬浮 
97.             //注意要移除 
98.             llTitle.getViewTreeObserver() 
99.                     .removeGlobalOnLayoutListener(this); 
100.         } 
101.     }); 
102.  
103. } 
104.  
105. @Override 
106. public void onScrollChanged(int l, int t, int oldl, int oldt) { 
107.     if (t <= 0) { 
108.         llTitle.setBackgroundColor(Color.argb((int) 0, 255, 255, 255)); 
109.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); 
110.     } else if (t > 0 && t <= height) { 
111.         float scale = (float) t / height; 
112.         int alpha = (int) (255 * scale); 
113.         llTitle.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));//设置标题栏的透明度及颜色 
114.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, alpha, title);//设置状态栏的透明度 
115.     } else { 
116.         llTitle.setBackgroundColor(Color.argb((int) 255, 227, 29, 26)); 
117.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, 255, title); 
118.     } 
119. } 
120.  }  

注意：stickyScrollView.setStickTop(int height)我们通过这个方法可以设置Tab距离多高开始悬浮

我们通过监听ScrollView滑动距离来不断改变我们标题栏跟状态栏的透明度来达到效果，在这里我们计算了几个高度(滑动距离)。最后来算出滑动总距离，根据滑动的距离跟滑动的总距离来算出透明度的数值。

StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);我们通过工具来实现图片深入状态栏。里面的传的View是图片下面的View。

六、总结

效果倒是不错，美女也不错、但是在Android4.4之前根本就没有沉浸式这个东西，大家可以下载源码来研究。自己动手实现一遍记得比较清楚。工作了。太忙了。最后感谢一下dota群的高叔(博客地址不知道)提供思路。

本文作者：佚名

来源：51CTO