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

一、概述

现在大多数的电商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">
<framelayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.xiaoyuan.stickyscrollview
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableintouchmode="true">
<linearlayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<imageview
android:layout_width="match_parent"
android:layout_height="500dip"
android:background="@mipmap/meinv"/>
<textview
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="美" />
<textview
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="女"/>
<textview
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="美"/>
<textview
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="不"/>
<textview
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="美"/>
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="sticky">
<linearlayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#ffffff"
android:orientation="horizontal">
<textview
android: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" />
<textview
android: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>
<framelayout
android:id="@+id/tabmaincontainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:minheight="400dp">
</framelayout>
</linearlayout>
</com.xiaoyuan.stickyscrollview>
<relativelayout
android:id="@+id/ll_good_detail"
android:layout_width="match_parent"
android:layout_height="49dp"
android:background="#00000000"
android:paddingtop="@dimen/spacing_normal">
<textview
android: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="返回"/>
<textview
android: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="美女"/>
<textview
android: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;
@override
protected 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, 0, title);
framelayout.layoutparams params = (framelayout.layoutparams) lltitle.getlayoutparams();
params.setmargins(0, getstatusheight(), 0, 0);
lltitle.setlayoutparams(params);
//默认设置一个frg
getsupportfragmentmanager().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);
}
@override
public 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() {
@override
public void ongloballayout() {
height = llcontent.getheight();
//注意要移除
llcontent.getviewtreeobserver()
.removeglobalonlayoutlistener(this);
}
});
//获取fragment高度
viewtreeobserver viewtreeobserver = framelayout.getviewtreeobserver();
viewtreeobserver.addongloballayoutlistener(new viewtreeobserver.ongloballayoutlistener() {
@override
public void ongloballayout() {
height = height - framelayout.getheight();
//注意要移除
framelayout.getviewtreeobserver()
.removeglobalonlayoutlistener(this);
}
});
//获取title高度
viewtreeobserver viewtreeobserver1 = lltitle.getviewtreeobserver();
viewtreeobserver1.addongloballayoutlistener(new viewtreeobserver.ongloballayoutlistener() {
@override
public void ongloballayout() {
height = height - lltitle.getheight() - getstatusheight();//计算滑动的总距离
stickyscrollview.setsticktop(lltitle.getheight() + getstatusheight());//设置距离多少悬浮
//注意要移除
lltitle.getviewtreeobserver()
.removeglobalonlayoutlistener(this);
}
});
}
@override
public void onscrollchanged(int l, int t, int oldl, int oldt) {
if (t <= 0) {
lltitle.setbackgroundcolor(color.argb((int) 0, 255, 255, 255));
statusbarutil.settranslucentforimageview(mainactivity.this, 0, 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, 227, 29, 26));
statusbarutil.settranslucentforimageview(mainactivity.this, 255, title);
}
}
}

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

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

statusbarutil.settranslucentforimageview(mainactivity.this, 0, title);我们通过工具来实现图片深入状态栏。里面的传的view是图片下面的view。

以上所述是小编给大家介绍的android 沉浸式状态栏及悬浮效果，希望对大家有所帮助