手机最顶端的状态栏

最新推荐文章于 2023-01-01 14:17:41 发布
最新推荐文章于 2023-01-01 14:17:41 发布
阅读量7.8k 收藏 3
点赞数 1
分类专栏： anroid笔记



 

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以上

4.4api.gif (1.85 MB, 下载次数: 0)

下载附件  保存到相册

半小时前 上传

5.x以上

6.6.gif (2.81 MB, 下载次数: 0)

下载附件  保存到相册

半小时前 上传

 

本主题由 翁志雄Gson 于23 分钟前 分类

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

下载附件  保存到相册

半小时前 上传

 

2016-05-03_233550.png

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

下载附件  保存到相册

半小时前 上传

 

2016-05-04_000017.png

smile_hxs
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android顶部状态栏
10-21
沉浸式状态栏、顶部状态栏改色,颜色比较和谐
Android自动设置状态栏字体颜色
jiulang9的博客
12-29 3050
Android6.0以上系统可以把状态栏文字和图标换成深色，但是MIUI、Flyme例外 所以我们封装一个根据状态栏颜色来自动设置状态栏字体颜色
禁止StatusBar展开
Hitvz的博客
08-14 6088
最近想写一个小应用，看到要模仿的那个应用，状态栏是拉不下来的，就好像锁屏应用不许下拉状态栏一样，于是百度了好久，都说需要修改源代码，最后还是选择了简单的java实现。 这里说一下： 1、statusbar是由StatusBarManager控制的，但是StatusBarManager安卓默认是不能使用的，这里需要曲线救国； 2、没错，救国方案就是java的反射机制！ 3、Sta
android statusbar 和 navigationbar的设置
qq_42282862的博客
08-26 932
状态栏经历的阶段 android 的状态栏大致经历了以下几个阶段 android 的状态栏大致经历以下几个阶段 在android 4.4-android5.0可以实现状态栏的变色，但是效果不是太好，主要实现方式是通过FLAG——TRANSKUCEBT_STATUS这个属性设置状态栏为透明并且为全屏模式，然后通过添加一个StatusBar一样大小的View，将View设置为我们想要的颜色，从而实现状态栏变色。 在android 5.0-android6.0系统才真正的支持状态栏变色，系统加入一个重要的属
Android UI 设计规范
旺仔的专栏
04-18 1万+
1. 基础常识 1.1 主流屏幕尺寸 标识 屏幕尺寸 hdpi 480 * 800 xhdpi 720 * 1280 xxhdpi 1080 * 1920 1.2 图标尺寸 标识 启动图标尺寸 菜单图标尺寸 mdpi 48 * 48 （160 DPI ） 24 * 24 h
Android studio 顶部状态栏 的样式 顶部小刘海是否显示 颜色代码 颜色转换
01-03
Android studio 顶部状态栏 的样式 value下的colors.xml设置颜色 #0071BC #29ABE2 #0071BC value下的strings.xml设置标题 条码 value下的styles.xml设置是否显示标题栏 //设置是否显示标题栏 @color...
jquery移动点击的项目到列表最顶端的方法
10-24
主要介绍了jquery移动点击的项目到列表最顶端的方法,涉及jQuery针对页面元素的操作技巧,需要的朋友可以参考下
导航栏始终在顶端
04-24
一款不错的导航，导航栏始终在顶端，不再有篇幅太大而导航不方便的烦恼
菜单栏悬停在顶端的视图
04-05
作者Huanhoo，源码HHHorizontalPagingView，HHHorizontalPagingView是一个实现上下滚动时菜单悬停在顶端，并且可以左右滑动切换的视图，如下图所示。
状态栏弹出自定义提示视图效果
04-01
该源码由源码天堂免费提供下载，源码实现了如何在窗口状态栏顶端或者下端弹出自定义的提示视图。是一个不错的学习例子，喜欢的朋友可以下载研究一下，。
Android 标题栏、状态栏、系统栏、导航栏、应用栏及各个位置的颜色设置
qq_38056514的博客
01-01 7561
自2014年Google I/O上Material Design横空出世后，市场上的应用又逐步趋向了样式的风格统一，support library中很快就出来了ToolBar控件，一个定制化的ViewGroup，来完善ActionBar的使用。Actionbar是Android3.0之后的一个重要的交互元素，Actionbar位于Activity的顶部，用于显示图标、菜单、标题，广泛用于View的交互、导航等功能。在Android3.0之后，Actionbar是默认添加的，只要你。下拉就会出现通知栏。
Qt界面中的status bar
no1xizhong的博客
11-21 3943
在mainwindow.cpp文件中，有槽函数定义：MainWindow::on_connectButton_clicked()。 其中对于状态栏的操作有： statusBar()->clearMessage(); statusBar()是什么？ 打开mainwindow.h头文件，并没有发现mainwindow类中有statusBar()函数定义。 按住Ctrl+点击statusBar()...
android 状态栏设置工具栏,Android状态栏工具
weixin_39657521的博客
05-25 215
参考了一些文章做了一些修改，变成了自己的工具类。其中有很多地方欠考虑，有待改进，欢迎路过的大佬给点建议。经过前两篇的介绍我们对如何修改状态栏的效果有了大致的了解，本篇介绍一种使用更加简单的方式设置主题效果注意： 要设置fitsSystemWindows为truetrue@color/colorPrimary@color/colorPrimaryDark@color/colorAccent参考Sys...
关于安卓页面顶部的状态栏，标题栏，actionBar，topBar
pihaigougou的博客
11-03 1810
安卓页面最顶部一栏即status bar-状态栏，也就是系统显示系统时间，信号强度，运营商信息的地方，一般不做处理。 状态栏之下，即我们常说的标题栏，即titleBar，一般为了隐藏此标题栏，会调用requestWindowFeature方法设置其为隐藏。从页面结构来说，安卓window对象下为decorView，decorView下分为titleBar之类的标题栏和setContentVi
android操作顶部状态栏
qq_41466437的博客
10-14 921
android操作顶部状态栏 一、在AndroidManifest.xml文件中： 引入样式AppTheme： <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon=...
Android如何设置顶部状态栏颜色（主题）
热门推荐
ai-exception的博客
09-03 2万+
在Android中我们经常需要设置屏幕顶部状态栏的主题和应用页面保持同一风格，本文介绍几种常用的设置方案： 状态栏将显示为纯净的颜色，没有渐变效果 /** * 状态栏相关工具类 * */ public class StatusBarUtils { //设置Activity对应的顶部状态栏的颜色 public static void setWindowS...
android UI StatusBar（手机顶部状态栏）适配
牛肉丸
04-04 2549
前言：状态栏指定android手机上顶部显示手机状态信息的位置,状态栏是在4.4（19）加入的，在4.4以前的系统上无法实现。现在世面上的手机android4.4一下的占比不是很大，所以不是太影响.本文目的解决4.4以上适配问题。android 4.4（19）的界面android 6.0（23）的界面问题：19和23的界面statusbar不统一，颜色各异 出现原因：19根本没有setStat
android透明状态栏高度,【报Bug】uniapp 安卓设置titleNView透明后 内容直接定到屏幕顶部，不预留状态栏高度...
weixin_29664739的博客
05-26 627
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]"titleNView": {"type": "transparent",}在安卓下面 内容会直接顶到屏幕的最顶部，而不预留状态栏高度在ios下面 内容会在状态栏之下 预留了状态栏高度我现在是通过onload的来判断安卓cs...
android移动端设计规范,干货｜超全面的移动端UI 设计规范整理汇总（下）
weixin_39792519的博客
05-30 3115
原标题：干货｜超全面的移动端UI 设计规范整理汇总(下)来源：优秀网页设计六、APP版式设计规范版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在 UI设计中版面设计的原则有哪些呢？1. 对齐对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览...
html顶端导航栏页面
最新发布
06-10
要创建一个顶端导航栏，您可以使用HTML和CSS来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>顶端导航栏</title> <style> /* 设置导航栏样式 */ nav { background-color: #333; overflow: hidden; } /* 设置导航链接样式 */ nav a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* 设置当前激活状态下的导航链接样式 */ nav a.active { background-color: #4CAF50; } /* 设置鼠标悬停状态下的导航链接样式 */ nav a:hover { background-color: #ddd; color: black; } </style> </head> <body> <!-- 创建导航栏 --> <nav> <a class="active" href="#">首页</a> <a href="#">新闻</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <!-- 在此处添加页面内容 --> </body> </html> ``` 在上面的示例中，我们首先创建了一个`<nav>`元素，然后在其中添加了四个导航链接。我们使用CSS来设置导航栏的样式，包括背景颜色、链接颜色、链接内边距等。我们还使用CSS来设置当前激活状态下的导航链接和鼠标悬停状态下的导航链接的样式。 您可以将上面的代码复制到HTML文件中，并在`<nav>`元素中添加自己的导航链接。同时，在导航栏下方添加页面内容。希望这可以帮助您创建您想要的顶端导航栏页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值