安卓沉浸式状态栏实现是android api多少出来的

你的位置: >
> Android 沉浸式状态栏完美实现
沉浸式状态栏的实现方式在以前是五花八门,我记得我刚玩安卓的时候还各种刷机,刷变色龙什么的去改状态栏。现在自己做安卓开发了,感觉安卓对这种状态栏的支持还是可以的,只是国内安卓版本更新太慢!在这里主要是给出一个我觉得比较完美的实现沉浸式状态栏的方案(兼容最低android4.4)。
android 5.0 以上
android 4.4 API 19
以上都是原生安卓系统的效果,具体到国内的各种各样改过的系统可能会有细微差别,我测试小米和华为的机器效果基本一样。
1.修改主题属性
在values-v19之后的主题属性中添加一条即可,如下
&item name=&android:windowTranslucentStatus&&true&/item&
2.设置fitsSystemWindows属性
如果你想让一个View的图像显示在状态栏下,那么就在View的XML布局文件中添加如下属性
android:fitsSystemWindows=&true&
这里我设置了ToolBar
&?xml version=&1.0& encoding=&utf-8&?&
&android.support.design.widget.CoordinatorLayout xmlns:android=&/apk/res/android&
xmlns:app=&/apk/res-auto&
xmlns:tools=&/tools&
android:layout_width=&match_parent&
android:layout_height=&match_parent&
tools:context=&com.mjj.statusbar.MainActivity&&
&android.support.design.widget.AppBarLayout
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:theme=&@style/AppTheme.AppBarOverlay&&
&android.support.v7.widget.Toolbar
android:id=&@+id/toolbar&
android:layout_width=&match_parent&
android:layout_height=&?attr/actionBarSize&
android:background=&?attr/colorPrimary&
android:fitsSystemWindows=&true&
app:popupTheme=&@style/AppTheme.PopupOverlay& /&
&/android.support.design.widget.AppBarLayout&
&/android.support.design.widget.CoordinatorLayout&
注意:如果你在同一个布局中添加了多个这个属性,那么一般只有最外层View的这个属性生效
3.调整View高度
上面两步都是统一的,这一步就比较有针对性了,对不同布局和API版本都会有所微调,主要是顶部View的高度。
如果你像我一样基本使用原生控件,那么一般情况下是调整ToolBar(ActionBar)的高度。你需要给Toolbar加上系统状态栏的高度,因为如果你设置了前面两步,那么ToolBar会上移到状态栏下面,如图
我比较喜欢的处理方式是在java代码中改变高度,注意需要判断安卓版本,样例如下:
(具体获取状态栏高度的代码可以到后面的参考资料中看,也可以在我的Demo中看源码)
mToolbar = (Toolbar) findViewById(R.id.toolbar);
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT)
mToolbar.getLayoutParams().height = getAppBarHeight();
mToolbar.setPadding(mToolbar.getPaddingLeft(),
getStatusBarHeight(),
mToolbar.getPaddingRight(),
mToolbar.getPaddingBottom());
setSupportActionBar(mToolbar);
当然了,也有一些同学喜欢在XML中定义,那么就需要写一些分离区分版本的XML文件。目前的话安卓手机端除6.0的系统状态栏是24dp,其它都是25dp。
API 19 设置状态栏
获取状态栏的高度
转载请注明: &
与本文相关的文章伴随着 Android 5.0 发布的 Material Design,让 Android 应用告别了以前的工程师审美,迎来了全新的界面,灵动的交互,也让越来越多的 App 开始遵从 material design 设计原则,不再是以前拿着iOS设计稿,做着Android开发。本文就其中的沉浸式状态栏这一特性,描述其兼容到4.4的实现,以及一些使用中的小细节。
在4.4之前状态栏一直是黑色的,在4.4中带来了 windowTranslucentStatus 这一特性,因此可以实现给状态栏设置颜色,如下图所示,状态栏颜色不再是黑色,而是可以定制的颜色。
国内将状态栏变色叫做沉浸式状态栏,时间久了,叫的人多了,大家就不再深究,默认了这种叫法。
可以在知乎上看到关于这个问题的讨论:
需要解决的问题
4.4及其以上都是可以实现沉浸式状态栏效果的,5.0及其以上可以直接在主题中设置颜色,或者调用 Window 类中的 setStatusBarColor(int color) 来实现,这两种方式在5.0上都比较简单,但是如何兼容到4.4呢?
图片背景的页面,怎样让状态栏透明或者半透明(效果如下)?
使用 DrawerLayout 时,主界面实现沉浸状态栏同时,怎样保证抽屉视图也能延伸到状态栏(如下图所示),且兼容到4.4?
以上就是本文要解决的问题,下面给出解决方案。
1. 给状态栏设置颜色
先设置状态栏透明属性;
给根布局加上一个和状态栏一样大小的矩形View(色块),添加到顶上;
然后设置根布局的 FitsSystemWindows 属性为 true,此时根布局会延伸到状态栏,处在状态栏位置的就是之前添加的色块,这样就给状态栏设置上颜色了。
代码如下:
/** * 设置状态栏颜色 * * @param activity 需要设置的activity * @param color 状态栏颜色值 */
public static void setColor(Activity activity, int color) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusView = createStatusView(activity, color);
// 添加 statusView 到布局中
ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
decorView.addView(statusView);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
其中生成状态栏一样大小的矩形色块的代码如下:
/** * 生成一个和状态栏大小相同的矩形条 * * @param activity 需要设置的activity * @param color 状态栏颜色值 * @return 状态栏矩形条 */
private static View createStatusView(Activity activity, int color) {
// 获得状态栏高度
int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
int statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId);
// 绘制一个和状态栏一样高的矩形
View statusView = new View(activity);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
statusBarHeight);
statusView.setLayoutParams(params);
statusView.setBackgroundColor(color);
return statusV
在 setContentView() 之后调用 setColor(Activity activity, int color) 方法即可。
2. 图片作背景时,状态栏透明
这个实现比较简单,根布局背景设置为图片,然后添加状态栏透明 Flag, 然后设置根布局的 FitsSystemWindows 属性为 true 即可。代码如下:
/** * 使状态栏透明 * &p& * 适用于图片作为背景的界面,此时需要图片填充到状态栏 * * @param activity 需要设置的activity */
public static void setTranslucent(Activity activity) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
同样的,在 setContentView() 之后调用 setTranslucent(Activity activity) 方法即可。
3. 使用 DrawerLayout 时的特殊处理
使用 DrawerLayout 时,此时不能再对根布局,即 DrawerLayout 进行设置,而要针对 DrawerLayout 的内容布局进行设置,即抽屉之外的另一个布局。
如下是一个典型的 DrawerLayout 的布局,其内容布局即 FrameLayout,我们需要对 FrameLayout 进行仿状态栏色块的添加、FitsSystemWindows 属性的设置。
&?xml version="1.0" encoding="utf-8"?&
&android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"&
&FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"&
&LinearLayout
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/&
&/LinearLayout&
&/FrameLayout&
&android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/activity_main_drawer"/&
&/android.support.v4.widget.DrawerLayout&
还有一个需要注意的设置抽屉布局(Drawer)的 FitsSystemWindows 属性为 false,即上面布局中的 NavigationView。
DrawerLayout 状态栏变色
代码如下:
/** * 为DrawerLayout 布局设置状态栏变色 * * @param activity 需要设置的activity * @param drawerLayout DrawerLayout * @param color 状态栏颜色值 */
public static void setColorForDrawerLayout(Activity activity, DrawerLayout drawerLayout, int color) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusBarView = createStatusBarView(activity, color);
// 添加 statusBarView 到布局中
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.addView(statusBarView, 0);
// 内容布局不是 LinearLayout 时,设置padding top
if (!(contentLayout instanceof LinearLayout) && contentLayout.getChildAt(1) != null) {
contentLayout.getChildAt(1).setPadding(0, getStatusBarHeight(activity), 0, 0);
// 设置属性
ViewGroup drawer = (ViewGroup) drawerLayout.getChildAt(1);
drawerLayout.setFitsSystemWindows(false);
contentLayout.setFitsSystemWindows(false);
contentLayout.setClipToPadding(true);
drawer.setFitsSystemWindows(false);
需要注意的是,DrawerLayout 的布局只能包含两个直接子布局,一个是内容布局,一个是抽屉布局,结构如前面的示例布局所示,如果内容布局的根布局如果不是 LinearLayout 需要对其子布局设置padding top值,否则仿状态栏色块会被遮挡在最下面,布局内容延伸到状态栏,如下图所示:
(ps:就上图中的问题,目前的解决方案感觉并不是很好,如果你有更好的解决方案,请告诉我~)
DrawerLayout 状态栏透明
/** * 为 DrawerLayout 布局设置状态栏透明 * * @param activity 需要设置的activity * @param drawerLayout DrawerLayout */
public static void setTranslucentForDrawerLayout(Activity activity, DrawerLayout drawerLayout) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置内容布局属性
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.setFitsSystemWindows(true);
contentLayout.setClipToPadding(true);
// 设置抽屉布局属性
ViewGroup vg = (ViewGroup) drawerLayout.getChildAt(1);
vg.setFitsSystemWindows(false);
// 设置 DrawerLayout 属性
drawerLayout.setFitsSystemWindows(false);
同样的,在 setContentView() 之后调用上述解决方案中的方法即可。
在项目中使用
以上代码我整理成了一个工具类,放在 github 上:
在项目中推荐这样使用,在 BaseActivity 中重写 setContentView(int layoutResID) 方法,新建一个 setStatusBarColor()方法,全局设置状态栏颜色,因为一般 App 大部分界面状态栏都是主题色。
public class BaseActivity extends AppCompatActivity {
public void setContentView(int layoutResID) {
super.setContentView(layoutResID);
setStatusBarColor();
protected void setStatusBar() {
StatusBarUtils.setColor(this, getResources().getColor(R.color.colorPrimary));
当子类 Activity 的状态栏需要特殊处理时,比如设置不同的颜色,或者设置图片为背景时,重写父类的 setStatusBarColor() 方法即可,例如:
public class ImageStatusBarActivity extends BaseActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_status_bar);
protected void setStatusBar() {
StatusBarUtils.setTranslucent(this);
对 DrawerLayout 布局使用时,需要注意一点,因为方法是在 setContentView() 之后立即调用的,所以传进来的 DrawerLayout 要通过 findViewById() 传进来。如果传入在 setContentView() 之后通过 findViewById() 得到的 DrawerLayout, 则会造成空指针异常。
StatusBarUtils.setColorForDrawerLayout(this, (DrawerLayout) findViewById(R.id.drawer_layout), getResources()
.getColor(R.color.colorPrimary));
源码和Demo下载
效果在前文中都有截图,就不多放了。
如文章中有疏漏的地方,请联系我或在评论里告知。
相关文档  — 
相关经验  — 
相关讨论  — 
& 深度开源相关文章:
最新添加资讯
24小时热门资讯
附近好友搜索

我要回帖

更多关于 android4.4状态栏沉浸 的文章

 

随机推荐