黑马程序员技术交流社区

标题: 沉浸式App [打印本页]
作者: 翁志雄Gson    时间: 2016-5-6 10:51
标题: 沉浸式App
本帖最后由 翁志雄Gson 于 2016-5-6 11:09 编辑


1. 概念
首先让我们看一下默认状态栏的显示效果 以下以微信与qq为例:


由于Android 系统自4.2 开始 UI 上就没多大改变，而4.4增加了透明状态栏与导航栏的功能如以下图的效果。
从以上的图可以看出Activity的contentView( 即setContentView设置的视图)可以延伸到statusBar下方 这种体验就叫沉浸式体验。这个是从用户的角度来感受的。如果从设计师的角度来看就是「Immersive Mode 全浸模式」/「Translucent Bars 半透明状态栏」。不同共同的特点就是“将布局内容延伸到手机状态栏”。

对于这种显示效果又有以下两种模式:
a.全屏( ContentView 可以进入状态栏)
b.非全屏 ( ContentView 与状态栏分离, 状态栏直接着色

2. 案例分析

2.1. sdk5.x以上  

准备5.0模拟器
2.1.1. 非全屏幕:theme默认主题着色状态栏
根据5.0以上的theme配置要求。只需配置colorPirmary(标题栏颜色),colorPrimaryDark(手机状态栏颜色)即可.

①　在values/styles.xml创建主题

<resources>
    <!--应用的基本主题 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 自定义应用主题 -->
        <!--标题颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--状态栏颜色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--text /checkBox颜色-->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>


②　在systembar/src/main/AndroidManifest.xml引用
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <!-这里是activity ->
</application>

运行效果
2.1.2. 非全屏幕:Javacode着色状态栏
代码位置：com.example.systembar.CodeActivity
①　先写版本判断
②　直接调用setStatusBarColor

Activity activity = this;
int color=Color.parseColor("#008000");
//针对版本5.x以上的即LOLLIPOP以上的
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    //非全屏幕修改状态栏颜色
    Window window = activity.getWindow();
    //FLAG_TRANSLUCENT_STATUS为状态栏类型:半透明效果
    //取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //需要设置这个 flag 才能调用 setStatusBarColor 来设置状态栏颜色
    //FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS为状态栏类型:支持着色
   window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    //设置状态栏颜色  setStatusBarColor要求21以上
    window.setStatusBarColor(color);
    ViewGroup contentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);
    View childView = contentView.getChildAt(0);//对应activity布局文件根标签
    if (childView != null) {
    //注意不是设置 ContentView 的 FitsSystemWindows, 而是设置 ContentView 的第一个子 View . 预留出系统 View 的空间.
        ViewCompat.setFitsSystemWindows(childView, true);
    }
}

运行效果：根据标题颜色着色

l android:fitsSystemWindows/setFitsSystemWindows

所有实现 Translucent System Bar 效果的Activity，都需要在根布局里设置 android:fitsSystemWindows="true" 。设置了该属性的作用在于，不会让系统导航栏和我们app的UI重叠，导致交互问题.以下给出效果图说明该属性。

2.1.3. 全屏幕:contentview延伸
代码位置:com.example.systembar.CodeFullActivity#onCreate

//去掉titlebar-全屏模式
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
//细节supportRequestWindowFeature一定要在setContentView之前设置
setContentView(R.layout.activity_code_full);
Activity activity = this;
int statusColor = Color.parseColor("#008000");
//针对版本5.x以上的即LOLLIPOP以上的
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = activity.getWindow();
    //设置透明状态栏,这样才能让 ContentView 向上
    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //需要设置这个 flag 才能调用 setStatusBarColor 来设置状态栏颜色
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    //设置状态栏颜色
    window.setStatusBarColor(statusColor);
    ViewGroup mContentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);
    View mChildView = mContentView.getChildAt(0);
    if (mChildView != null) {
        //注意不是设置 ContentView 的 FitsSystemWindows, 而是设置 ContentView 的第一个子 View .
        // 使其不为系统 View 预留空间.不预留空间的话 状态栏就会覆盖布局顶部
        ViewCompat.setFitsSystemWindows(mChildView, false);
    }
}

运行效果



2.2. 4.4以上
准备4.4模拟器

5.x以上的实现方式不使4.4以上的生效.所以要考虑一下兼容方案。


2.2.1. 全屏幕:contentview延伸
思路：
暂时保存标题栏时可以清楚得看到只要将contentView延伸到statusbar下方.它与statusBar共同放在一个FrameLayout里。

代码位置:com.example.systembar.CodeFullActivity#onCreate
①　获取系统statusBar的高度

private static final String STATUS_BAR_HEIGHT_RES_NAME = "status_bar_height";
public static int getStatusBarHeight(Context context) {
    int result = 0;
    //访问android.jar内的dimen中包含的status_bar_height属性值
    int resourceId = context.getResources().getIdentifier(STATUS_BAR_HEIGHT_RES_NAME, "dimen", "android");
    if (resourceId > 0) {
        result = context.getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

②　设置无标题栏
//去掉titlebar-全屏模式
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
//细节supportRequestWindowFeature一定要在setContentView之前设置
setContentView(R.layout.activity_code_full);

③　设置 contentView的marginTop上移状态栏高度

//KITKAT为4.4sdk的名称
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    Window window = activity.getWindow();
    ViewGroup contentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);
    //首先使 ChildView 不预留空间
    View childView = contentView.getChildAt(0);//layout file对应的根标签
    if (childView != null) {
        //此时status会遮盖contnetview
        ViewCompat.setFitsSystemWindows(childView, false);
    }
    int statusBarHeight = getStatusBarHeight(activity);
    //需要设置这个 flag 才能设置状态栏
    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //避免多次调用该方法时,多次移除了 View
    if (childView != null && childView.getLayoutParams() != null && childView.getLayoutParams().height == statusBarHeight) {
        //移除假的 View.
        contentView.removeView(childView);
        childView = contentView.getChildAt(0);
    }
    if (childView != null) {
        FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) childView.getLayoutParams();
        //清除 ChildView 的 marginTop 属性
        if (lp != null && lp.topMargin >= statusBarHeight) {
            //减少layout的topmargin 使用layout布局的整体延伸到statusBar下方
            lp.topMargin -= statusBarHeight;
            childView.setLayoutParams(lp);
        }
    }
}

Deug下可以查看到


l activity.findViewById(Window.ID_ANDROID_CONTENT);获取的是存放layout的FrameLayout具体类型为ContentFrameLayout
l Layout的内容可以从 contentView.getChildAt(0);获取。
l 在状态栏透明的情况下 lp.topMargin -= statusBarHeight;可以使用layout上移

运行效果

2.2.2. 非全屏幕:Javacod着色状态栏
①　获取系统状态栏高度(同上)
②　在状态栏透明情况下下移contnetView 距离为状态栏高度
③　如果存在着色View则修改背景色
④　如果不存在着色View则添加同时设置背景色

//判断当前sdk是4.4  KITKAT为4.4sdk的名称
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Window window = activity.getWindow();
        ViewGroup contentView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);
        //设置状态栏透明
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //获取状态栏高度
        int statusBarHeight = getStatusBarHeight(activity);
        //在全屏模式下 使用contentView内容下移状态栏高度
        View childView = contentView.getChildAt(0);
        if (childView != null) {
            FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) childView.getLayoutParams();
            //如果已经为 ChildView 设置过了 marginTop, 再次调用时直接跳过
            if (lp != null && lp.topMargin < statusBarHeight && lp.height != statusBarHeight) {
                //不预留系统空间
                ViewCompat.setFitsSystemWindows(childView, false);
                lp.topMargin += statusBarHeight;//在状态栏透明的情况下 contentView marginTop改为状态栏高度
                childView.setLayoutParams(lp);
            }
        }
       //下移的状态栏高度  已经存在着色View直接设置color
        View statusBarView = contentView.getChildAt(0);
        if (statusBarView != null && statusBarView.getLayoutParams() != null && statusBarView.getLayoutParams().height == statusBarHeight) {
            //避免重复调用时多次添加已经着色的View
            statusBarView.setBackgroundColor(statusColor);
        }else
        {
            //如果未存在刚添加着色View下次通过contentView.getChildAt(0);即为该着色View
            statusBarView = new View(activity);
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, statusBarHeight);
            statusBarView.setBackgroundColor(statusColor);
            //向 ContentView 中添加已经着色的View
            contentView.addView(statusBarView, 0, lp);
        }
        
    }
}

运行效果
我在此处添加的着色View背景为绿色
此时还可以去掉系统自带的标题栏
【源代码】
http://pan.baidu.com/s/1slOj6sl

2.3. 开源第三方SystemBarTint
下面介绍一个将以上过程封装比较到位的第三方开源状态栏工具库
支持4.4以上
Github地址
https://github.com/Ztiany/SystemBarTint
运行效果
4.4以上
5.x以上


2016-05-03_233550.png (53.29 KB, 下载次数: 280)

2016-05-03_233550.png

2016-05-04_000017.png (69.68 KB, 下载次数: 266)

2016-05-04_000017.png
作者: Studio    时间: 2016-5-6 11:29
老师什么时候带我们一大帮子去大保健啊{:3_57:}{:3_57:}{:3_57:}
作者: 翁志雄Gson    时间: 2016-5-6 11:43
Studio 发表于 2016-5-6 11:29
老师什么时候带我们一大帮子去大保健啊

你注册黑马的第一句话把我雷倒了。
作者: 小悟空et    时间: 2016-5-6 11:52
不明觉厉啊。看上去好屌的样子。
虽然看完了，但是我觉得我还是适合第三方，哈哈
作者: Huangzikun    时间: 2016-5-6 12:45
高大上的界面
作者: sinbad88    时间: 2016-5-6 13:51
Mark支持教主
作者: hansuchang    时间: 2016-5-6 14:23
666666666666666666
作者: 木曜之    时间: 2016-5-6 15:02
这是黑马就业做的事情吗，感觉好牛逼
作者: 马可老师    时间: 2016-5-6 17:10
作者: sun2582589    时间: 2016-5-6 21:45
6666666666666666666
作者: jacobsnow    时间: 2016-5-6 21:49
很厉害的样子啊！！！！我们以后干安卓开发就是这样吗？
作者: shaoxuzhen1234    时间: 2016-5-6 21:52
这个太厉害，我看不懂哎，该肿么办？、、、？
作者: shaoxuzhen1234    时间: 2016-5-6 21:54
这已经超出我范围了，看不懂，希望有一天自己也可以写成这样。。。。。
作者: 大大史莱姆    时间: 2016-5-6 21:54
真干货！！！！顶
作者: wanli316644570    时间: 2016-5-6 21:58
值得收藏   赞赞  顶一个
作者: lalala1a    时间: 2016-5-6 21:59
支持支持支持支持支持~~~
作者: 493179131    时间: 2016-5-6 22:03
赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞
作者: 心悟    时间: 2016-5-6 22:17
虽然看不懂
作者: LexBurner    时间: 2016-5-6 22:40
看了一遍之后，就想说一句，这是什么！！！看不懂，基础班和就业班差这么吗？！！
作者: 崔耀恒_b4ApR    时间: 2016-5-6 22:49
已看完,膜拜中
作者: zhangguojian    时间: 2016-5-6 22:58
完全看不懂，差距太大了
作者: 纪先森    时间: 2016-5-6 22:58
谢谢分享!~~~~~
作者: zhoujiegun    时间: 2016-5-6 22:59
谢谢大神分享
作者: zhangguojian    时间: 2016-5-6 22:59
完全看不懂
作者: Vision.斌道    时间: 2016-5-6 23:12
谢谢大神分享
作者: 非洲小孩    时间: 2016-5-7 01:44
完全看不懂诶，我还是菜鸟
作者: okchenyang44    时间: 2016-5-7 09:07
支持支持支持支持~~
作者: yanwenyong    时间: 2016-5-7 09:10
学习学习
作者: lishihao88    时间: 2016-5-7 09:45
果然还是水平不够啊.  完全看不懂, 继续学习啊.
作者: Coolman    时间: 2016-5-7 10:50
ありがとう
作者: 大爱卓生    时间: 2016-5-7 13:49
大神好厉害(&*^&%$%#@#$!#!~
作者: 程梦谷    时间: 2016-5-7 21:08
啊，啊，好高端啊，希望自己也能这样，加油
作者: Vision.斌道    时间: 2016-5-7 22:03
加油，黑马永远是最棒的！
作者: 我是黑    时间: 2016-5-7 22:44
真牛逼,下一个就是我了啦
作者: 15737977316    时间: 2016-5-7 23:10
好厉害的样子
作者: 你是我的菜    时间: 2016-5-7 23:27
感觉是不错。。。。。
作者: zhouhp    时间: 2016-5-8 11:41
66666666666
作者: xzmly111    时间: 2016-5-8 19:36
基础班的表示完全看不懂
作者: 柳春华    时间: 2016-5-8 21:25
给力安!!!!{:2_30:}
作者: 你是我的菜    时间: 2016-5-8 22:52

支持支持支持支持支持
作者: 我是黑    时间: 2016-5-8 23:13
非常棒   我什么时候才能到达这种地步
作者: `爱吃猫的鱼    时间: 2016-5-9 09:56
666666666666666高大上
作者: Vision.斌道    时间: 2016-5-9 17:55
加油，赞一个
作者: sty15193    时间: 2016-5-9 22:16
加油，支持一下
作者: 不‰平凡℃    时间: 2016-5-9 22:16
加油，赞一个
作者: 时钟滴滴答    时间: 2016-5-9 22:57
厉害厉害~~
作者: kaixinkai    时间: 2016-5-9 23:01
顶雄哥。。。。。。
作者: zjf1992    时间: 2016-5-10 00:23
看起来真的很高深.
作者: 翁志雄Gson    时间: 2016-5-10 19:42
zjf1992 发表于 2016-5-10 00:23
看起来真的很高深.

其实只要使用最后的第三方库。两行代码就可以啦
作者: wkong    时间: 2016-5-10 21:59
可以。。。。
作者: 00零度00    时间: 2016-5-10 23:07
黑马币........
作者: 木曜之    时间: 2016-5-11 00:58
向楼主学习！
作者: Mi123    时间: 2016-5-11 08:38
学习了，翁总威武
作者: dengjiaqiang    时间: 2016-5-11 14:14
但是沉浸式顶栏在5.0系统之后，状态栏改为半透明色，与4.4系统实现沉浸式顶栏还有区别
作者: dengjiaqiang    时间: 2016-5-11 14:21
QQ空间那种沉浸式图片的实现原理可以简单描述一下吗？5.0的系统是不是也得需要单独处理
作者: Vision.斌道    时间: 2016-5-11 22:38
学习了，翁总威武
作者: Android_Robot    时间: 2016-5-12 16:09
小伙伴们加油~ 希望来论坛里朋友都能拿到行业高薪~需要Android资源的可以到站内资源库去取 http://bbs.itheima.com/thread-300073-1-1.html
作者: climb    时间: 2016-5-12 19:47
来熟悉熟悉页面。。。以后好
作者: ajj1314    时间: 2016-5-12 20:19
来此阔以原地复活加满血，能量杠杠滴，哈哈
作者: clvslyf    时间: 2016-5-12 20:41
好久没来论坛了
作者: syso    时间: 2016-7-29 17:30
赞赞赞赞赞赞赞赞赞赞
作者: newu    时间: 2016-7-29 19:45
支持支持支持支持支持~~~
作者: 蜉杰辰蝣    时间: 2016-12-30 21:59
前来围观。。。
作者: IWantToBe...    时间: 2018-5-12 20:42
学习一下。。。。。。
作者: baby14    时间: 2019-4-25 07:55
多谢分享



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2