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

移动开发 Android
现在大多数的电商APP的详情页长得几乎都差不多,几乎都是上面一个商品的图片,当你滑动的时候,会有Tab悬浮在上面,这样做用户体验确实不错,如果Tab滑上去,用户可能还需要滑下来,在来点击Tab,这样确实很麻烦。沉浸式状态栏那,郭霖说过谷歌并没有给出沉浸式状态栏这个明白,谷歌只说了沉浸式模式(Immersive Mode)。

 [[177375]]

一、概述

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

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

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

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

六、总结

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

责任编辑:庞桂玉 来源: Android开发中文站
相关推荐

2017-02-17 11:00:57

状态栏Android

2017-12-05 12:44:57

Android沉浸式状态栏APP

2021-08-09 20:29:27

Android沉浸式状态栏

2022-11-23 14:47:29

北向开发鸿蒙

2015-02-12 14:49:36

CGToast状态栏提示Status

2013-07-18 16:09:10

自定义iOS状态栏iOS开发iOS学习

2022-02-22 09:16:41

AndroidWindows状态栏

2012-12-24 14:42:48

iOS自定义状态栏

2014-06-06 14:03:13

iOS状态栏提示控件原理

2021-06-15 15:04:38

Android 12安卓通话

2013-11-20 15:08:32

iOS开发状态栏

2021-06-15 15:28:31

谷歌Android开发

2018-05-16 09:11:19

Android状态栏移动系统

2011-06-02 09:23:58

Android 效果

2022-03-16 15:30:25

barAndroid开发者

2016-11-18 08:41:23

2011-06-16 11:15:04

2023-05-30 14:50:20

界面开发鸿蒙

2021-10-20 07:39:12

谷歌安卓 Android 12

2023-07-12 23:27:24

Powerline编辑器
点赞
收藏

51CTO技术栈公众号