码迷，mamicode.com
首页 > 移动开发 > 详细

教程分享：如何实现Android沉浸式状态栏——教你让你的状态栏变个色！

时间：2015-09-27 15:02:44      阅读：299      评论：0      收藏：0      [点我收藏+]

标签：

   一、概述

       近期注意到QQ新版使用了沉浸式状态栏，ok，先声明一下：本篇博客效果下图：

技术分享

       关于这个状态栏变色到底叫「Immersive Mode」/「Translucent Bars」有兴趣可以去了解下。

       恩，接下来正题。

       首先只有大于等于4.4版本支持这个半透明状态栏的效果，但是4.4和5.0的显示效果有一定的差异，所有本篇博文内容为：

       如何实现半透明状态栏效果在大于4.4版本之上。

       如何让4.4的效果与5.0的效果尽可能一致。

       看了不少参考文章，都介绍到这个库，大家可以了解：SystemBarTint。

       不过本篇博文并未基于此库，自己想了个hack，对于此库源码有空再看了。

       二、效果图

       先贴下效果图，以便和实现过程中做下对比

       4.4 模拟器

技术分享

      5.x 真机

技术分享

       ok，有了效果图之后就开始看实现了。

       三、实现半透明状态栏

       因为本例使用了NavigationView，所以布局代码稍多，当然如果你不需要，可以自己进行筛减。

       注意引入相关依赖：

Java代码
  1. compile ‘com.android.support:appcompat-v7:22.2.1‘  
  2. compile ‘com.android.support:support-v4:22.2.1‘  
  3. compile ‘com.android.support:design:22.2.0‘  

      （一）colors.xml 和 styles.xml

       首先我们定义几个颜色：

       res/values/color.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <color name="primary">#FF03A9F4</color>  
  4.     <color name="primary_dark">#FF0288D1</color>  
  5.     <color name="status_bar_color">@color/primary_dark</color>  
  6. </resources>  

       下面定义几个styles.xml

       注意文件夹的路径：

       values/styles.xml

XML/HTML代码
  1. <resources>  
  2.     <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  3.         <!-- Customize your theme here. -->  
  4.         <item name="colorPrimary">@color/primary</item>  
  5.         <item name="colorPrimaryDark">@color/primary_dark</item>  
  6.         <item name="colorAccent">#FF4081</item>  
  7.     </style>  
  8.   
  9.     <!-- Base application theme. -->  
  10.     <style name="AppTheme" parent="@style/BaseAppTheme">  
  11.     </style>  
  12. </resources>  

       values-v19

XML/HTML代码
  1. <resources>  
  2.     <style name="AppTheme" parent="@style/BaseAppTheme">  
  3.         <item name="android:windowTranslucentStatus">true</item>  
  4.     </style>  
  5. </resources>  

       ok，这个没撒说的。注意我们的主题是基于NoActionBar的，android:windowTranslucentStatus这个属性是v19开始引入的。

      （二）布局文件

       activity_main.xml

XML/HTML代码
  1. <android.support.v4.widget.DrawerLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     >  
  8.   
  9.   
  10.     <LinearLayout  
  11.         android:id="@+id/id_main_content"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="match_parent"  
  14.         android:orientation="vertical">  
  15.   
  16.         <android.support.v7.widget.Toolbar  
  17.             android:id="@+id/id_toolbar"  
  18.             android:layout_width="match_parent"  
  19.             android:layout_height="wrap_content"  
  20.             android:background="?attr/colorPrimary"  
  21.             android:fitsSystemWindows="true"  
  22.             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>  
  23.   
  24.   
  25.         <TextView  
  26.             android:id="@+id/id_tv_content"  
  27.             android:layout_width="match_parent"  
  28.             android:layout_height="0dp"  
  29.             android:layout_weight="1"  
  30.             android:gravity="center"  
  31.             android:text="HelloWorld"  
  32.             android:textSize="30sp"/>  
  33.     </LinearLayout>  
  34.   
  35.   
  36.     <android.support.design.widget.NavigationView  
  37.         android:id="@+id/id_nv_menu"  
  38.         android:layout_width="match_parent"  
  39.         android:layout_height="match_parent"  
  40.         android:layout_gravity="start"  
  41.         android:fitsSystemWindows="true"  
  42.         app:headerLayout="@layout/header_just_username"  
  43.         app:menu="@menu/menu_drawer"  
  44.         />  
  45. </android.support.v4.widget.DrawerLayout>  

       DrawerLayout内部一个LinearLayout作为内容区域，一个NavigationView作为菜单。 

       注意下Toolbar的高度设置为wrap_content。

       然后我们的NavigationView中又依赖一个布局文件和一个menu的文件。

       header_just_username.xml

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.                 android:layout_width="match_parent"  
  4.                 android:layout_height="192dp"  
  5.                 android:background="?attr/colorPrimaryDark"  
  6.                 android:orientation="vertical"  
  7.                 android:padding="16dp"  
  8.                 android:fitsSystemWindows="true"  
  9.                 android:theme="@style/ThemeOverlay.AppCompat.Dark">  
  10.   
  11.     <TextView  
  12.         android:id="@+id/id_link"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:layout_alignParentBottom="true"  
  16.         android:layout_marginBottom="16dp"  
  17.         android:text="http://blog.csdn.net/lmj623565791"/>  
  18.   
  19.     <TextView  
  20.         android:id="@+id/id_username"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:layout_above="@id/id_link"  
  24.         android:text="Zhang Hongyang"/>  
  25.   
  26.     <ImageView  
  27.         android:layout_width="72dp"  
  28.         android:layout_height="72dp"  
  29.         android:layout_above="@id/id_username"  
  30.         android:layout_marginBottom="16dp"  
  31.         android:src="@mipmap/ic_launcher"/>  
  32.   
  33.   
  34. </RelativeLayout>  

       menu的文件就不贴了，更加详细的可以去参考Android 自己实现 NavigationView [Design Support Library(1)]。

       大体看完布局文件以后，有几个点要特别注意：

       ? ToolBar高度设置为wrap_content

       ? ToolBar添加属性android:fitsSystemWindows="true"

       ? header_just_username.xml的跟布局RelativeLayout，添加属性android:fitsSystemWindows="true"

       android:fitsSystemWindows这个属性，主要是通过调整当前设置这个属性的view的padding去为我们的status_bar留下空间。

       根据上面的解释，如果你不写，那么状态栏和Toolbar就会有挤一块的感觉了，类似会这样：

技术分享

       ok，最后看下代码。

       （三）Activity的代码

Java代码
  1. package com.zhy.colorfulstatusbar;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v7.app.AppCompatActivity;  
  5. import android.support.v7.widget.Toolbar;  
  6.   
  7. public class MainActivity extends AppCompatActivity  
  8. {  
  9.   
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState)  
  12.     {  
  13.         super.onCreate(savedInstanceState);  
  14.         setContentView(R.layout.activity_main);  
  15.         Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);  
  16.         setSupportActionBar(toolbar);  
  17.         //StatusBarCompat.compat(this, getResources().getColor(R.color.status_bar_color));  
  18.         //StatusBarCompat.compat(this);  
  19.     }  
  20.   
  21. }  

       没撒说的，就是setSupportActionBar。

       那么现在4.4的效果图是：

技术分享

       其实还不错，有个渐变的效果。

       现在5.x的效果：

技术分享

       可以看到5.x默认并非是一个渐变的效果，类似是一个深一点的颜色。

       再看看我们md的规范

技术分享

       状态栏应该是一个比Toolbar背景色，稍微深一点的颜色。

       这么看来，我们还是有必要去为4.4做点适配工作，让其竟可能和5.x显示效果一致，或者说尽可能符合md的规范。

       四、调整4.4的显示方案

       那么问题来了？如何做呢？

       咱们这么看，4.4之后加入windowTranslucentStatus的属性之后，也就是我们可以用到状态栏的区域了。

       既然我们可以用到这块区域，那么我们只要在根布局去设置一个与状态栏等高的View，设置背景色为我们期望的颜色就可以了。

       于是有了以下的代码：

Java代码
  1. package com.zhy.colorfulstatusbar;  
  2.   
  3. import android.annotation.TargetApi;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.graphics.Color;  
  7. import android.os.Build;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10.   
  11. /** 
  12.  * Created by zhy on 15/9/21. 
  13.  */  
  14. public class StatusBarCompat  
  15. {  
  16.     private static final int INVALID_VAL = -1;  
  17.     private static final int COLOR_DEFAULT = Color.parseColor("#20000000");  
  18.   
  19.     @TargetApi(Build.VERSION_CODES.LOLLIPOP)  
  20.     public static void compat(Activity activity, int statusColor)  
  21.     {  
  22.   
  23.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)  
  24.         {  
  25.             if (statusColor != INVALID_VAL)  
  26.             {  
  27.                 activity.getWindow().setStatusBarColor(statusColor);  
  28.             }  
  29.             return;  
  30.         }  
  31.   
  32.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)  
  33.         {  
  34.             int color = COLOR_DEFAULT;  
  35.             ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);  
  36.             if (statusColor != INVALID_VAL)  
  37.             {  
  38.                 color = statusColor;  
  39.             }  
  40.             View statusBarView = new View(activity);  
  41.             ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,  
  42.                     getStatusBarHeight(activity));  
  43.             statusBarView.setBackgroundColor(color);  
  44.             contentView.addView(statusBarView, lp);  
  45.         }  
  46.   
  47.     }  
  48.   
  49.     public static void compat(Activity activity)  
  50.     {  
  51.         compat(activity, INVALID_VAL);  
  52.     }  
  53.   
  54.   
  55.     public static int getStatusBarHeight(Context context)  
  56.     {  
  57.         int result = 0;  
  58.         int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");  
  59.         if (resourceId > 0)  
  60.         {  
  61.             result = context.getResources().getDimensionPixelSize(resourceId);  
  62.         }  
  63.         return result;  
  64.     }  
  65. }  

       代码的思路很简单，根据Activity找到android.R.content，在其中添加一个View(高度为statusbarHeight，背景色为我们设置的颜色，默认为半透明的黑色)。

       那么只需要在Activity里面去写上：

Java代码
  1. StatusBarCompat.compat(this);  

       就可以了。

       如果你希望自己设置状态看颜色，那么就用这个方法：

Java代码
  1. StatusBarCompat.compat(this, getResources().getColor(R.color.status_bar_color));  

       这样的话我们就解决了4.4到5.x的适配问题，一行代码解决，感觉还是不错的。

       最后提一下，对于5.0由于提供了setStatusBarColor去设置状态栏颜色，但是这个方法不能在主题中设置windowTranslucentStatus属性。所以，可以编写一个value-v21文件夹，里面styles.xml写入：

XML/HTML代码
  1. <resources>  
  2.     <!-- Base application theme. -->  
  3.     <style name="AppTheme" parent="@style/BaseAppTheme">  
  4.     </style>  
  5. </resources>  

       其实就是不要有windowTranslucentStatus属性。

       接下来，对于默认的效果就不测试了，参考上面的效果图。

       我们测试个设置状态栏颜色的，我们这里设置个红色。

       4.4 模拟器

技术分享

       5.x 真机

技术分享

       ok，这样就结束啦~~

友情推荐:

《爱加密》Android apk加密保护视频教程剪辑：http://www.ijiami.cn/Video?v=3

 源码地址:https://github.com/hongyangAndroid/ColorfulStatusBar

教程分享：如何实现Android沉浸式状态栏——教你让你的状态栏变个色！

标签：

原文地址：http://my.oschina.net/1590538xiaokai/blog/511640
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！