1、前言
在android kitkat 有一个新的特性可以设置手机状态栏的背景,让手机整个界面的风格保持一致,看起来非常清爽,在今年的google i/o上的android l默认就是这种风格。来现在看我们怎么加上这个酷黑狂拽掉渣天的功能怎么给我们的程序加上。来先看一下demo效果图。
2、关与kitkat
android 4.4 提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟activity 一样的样式,形成一个完整的主题。
3、设置方法
首先要打开activity的透明主题功能,可以把activity的主题设置继承*.TranslucentDecor 主题,然后设置android:windowTranslucentNavigation 或者android:windowTranslucentStatus的主题属性为true,又或者在activity的代码里面开启FLAG_TRANSLUCENT_NAVIGATION 或是 FLAG_TRANSLUCENT_STATUS的window窗口标识。由于透明主题不能在4.4以前的版本里面使用,所以系统样式跟以前没有区别,也就是看不到任何变化,这是一个兼容模式,这个模式可以兼容到api 10.
激活主题
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- // 创建状态栏的管理实例
- SystemBarTintManager tintManager = new SystemBarTintManager(this);
- // 激活状态栏设置
- tintManager.setStatusBarTintEnabled(true);
- // 激活导航栏设置
- tintManager.setNavigationBarTintEnabled(true);
- }
设置状态栏颜色和图片
- // 设置一个颜色给系统栏
- tintManager.setTintColor(Color.parseColor("#99000FF"));
- // 设置一个样式背景给导航栏
- tintManager.setNavigationBarTintResource(R.drawable.my_tint);
- // 设置一个状态栏资源
- tintManager.setStatusBarTintDrawable(MyDrawable);
4、开源下载地址
https://github.com/hexiaochun/SystemBarTint
状态栏的字体颜色位白色, 如果状态栏背景为白色,这个怎么解决呢?下面这个博客解决了这个问题。
http://blog.csdn.net/jdsjlzx/article/details/50437779
===================
这个特性是andorid4.4支持的,最少要api19才可以使用。
开启FLAG_TRANSLUCENT_NAVIGATION 或是 FLAG_TRANSLUCENT_STATUS
int API_LEVEL = android.os.Build.VERSION.SDK_INT;
if (API_LEVEL >= 19)
{
getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION );
}
- //透明状态栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
- //透明导航栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
首先要在布局文件中加入下面两个属性:
android:clipToPadding="true"
android:fitsSystemWindows="true"
解释一下上面两个布局属性的意思:
android:clipToPadding 定义布局间是否有间距
android:fitsSystemWindows="true" 意思就是设置应用布局时是否考虑系统窗口布局;如果为true,将调整系统窗口布局以适应你自定义的布局。比如系统有状态栏,应用也有状态栏时。看你这个布局代码,恰恰是在定义标题栏样式,所以用到这行代码了。
===================以上是运用第三方包,可以有更多的灵活性之类的==========================
=====================以下是一种非常快捷~的方法~=======================================
代码中设置:
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
可以使用别的办法,主题阿之类的~ 没百度,这样状态栏就会沉浸(和下方View叠加)
布局中添加:
android:fitsSystemWindows="true"
android:clipToPadding="true"
将此代码加入到~ 你想状态栏改变颜色相对应的View上,比如VIew1背景色是红色,加入以后状态栏就是红色的~
布局中设置透明状态栏的方法:
引用主题
android:theme="@android:style/Theme.DeviceDefault.Light.NoActionBar.TranslucentDecor"
android:theme="@android:style/Theme.Holo.Light.NoActionBar.TranslucentDecor"
android:theme="@android:style/Theme.Holo.NoActionBar.TranslucentDecor"
如果使用自定主题,只需在在values-v19 文件夹下添加以下属性
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar" >
<!-- API 19 theme customizations can go here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
<span style="font-family: 'Comic Sans MS';"><span style="white-space:pre"> </span>values-v19代表在API 19+的设备上,用该目录下的styles.xml代替res/values/styles.xml</span>
以下是原帖内容:
这个特性是andorid4.4支持的,最少要api19才可以使用。下面介绍一下使用的方法,非常得简单:
- public class MainActivity extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //透明状态栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
- //透明导航栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
- }
- }
- //透明状态栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
- //透明导航栏
- getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
只要加入这两行代码,就可以实现沉浸式通知栏了。效果如图:
给大家看看这个界面的布局:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#ffffff"
- android:orientation="vertical"
- tools:context=".MainActivity">
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dp"
- android:background="#009959" />
- <Button
- android:layout_width="100dp"
- android:layout_height="50dp"
- android:background="#ff669d"/>
- </LinearLayout>
是一个垂直的流布局,但这样,其实还是有问题的,我在textView里面加一些文字,就是绿色的那一块,大家看一下效果:
大家看到了吧,文字和状态栏重叠在一起了,这肯定是不行的,此时需要添加下面的代码:
- android:fitsSystemWindows="true"
- android:clipToPadding="true"
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:fitsSystemWindows="true"
- android:clipToPadding="true"
- android:background="#ffffff"
- android:orientation="vertical"
- tools:context=".MainActivity">
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dp"
- android:background="#009959" />
- <Button
- android:layout_width="100dp"
- android:layout_height="50dp"
- android:background="#ff669d"/>
- </LinearLayout>
大家看红色的那部分,加入那两行以后,界面仍然会是沉浸式的,但状态栏那部分,就不会再重叠了,像加了padding一样,如下图:
大家看图,绿色的textView和红色的一个button都被下移了,状态栏是白色的,是背景linearLayout的颜色。很明显,这也不是我们想要的,我们希望状态栏和我们放在顶部的控件是同一个颜色,同时,控件内容也不和状态栏重复,其实,只要把那两行代码放到我们顶部的控件就可以了。代码如下:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#ffffff"
- android:orientation="vertical"
- tools:context=".MainActivity">
- <TextView
- android:fitsSystemWindows="true"
- android:clipToPadding="true"
- android:layout_width="match_parent"
- android:layout_height="100dp"
- android:background="#009959"
- android:text="你好,请问你有男朋友吗"/>
- <Button
- android:layout_width="100dp"
- android:layout_height="50dp"
- android:background="#ff669d"/>
- </LinearLayout>
这就是我们想要的了。
这个方法只有在andorid4.4中才能够使用,以下的不能使用,兼容性问题解决方案(自己还没查看~)~~~
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //透明状态栏
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
- Window window = getWindow();
- // Translucent status bar
- window.setFlags(
- WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
- WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
- }
- // 强制更新
- UmengUpdateAgent.setDialogListener(new UmengDialogButtonListener() {
- @Override
- public void onClick(int status) {
- switch (status) {
- case UpdateStatus.Update:
- break;
- default:
- // close the app
- AppToast.showShortText(MainUIActivity.this,
- "非常抱歉,您需要更新应用才能继续使用");
- MainUIActivity.this.finish();
- }
- }
- });
- }
首页(特产惠)布局的加载如下代码,大家可以看到根据当前api是否大于4.4,加载不同的布局,归根到底就是标题栏的不同。
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_home, container, false);
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
- view = inflater.inflate(R.layout.fragment_home_v19, container, false);
- }
- return view;
- }
fragment_home.xml
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@color/app_bg"
- android:orientation="vertical"
- >
- <!--其他布局-->
- <RelativeLayout
- android:id="@+id/index_title_bar"
- android:layout_alignParentTop="true"
- style="@style/title_bar_style_home"
- android:fitsSystemWindows="true"
- android:gravity="center"
- >
- <TextView
- android:id="@+id/current_city_text"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_centerVertical="true"
- android:layout_marginLeft="10dp"
- android:drawableTop="@drawable/ic_location"
- android:drawablePadding="2dp"
- android:text="北京"
- android:textColor="#fff"
- android:textSize="10sp" />
- <TextView
- android:id="@+id/tv_title"
- android:layout_centerVertical="true"
- android:layout_width="match_parent"
- android:layout_height="33dp"
- android:gravity="center_vertical"
- android:layout_weight="10"
- android:background="@drawable/shape_edit_corners_bg"
- android:hint="请输入商品名称"
- android:imeOptions="actionSearch"
- android:singleLine="true"
- android:textColor="@color/black_text"
- android:textColorHint="#ffb6b6b6"
- android:textSize="14sp"
- android:maxLength="10"
- android:paddingLeft="5dp"
- android:paddingRight="3dp"
- android:drawableLeft="@drawable/ic_search"
- android:drawableRight="@drawable/bg_btn_voice"
- android:layout_toLeftOf="@+id/image_right"
- android:layout_toRightOf="@+id/current_city_text"
- android:layout_marginLeft="10dp"
- android:layout_marginRight="10dp"/>
- <TextView
- android:id="@+id/image_right"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_centerVertical="true"
- android:layout_marginRight="10dp"
- android:drawableTop="@drawable/ic_category"
- android:drawablePadding="2dp"
- android:text="分类"
- android:textColor="#fff"
- android:textSize="10sp" />
- </RelativeLayout>
- </RelativeLayout>
fragment_home_v19.xml
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@color/app_bg"
- android:orientation="vertical"
- >
- <!-- 其他布局 -->
- <RelativeLayout
- android:id="@+id/index_title_bar"
- android:layout_alignParentTop="true"
- style="@style/title_bar_style_home_v19"
- android:fitsSystemWindows="true"
- android:gravity="center"
- android:paddingTop="@dimen/title_bar_padding_top"
- >
- <TextView
- android:id="@+id/current_city_text"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_centerVertical="true"
- android:layout_marginLeft="10dp"
- android:drawableTop="@drawable/ic_location"
- android:drawablePadding="2dp"
- android:text="北京"
- android:textColor="#fff"
- android:textSize="10sp" />
- <TextView
- android:id="@+id/tv_title"
- android:layout_centerVertical="true"
- android:layout_width="match_parent"
- android:layout_height="33dp"
- android:gravity="center_vertical"
- android:layout_weight="10"
- android:background="@drawable/shape_edit_corners_bg"
- android:hint="请输入商品名称"
- android:imeOptions="actionSearch"
- android:singleLine="true"
- android:textColor="@color/black_text"
- android:textColorHint="#ffb6b6b6"
- android:textSize="14sp"
- android:maxLength="10"
- android:paddingLeft="5dp"
- android:paddingRight="3dp"
- android:drawableLeft="@drawable/ic_search"
- android:drawableRight="@drawable/bg_btn_voice"
- android:layout_toLeftOf="@+id/image_right"
- android:layout_toRightOf="@+id/current_city_text"
- android:layout_marginLeft="10dp"
- android:layout_marginRight="10dp"/>
- <TextView
- android:id="@+id/image_right"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_centerVertical="true"
- android:layout_marginRight="10dp"
- android:drawableTop="@drawable/ic_category"
- android:drawablePadding="2dp"
- android:text="分类"
- android:textColor="#fff"
- android:textSize="10sp" />
- </RelativeLayout>
- </RelativeLayout>
- <style name="title_bar_style_home"><!-- 首页用 -->
- <item name="android:background">#ffc6003b</item>
- <item name="android:paddingLeft">0.0dip</item>
- <item name="android:paddingRight">0.0dip</item>
- <item name="android:layout_width">fill_parent</item>
- <item name="android:layout_height">48dp</item>
- </style>
- <style name="title_bar_style_home_v19"><!-- 首页用v19 -->
- <item name="android:background">#ffc6003b</item>
- <item name="android:paddingLeft">0.0dip</item>
- <item name="android:paddingRight">0.0dip</item>
- <item name="android:layout_width">fill_parent</item>
- <item name="android:layout_height">65dp</item>
- </style>
<dimen name="title_bar_padding_top">0dp</dimen>values-v19/dimens.xml
<dimen name="title_bar_padding_top">20dp</dimen>
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_life, container, false);
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
- view = inflater.inflate(R.layout.fragment_life_v19, container, false);
- }
- return view;
- }
fragment_life.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/root_layout"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <include layout="@layout/title_bar_main" />
- <!-- 其他布局 -->
- </LinearLayout>
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/main_title_bar"
- style="@style/title_bar_style_main"
- android:fitsSystemWindows="true"
- >
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#FFFEFEFE">
- <TextView
- android:id="@+id/title_text"
- style="@style/title_text_style"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:ellipsize="end"
- android:singleLine="true" />
- <ImageView
- android:id="@+id/right_img"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_centerVertical="true"
- android:contentDescription="@null"
- android:paddingLeft="15dp"
- android:paddingRight="15dp"
- android:src="@drawable/ic_notice"
- android:visibility="gone"/>
- </RelativeLayout>
- </LinearLayout>
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/root_layout"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <include layout="@layout/title_bar_main_v19" />
- <!-- 其他布局 -->
- </LinearLayout>
title_bar_main_v19.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/main_title_bar"
- style="@style/title_bar_style_main_19"
- android:fitsSystemWindows="true"
- android:paddingTop="@dimen/title_bar_padding_top">
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#FFFEFEFE">
- <TextView
- android:id="@+id/title_text"
- style="@style/title_text_style"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:ellipsize="end"
- android:singleLine="true" />
- <ImageView
- android:id="@+id/right_img"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_centerVertical="true"
- android:contentDescription="@null"
- android:paddingLeft="15dp"
- android:paddingRight="15dp"
- android:src="@drawable/ic_notice"
- android:visibility="gone"/>
- </RelativeLayout>
- </LinearLayout>
style.xml
- <style name="title_bar_style_main">
- <item name="android:background">#FFFEFEFE</item>
- <item name="android:paddingLeft">0.0dip</item>
- <item name="android:paddingRight">0.0dip</item>
- <item name="android:layout_width">fill_parent</item>
- <item name="android:layout_height">48dp</item>
- <item name="android:gravity">center_vertical</item>
- </style>
- <style name="title_bar_style_main_19">
- <item name="android:background">@android:color/black</item>
- <item name="android:paddingLeft">0.0dip</item>
- <item name="android:paddingRight">0.0dip</item>
- <item name="android:layout_width">fill_parent</item>
- <item name="android:layout_height">68dp</item>
- <item name="android:gravity">center_vertical</item>
- </style>