关闭

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

标签: 沉浸式透明状态栏沉浸式透明状态栏与导航栏androidui
1671人阅读 评论(0) 收藏 举报
分类:

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上,这样,就会是下面的效果:

这就是我们想要的了。




1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:40245次
    • 积分:1003
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:8篇
    • 译文:3篇
    • 评论:14条
    博客公告

    学习讨论群:187018435

    文章分类
    最新评论