Android 沉浸式透明状态栏与导航栏

原创 2015年11月20日 19:15:26

Android 系统自4.2 开始 UI 上就没多大改变,4.4 也只是增加了透明状态栏与导航栏的功能

这个特性是andorid4.4支持的,最少要api19才可以使用。下面介绍一下使用的方法,非常得简单:

安卓自定义状态栏颜色以与APP风格保持一致
    我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果:

[java] view plaincopy
  1. public class MainActivity extends Activity {  
  2.   
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.   
  8.         //透明状态栏  
  9.         getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
  10.         //透明导航栏  
  11.         getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  
  12.   
  13.     }  
  14.   
  15.   
  16. }  


[java] view plaincopy
  1. //透明状态栏  
  2. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
  3. //透明导航栏  
  4. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  

只要加入这两行代码,就可以实现沉浸式通知栏了。效果如图:



给大家看看这个界面的布局:

[html] view plaincopy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffffff"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MainActivity">  
  8.   
  9.   
  10.     <TextView  
  11.   
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="100dp"  
  14.         android:background="#009959" />  
  15.   
  16.   
  17.     <Button  
  18.         android:layout_width="100dp"  
  19.         android:layout_height="50dp"  
  20.         android:background="#ff669d"/>  
  21.   
  22. </LinearLayout>  

是一个垂直的流布局,但这样,其实还是有问题的,我在textView里面加一些文字,就是绿色的那一块,大家看一下效果:


大家看到了吧,文字和状态栏重叠在一起了,这肯定是不行的,此时需要添加下面的代码:


[html] view plaincopy
  1. android:fitsSystemWindows="true"  
  2. android:clipToPadding="true"  

[html] view plaincopy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.       
  6.     android:fitsSystemWindows="true"  
  7.     android:clipToPadding="true"  
  8.   
  9.     android:background="#ffffff"  
  10.     android:orientation="vertical"  
  11.     tools:context=".MainActivity">  
  12.   
  13.   
  14.   
  15.     <TextView  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="100dp"  
  18.         android:background="#009959" />  
  19.   
  20.   
  21.     <Button  
  22.         android:layout_width="100dp"  
  23.         android:layout_height="50dp"  
  24.         android:background="#ff669d"/>  
  25.   
  26. </LinearLayout>  

大家看红色的那部分,加入那两行以后,界面仍然会是沉浸式的,但状态栏那部分,就不会再重叠了,像加了padding一样,如下图:


大家看图,绿色的textView和红色的一个button都被下移了,状态栏是白色的,是背景linearLayout的颜色。很明显,这也不是我们想要的,我们希望状态栏和我们放在顶部的控件是同一个颜色,同时,控件内容也不和状态栏重复,其实,只要把那两行代码放到我们顶部的控件就可以了。代码如下:


[html] view plaincopy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffffff"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MainActivity">  
  8.   
  9.   
  10.   
  11.     <TextView  
  12.         android:fitsSystemWindows="true"  
  13.         android:clipToPadding="true"  
  14.   
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="100dp"  
  17.         android:background="#009959"  
  18.         android:text="你好,请问你有男朋友吗"/>  
  19.   
  20.   
  21.     <Button  
  22.         android:layout_width="100dp"  
  23.         android:layout_height="50dp"  
  24.         android:background="#ff669d"/>  
  25.   
  26. </LinearLayout>  
就是那两行红色的代码,放在绿色的textView上,这样,就会是下面的效果:

这就是我们想要的了。




版权声明:本文为博主原创文章,未经博主允许不得转载。

Android透明式状态栏、导航栏实现

有很多应用有透明式状态栏、导航栏,表现形式是在不同页面里,状态栏可以与最上面的背景图片或者颜色保持一致。典型的案例就是手Q。...

android 4.4 支持透明状态栏和透明导航栏

@Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedIns...

Android中沉浸式透明状态栏和导航栏的终极解决方案

转载地址:https://github.com/Zackratos/UltimateBar UltimateBar 透明状态栏导航栏、沉浸式状态栏导航栏的终极解决方案 特点:...

ios 导航栏透明及颜色动态变化

让导航栏透明有个简单的方法,就是将一张透明的png图片设置为navgationBar的背景图片,但是这样做的话就不能动态调整其颜色了,下面我们来研究如何用代码来控制其颜色。 新建个工程NavDemo...
  • gmfxch
  • gmfxch
  • 2015年05月06日 09:22
  • 8455

Android 4.4 以上实现透明导航栏和状态栏 Translucent system bar

Android 4.4之前,即使我们打开手机app,我们还总是能看到系统顶部那条黑乎乎的通知栏,这样会使得app稍显突兀。于是Android 4.4开始,便引入了Translucent System ...

android标题栏颜色渐变效果的实现(标题栏随着scrollview的滚动而变化)

之前也是在网上看到这种效果,不过是滚动listview来改变标题栏的颜色,感觉那个应用的比较少,比如我要滚动scrollview来实现呢,那么问题就来了,废话少说,看一下要实现的效果先(这是在项目应用...

iOS 导航栏navigation的translucent属性 影响半透明状态

self.navigationController.navigationBar.translucent = NO; 当translucent设置为NO时,效果是这样的: self.na...
  • worldzhy
  • worldzhy
  • 2015年03月14日 11:09
  • 37782

Android 4.4 后透明状态栏和导航栏效果实现(学习总结)

这里首先用到了一个开源项目: 点击这里 直接上代码:(可以写在一个父类Activity中继承他) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KI...

透明状态栏和导航栏的终极解决方案

背景 在我做 Android 开发之前,我就发现有些 App 的状态栏和导航栏有透明效果,或者是沉浸式效果,比如说酷安的客户端,是像这个样子的 酷安客户端 虽然只是简单的改变,但相对于传统的上下两...

Android 沉浸式状态栏的实现方法、状态栏透明

原文:点击访问 现在越来越多的软件都开始使用沉浸式状态栏了,下面总结一下沉浸式状态栏的两种使用方法 注意!沉浸式状态栏只支持安卓4.4及以上的版本状态栏:4.4上是渐变色,5.0上是完全透明,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 沉浸式透明状态栏与导航栏
举报原因:
原因补充:

(最多只允许输入30个字)