Android 沉浸式状态栏及悬浮效果
我的图书馆
Android 沉浸式状态栏及悬浮效果
现在大多数的电商APP的详情页长得几乎都差不多，几乎都是上面一个商品的图片，当你滑动的时候，会有Tab悬浮在上面，这样做用户体验确实不错，如果Tab滑上去，用户可能还需要滑下来，在来点击Tab，这样确实很麻烦。沉浸式状态栏那，说过谷歌并没有给出沉浸式状态栏这个明白，谷歌只说了沉浸式模式（Immersive Mode）。不过沉浸式状态栏这个名字其实听不粗，随大众吧，但是的环境并没有环境一样特别统一，比如华为rom的跟小米rom的虚拟按键完全不一样，所有Android开发者不容易。。。。。
二、淘宝的效果
三、我们的效果
只能传2M，把我的美女都给压失真了。。。。。。
四、实现类
自定义ScrollView (StickyScrollView)
//非常不错的状态栏工具
&?xml version="1.0" encoding="utf-8"?&
&RelativeLayout xmlns:android="/apk/res/android"
xmlns:tools="/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"/&
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="美" /&
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="女"/&
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="美"/&
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="不"/&
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"&
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" /&
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="#"
android:paddingTop="@dimen/spacing_normal"&
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="返回"/&
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="美女"/&
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, twoTextV
private StickyScrollView stickyScrollV
private LinearLayout llC
private RelativeLayout llT
private FrameLayout frameL
private TextV
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(Text);
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();
* 获取状态栏高度
private int getStatusHeight() {
int resourceId = MainActivity.this.getResources().getIdentifier("status_bar_height", "dimen", "android");
return getResources().getDimensionPixelSize(resourceId);
public void onClick(View v) {
if (v.getId() == Text) {
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() {
public void onGlobalLayout() {
height = llContent.getHeight();
//注意要移除
llContent.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
//获取Fragment高度
ViewTreeObserver viewTreeObserver = frameLayout.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
height = height - frameLayout.getHeight();
//注意要移除
frameLayout.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
//获取title高度
ViewTreeObserver viewTreeObserver1 = llTitle.getViewTreeObserver();
viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
height = height - llTitle.getHeight() - getStatusHeight();//计算滑动的总距离
stickyScrollView.setStickTop(llTitle.getHeight() + getStatusHeight());//设置距离多少悬浮
//注意要移除
llTitle.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
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 /
int alpha = (int) (255 * scale);
llTitle.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));//设置标题栏的透明度及颜色
StatusBarUtil.setTranslucentForImageView(MainActivity.this, alpha, title);//设置状态栏的透明度
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。
效果倒是不错，美女也不错、但是在Android4.4之前根本就没有沉浸式这个东西，大家可以下载源码来研究。自己动手实现一遍记得比较清楚。工作了。太忙了。最后感谢一下dota群的提供思路。
TA的最新馆藏[转]&[转]&android 4.4之上可以实现的沉浸式状态栏效果 - Android当前位置:& &&&android 4.4之上可以实现的沉浸式状态栏效果android 4.4之上可以实现的沉浸式状态栏效果&&网友分享于：&&浏览：0次android 4.4以上可以实现的沉浸式状态栏效果只有android4.4以及以上的版本才支持状态栏沉浸效果
先把程序运行在4.4以下的手机上,看下效果:
在4.4以上的效果:
当然图片也是可以作为背景的.效果:
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
Window window = getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
requestWindowFeature(Window.FEATURE_NO_TITLE);
只按照当前的代码,虽然已经实现了状态栏的沉浸效果.但是我们的view整体往上平移了
现在只要在我们的布局文件中的顶层布局中加入以下声明就可以了
android:fitsSystemWindows=&true&
android:clipToPadding=&true&
我们也可以在程序中动态的改变一下顶层布局的背景颜色,这样我们的状态栏也会改变
&span style=&white-space:pre&&
&/span&localcolor+=20;
if(localcolor&0xff) {//这里做一个判断,当数值超过255的时候,就设置成255
localcolor=0
Log.e(&大于255&, &设置为255&);
Log.e(&小于255&, &当前颜色为&+localcolor);
//红 绿 先设置为固定颜色
rl_all.setBackgroundColor(Color.rgb(0x45, 0xd3, localcolor));
版权声明：本文为博主原创文章，未经博主允许不得转载。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有如何使用沉浸式状态栏，让你的app风格更好看 - 推酷
如何使用沉浸式状态栏，让你的app风格更好看
大家都知道，传统的手机状态栏非黑即白，经常让整个app显得不是那么的好看，如何让状态栏的颜色跟你整个界面的颜色能够融为一体，这是我们一直想要的，现在给大家展示一下：
由图可见，第一张是没有使用沉浸式状态栏，显示的颜色为白色，由的手机显示的是黑色，第二张图，是实用了沉浸式状态栏，整体的视觉效果比第一张要好。
那么如何使用沉浸式状态栏呢？首先我们要明白，沉浸式状态栏呢是在android 4.4,也就是api在19以上才使用的。
我们先简单的说一个，如果我们整体的app颜色色调是一样的，我们可以直接在style里面直接设置：
1.在color里面定义几个颜色
&?xml version=&1.0& encoding=&utf-8&?&
&resources&
&color name=&colorPrimary&&#3F51B5&/color&
&color name=&colorPrimaryDark&&#303F9F&/color&
&color name=&colorAccent&&#FF4081&/color&
&/resources&
2.在style里面引用
&resources&
&!-- Base application theme. --&
&style name=&AppTheme& parent=&Theme.AppCompat.Light.DarkActionBar&&
&!-- Customize your theme here. --&
&!--导航栏的颜色--&
&item name=&colorPrimary&&@color/colorPrimary&/item&
&!--状态栏的颜色--&
&item name=&colorPrimaryDark&&@color/colorPrimaryDark&/item&
&/resources&
3.在Androidmanifest里面直接定义主题
android:theme=&@style/AppTheme&
这个时候出来的效果时这样的：（想必大家已经看出效果了）
那么我们又该在代码中如何去实现呢？上一篇，我简单给大家说一下toolbar的使用，下面我所写的在toolbar的基础上来添加的。（ 考虑到可能每个页面的颜色不一样，我们没法在使用主题的方式，我们则需要另换思路 ）
我们可以在baseActivity写一下几个方法：
abstract public class BaseActivity extends AppCompatActivity implements IBaseView {
private static final int ERROR_LAYOUT_ID = 0;
protected Toolbar mToolB
protected Drawable mStatusBarDrawable = UIUtil.getDrawable(R.drawable.drawable_login);
protected int mToolBarTextColorResId = UIUtil.getColor(R.color.title_text_color_darker);
protected void onCreate(Bundle savedInstanceState) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
super.onCreate(savedInstanceState);
DialogUtils.dismissProcessDialog();
if (isRegisterEventBus()) {
EventBus.getDefault().register(this);
if (ERROR_LAYOUT_ID != getLayoutId()) {
setContentView(getLayoutId());
//是否改变状态栏的颜色
if (isChangeStatusBarColor()) {
setStatusBarColor();
setSystemBarTintDrawable(mStatusBarDrawable);
pat(this, mStatusBarColorResId);
mToolBar = (Toolbar) findViewById(R.id.tool_bar);
if (null != mToolBar) {
configToolBar(mToolBar);
if (hasParentActivity()) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mProgressBarIndeterminate = (ProgressBarIndeterminate) findViewById(R.id.progress_bar_indeterminate);
if (null != getLoadingTargetView()) {
mChangeViewController = new ChangeViewController(getLoadingTargetView());
initView();
initData();
* 设置状态栏背景色
protected abstract void setStatusBarColor();
* 是否修改状态栏的背景色
protected abstract boolean isChangeStatusBarColor();
* 配置ToolBar 包括背景色字体颜色等
* 每个页面的属性可能不同 子类复写该方法
* @param toolBar
protected void configToolBar(Toolbar toolBar){
setSupportActionBar(toolBar);
mToolBar.setBackgroundDrawable(mStatusBarDrawable);
mToolBar.setTitleTextColor(mToolBarTextColorResId);
* 初始化相关数据
public abstract void initData();
* 初始化布局内的控件
public abstract void initView();
* 获取当前界面的布局ID
* @return 当前界面的布局ID
abstract public int getLayoutId();
* use SystemBarTintManager
* @param tintDrawable
protected void setSystemBarTintDrawable(Drawable tintDrawable) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
SystemBarTintManager mTintManager = new SystemBarTintManager(this);
if (tintDrawable != null) {
mTintManager.setStatusBarTintEnabled(true);
mTintManager.setTintDrawable(tintDrawable);
mTintManager.setStatusBarTintEnabled(false);
mTintManager.setTintDrawable(null);
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
//重写ToolBar返回按钮的行为，防止重新打开父Activity重走生命周期方法
case android.R.id.home:
return super.onOptionsItemSelected(item);
然后我们在需要的activity里面继承baseactivity 实现他的方法，
protected void setStatusBarColor() {
／／这里时你状态栏所要改变的颜色，这里用的是deawable
mStatusBarDrawable = UIUtil.getDrawable(R.drawable.drawable_home);//这是在value下自建一个xml文件，专门用来每个页面状态栏所需要的颜色
protected boolean isChangeStatusBarColor() {
／／这个是是否改变状态栏的一个状态
这里，基本上怎么使用沉浸式状态栏几本上说完了，但是我们要注意，4.4和5.0以上还是有一定的区别的，
因为4.4原生态android上是没有的，而5.0以后android 原生态上是有的，4.4之后加入 windowTranslucentStatus 的属性之后，也就是我们可以用到状态栏的区域了，而5.0提供了setStatusBarColor去设置状态栏颜色，但是这个方法不能在主题中设置 windowTranslucentStatus 属性。我们在style里面就不再设置 windowTranslucentStatus属性。
详细的介绍可以看http://blog.csdn.net/lmj/article/details/
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致经验743 米
在线时间109 小时
积分 1009, 距离下一级还需 991 积分
积分 1009, 距离下一级还需 991 积分
机型小米手机3-WCDMA/CDMA版
MIUI版本5.4.3
来自网页版
本帖最后由 哥烦了 于
21:58 编辑
看看我的状态栏再看看你们自己状态栏那黑条吧 觉得漂亮的顶起来，miui开发组不作为 漂亮而高端上档次的沉浸式状态栏他们居然实现不了
废话不多说上图
Screenshot_-13-35-32.png (1.47 MB, 下载次数: 9)
Screenshot_-13-35-59.png (1.32 MB, 下载次数: 8)
Screenshot_-13-36-12.png (1.29 MB, 下载次数: 6)
Screenshot_-13-37-05.png (316.9 KB, 下载次数: 8)
Screenshot_-13-14-30.png (663.27 KB, 下载次数: 8)
Screenshot_-13-14-22.png (386.73 KB, 下载次数: 9)
Screenshot_-13-11-27.png (571.57 KB, 下载次数: 7)
Screenshot_-13-47-05.png (838.82 KB, 下载次数: 3)
Screenshot_-13-11-40.png (478.3 KB, 下载次数: 4)
Screenshot_-13-50-40.png (1.39 MB, 下载次数: 8)
Screenshot_-13-24-35.png (469.96 KB, 下载次数: 4)
Screenshot_-13-27-06.png (461.97 KB, 下载次数: 3)
Screenshot_-13-29-49.png (1.6 MB, 下载次数: 4)
Screenshot_-13-31-11.png (1.79 MB, 下载次数: 3)
Screenshot_-13-45-17.png (1.22 MB, 下载次数: 3)
(391.81 KB, 下载次数: 24)
21:31 上传
(1.67 MB, 下载次数: 1)
21:33 上传
(275.9 KB, 下载次数: 0)
21:37 上传
(288.6 KB, 下载次数: 0)
21:49 上传
(1.18 MB, 下载次数: 1)
21:52 上传
(1.3 MB, 下载次数: 0)
21:53 上传
(1.54 MB, 下载次数: 2)
21:54 上传
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
已关联5个BUG提交人处理状态
经验3183 米
在线时间384 小时
版本5.12.10
积分 3534, 距离下一级还需 1466 积分
积分 3534, 距离下一级还需 1466 积分
机型小米手机3-TD版
签到次数117
MIUI版本5.12.10
通过手机发布
呵呵，这个不是实现不了吧，估计是产品经理说了算。不要怀疑开发组的实力。
经验867 米
在线时间18 小时
积分 930, 距离下一级还需 1070 积分
积分 930, 距离下一级还需 1070 积分
机型小米手机2/2S
签到次数72
MIUI版本5.5.9
来自网页版
楼主，弄了半天你还是没有说是怎么实现的啊。
经验4104 米
在线时间212 小时
miui忽悠组
积分 4955, 距离下一级还需 45 积分
积分 4955, 距离下一级还需 45 积分
机型红米Note 3-双网通版
签到次数74
MIUI版本7.2.9
来自网页版
经验613 米
在线时间82 小时
版本6.4.29
积分 695, 距离下一级还需 1305 积分
积分 695, 距离下一级还需 1305 积分
签到次数53
MIUI版本6.4.29
来自网页版
能给个具体教程出来吗？
经验118 米
在线时间16 小时
版本6.10.20
积分 170, 距离下一级还需 30 积分
积分 170, 距离下一级还需 30 积分
机型小米手机5
MIUI版本6.10.20
来自网页版
经验571 米
在线时间52 小时
积分 665, 距离下一级还需 1335 积分
积分 665, 距离下一级还需 1335 积分
机型未知设备
签到次数51
MIUI版本5.1.9
来自网页版
这不是沉浸式状态栏吧，只是你把状态栏颜色跟应用改为同一种颜色了
万荣苹果 出口美国 打开链接 即可下单/item.htm?spm=686..0.IguUl1&id=
MIUI 3000万
MIUI 3000万发烧友纪念勋章
MIUI 2000万
MIUI 2000万发烧友纪念勋章
已关注微信
关注腾讯微博
已关注腾讯微博
关注新浪微博
已关注新浪微博
APP 1000万
MIUI论坛APP注册用户突破1000万纪念勋章
MIUI五周年
MIUI五周年纪念勋章
已关注极客秀微信
Copyright (C) 2016 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号关于沉浸式状态栏的一些感悟 - 简书
关于沉浸式状态栏的一些感悟
在此先要感谢作者的一篇文章“Android KITKAT 以上实现沉浸式状态栏”在写自己的APP的时候，由于审美上有一些强迫症，在登陆界面的时候看到自己的界面是这样的：
图一可以看到状态栏是淡绿色的，虽然总体上看上去还行，但是程序猿都有一点强迫症的，想要状态栏变得完美，就像下图：
图二这样的话背景就和状态栏融为一体了，整体上看起来更美观。这种方式叫做沉浸式状态栏。是怎么实现的呢。很简单，Android4.4有两种新特性，分别是WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
和 WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION只需要在自己的代码的控制文件后面添加一个函数initWindow（）就好
public voidsetContentLayout() {
setContentView(R.layout.activity_login);
initWindow();
private voidinitWindow() {
if(Build.VERSION.SDK_INT&= Build.VERSION_CODES.KITKAT) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}这样的话就能实现图二的效果。但是还没结束。在最终解决问题之前，总会遇到一些坑，也总会明白一些事。下面是我总结的几点。1.colorPrimaryDark下面是我整个APP所用的设计风格
图三当我发现我将状态栏底色colorPrimaryDark设置为透明（transparent）后，但是运行后的APP状态栏底色还是有白色，一开始我以为是导航栏底色在搞鬼，但是当我修改了导航栏底色后发现情况还出现，后来我才发觉应该是Activity窗口颜色混淆了，一尝试果然如此。但是当我activity窗口颜色、导航栏底色、状态栏底色都设置为透明后，我发现并没有安所希望的那样实现图二的效果反而都变成了黑色，倒也不难看，但是违背了最初的设想和极客精神，所以继续改进。2.有一个牛人写了一个第三方叫做，我调用了后发现了几个问题。或许是我的版本低，当我添加了依赖后studio提示我更新glide版本，更新后我发现我的主界面中抽屉样式（navigation）报错。我在看他的源码的时候他曾说对于DrawerLayout布局的使用会有一些问题，需要修改，但我没找到修改的方法，后来我将依赖去掉重新build文件错误消失，我选取了一个比较中转的方法，在我的工具类中新建了个class，里面讲源码写了一遍
图四其它函数不展示了。后来在我的程序中调用
图五发现我的状态栏变得一片白，与想象相差甚远，无论是StatusBarUtil.setTranslucent(Activityactivity,intstatusBarAlpha)还是
花有刺，近不详。