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

概述一、概述现在大多数的电商APP的详情页长得几乎都差不多，几乎都是上面一个商品的图片，当你滑动的时候，会有Tab悬浮在上面，这样做用户体验确实不错，如果Tab滑上去，用户可能还需要滑下来，在来点击Tab，这样确实很

一、概述

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

二、淘宝的效果

三、我们的效果

 

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

四、实现类

自定义ScrollVIEw (StickyScrollVIEw)

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

五、布局

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"xmlns:tools="http://schemas.androID.com/tools"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"><FrameLayoutandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"><com.xiaoyuan.StickyScrollVIEwandroID:ID="@+ID/scrollVIEw"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:focusable="true"androID:focusableIntouchMode="true"><linearLayoutandroID:ID="@+ID/ll_content"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:orIEntation="vertical"><ImageVIEwandroID:layout_wIDth="match_parent"androID:layout_height="500dip"androID:background="@mipmap/meinv"/><TextVIEwandroID:ID="@+ID/Title"androID:layout_wIDth="match_parent"androID:layout_height="50dp"androID:gravity="center"androID:text="美" /><TextVIEwandroID:layout_wIDth="match_parent"androID:layout_height="50dip"androID:gravity="center"androID:text="女"/><TextVIEwandroID:layout_wIDth="match_parent"androID:layout_height="50dip"androID:gravity="center"androID:text="美"/><TextVIEwandroID:layout_wIDth="match_parent"androID:layout_height="50dip"androID:gravity="center"androID:text="不"/><TextVIEwandroID:layout_wIDth="match_parent"androID:layout_height="50dip"androID:gravity="center"androID:text="美"/><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:orIEntation="vertical"androID:tag="sticky"><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="45dp"androID:background="#ffffff"androID:orIEntation="horizontal"><TextVIEwandroID:ID="@+ID/infoText"androID:layout_wIDth="0dp"androID:layout_height="match_parent"androID:layout_weight="1"androID:gravity="center"androID:text="美女信息"androID:textcolor="#000000"androID:textSize="16dp" /><TextVIEwandroID:ID="@+ID/secondText"androID:layout_wIDth="0dp"androID:layout_height="match_parent"androID:layout_weight="1"androID:gravity="center"androID:text="美女介绍"androID:textcolor="#000000"androID:textSize="16dp" /></linearLayout></linearLayout><FrameLayoutandroID:ID="@+ID/tabMainContainer"androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:background="#ffffff"androID:minHeight="400dp"></FrameLayout></linearLayout></com.xiaoyuan.StickyScrollVIEw><relativeLayoutandroID:ID="@+ID/ll_good_detail"androID:layout_wIDth="match_parent"androID:layout_height="49dp"androID:background="#00000000"androID:paddingtop="@dimen/spacing_normal"><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:textcolor="#ffffff"androID:layout_alignParentleft="true"androID:layout_marginleft="10dip"androID:layout_centerHorizontal="true"androID:text="返回"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:textcolor="#ffffff"androID:layout_centerInParent="true"androID:layout_centerHorizontal="true"androID:layout_marginleft="10dip"androID:text="美女"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:textcolor="#ffffff"androID:layout_alignParentRight="true"androID:layout_marginRight="10dip"androID:layout_centerHorizontal="true"androID:text="分享"/></relativeLayout></FrameLayout></relativeLayout>

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

六、实现代码

public class MainActivity extends AppCompatActivity implements VIEw.OnClickListener,StickyScrollVIEw.OnScrollChangedListener {TextVIEw oneTextVIEw,twoTextVIEw;private StickyScrollVIEw stickyScrollVIEw;private int height;private linearLayout llContent;private relativeLayout llTitle;private FrameLayout frameLayout;private TextVIEw Title;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);initVIEw();initListeners();}/*** 初始化VIEw*/private voID initVIEw() {stickyScrollVIEw = (StickyScrollVIEw) findVIEwByID(R.ID.scrollVIEw);frameLayout = (FrameLayout) findVIEwByID(R.ID.tabMainContainer);Title = (TextVIEw) findVIEwByID(R.ID.Title);oneTextVIEw = (TextVIEw) findVIEwByID(R.ID.infoText);llContent = (linearLayout) findVIEwByID(R.ID.ll_content);llTitle = (relativeLayout) findVIEwByID(R.ID.ll_good_detail);oneTextVIEw.setonClickListener(this);twoTextVIEw = (TextVIEw) findVIEwByID(R.ID.secondText);twoTextVIEw.setonClickListener(this);stickyScrollVIEw.setonScrollListener(this);StatusbarUtil.setTranslucentForImageVIEw(MainActivity.this,Title);FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) llTitle.getLayoutParams();params.setmargins(0,getStatusHeight(),0);llTitle.setLayoutParams(params);//默认设置一个FrggetSupportFragmentManager().beginTransaction().replace(R.ID.tabMainContainer,Fragment.newInstance()).commit();}/*** 获取状态栏高度* @return*/private int getStatusHeight() {int resourceID = MainActivity.this.getResources().getIDentifIEr("status_bar_height","dimen","androID");return getResources().getDimensionPixelSize(resourceID);}@OverrIDepublic voID onClick(VIEw v) {if (v.getID() == R.ID.infoText) {getSupportFragmentManager().beginTransaction().replace(R.ID.tabMainContainer,Fragment.newInstance()).commit();} else if (v.getID() == R.ID.secondText) {getSupportFragmentManager().beginTransaction().replace(R.ID.tabMainContainer,Fragment1.newInstance()).commit();}}private voID initListeners() {//获取内容总高度final VIEwTreeObserver vto = llContent.getVIEwTreeObserver();vto.addOnGlobalLayoutListener(new VIEwTreeObserver.OnGlobalLayoutListener() {@OverrIDepublic voID onGlobalLayout() {height = llContent.getHeight();//注意要移除llContent.getVIEwTreeObserver().removeGlobalOnLayoutListener(this);}});//获取Fragment高度VIEwTreeObserver vIEwTreeObserver = frameLayout.getVIEwTreeObserver();vIEwTreeObserver.addOnGlobalLayoutListener(new VIEwTreeObserver.OnGlobalLayoutListener() {@OverrIDepublic voID onGlobalLayout() {height = height - frameLayout.getHeight();//注意要移除frameLayout.getVIEwTreeObserver().removeGlobalOnLayoutListener(this);}});//获取Title高度VIEwTreeObserver vIEwTreeObserver1 = llTitle.getVIEwTreeObserver();vIEwTreeObserver1.addOnGlobalLayoutListener(new VIEwTreeObserver.OnGlobalLayoutListener() {@OverrIDepublic voID onGlobalLayout() {height = height - llTitle.getHeight() - getStatusHeight();//计算滑动的总距离stickyScrollVIEw.setSticktop(llTitle.getHeight() + getStatusHeight());//设置距离多少悬浮//注意要移除llTitle.getVIEwTreeObserver().removeGlobalOnLayoutListener(this);}});}@OverrIDepublic voID onScrollChanged(int l,int t,int oldl,int oldt) {if (t <= 0) {llTitle.setBackgroundcolor(color.argb((int) 0,255,255));StatusbarUtil.setTranslucentForImageVIEw(MainActivity.this,Title);} else if (t > 0 && t <= height) {float scale = (float) t / height;int Alpha = (int) (255 * scale);llTitle.setBackgroundcolor(color.argb((int) Alpha,227,29,26));//设置标题栏的透明度及颜色StatusbarUtil.setTranslucentForImageVIEw(MainActivity.this,Alpha,Title);//设置状态栏的透明度} else {llTitle.setBackgroundcolor(color.argb((int) 255,26));StatusbarUtil.setTranslucentForImageVIEw(MainActivity.this,Title);}}}

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

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

StatusbarUtil.setTranslucentForImageVIEw(MainActivity.this,Title);我们通过工具来实现图片深入状态栏。里面的传的VIEw是图片下面的VIEw。

以上所述是小编给大家介绍的AndroID 沉浸式状态栏及悬浮效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android 沉浸式状态栏及悬浮效果全部内容，希望文章能够帮你解决Android 沉浸式状态栏及悬浮效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。