android状态栏一体化、沉浸式状态栏(兼容低版本)-阿里云开发者社区

开发者社区> 一叶飘舟> 正文

android状态栏一体化、沉浸式状态栏(兼容低版本)

简介:
+关注继续查看

摘要 Android 沉浸式状态栏、状态栏一体化、透明状态栏、仿ios透明状态栏


Google 在 4.4 给全屏阅读文字或玩游戏这种情景增加了透明状态栏和透明导航栏的功能。

首先上两张乐家驿站应用的截图,实际效果大家也可以下载体验,乐家驿站下载:http://www.wandoujia.com/apps/com.haier.cabinet.customer


    


注意:本文是自定义标题栏,不用android默认自带的标题栏。

第一步:设置 Acitivity 所在 window 的属性

    

@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);
        }

      

    }


        //透明状态栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //透明导航栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

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


设置状态栏的颜色

状态栏的颜色跟两个属性有关:
    android:fitsSystemWindows="true"
    android:clipToPadding="true"

只要在某个view设置了该熟悉,那么状态栏的颜色就跟该view的背景色保持一致。
布局文件:
<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>

由于我们要实现的是状态栏和顶部的控件是同一个颜色,同时,控件内容也不和状态栏重复,所以只要把那两行代码放到我们顶部的控件就可以了。

上面内容部分来自博客http://blog.csdn.net/carlos1992/article/details/46773059,感谢原作者。

下面我们来解决兼容性问题。

犹豫这个特性是andorid4.4支持的,最少要api19才可以使用,那么低于4.4的怎么办呢?这里我们还是通过自定义标题栏的方式解决。

首先我们来看怎么实现文章开头特产惠界面的效果。

本应用是FragmentAcitity+Framgment实现,故主界面是四个fragment组成。
MainUIAcitivy中onCreate方法:
@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"
    >

        <!--其他布局-->

    <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.xml
<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>

values/dimens.xml
<dimen name="title_bar_padding_top">0dp</dimen>
values-v19/dimens.xml
<dimen name="title_bar_padding_top">20dp</dimen>

首页(特产惠)的关键代码就这么多,下面我们来重点看第二个fragment(生活+)。

跟首页不同的是,生活+界面的标题栏是白色的,如果实现侵色,状态栏也是白色的,这样状态栏的白色字就看不见了,下面给出解决方法。

解决的办法还是自定义标题栏。

原理:自定义标题栏(包含状态栏),背景为黑色,也就是状态栏的颜色。高度为68dp,然后设置paddingTop=20dp,这个20dp就是状态栏的高度。剩下的48dp就是我们真正的标题栏。

首先还是根据当前api是否大于4.4,加载不同的布局,归根到底就是状态栏的不同。
@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>




title_bar_main.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"
    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>

fragment_life_v19.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_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>

就这么简单,希望大家能够提出意见!


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SQL Server 2008R2 或更高版本数据库向低版本降级方法
SQL Server 2008R2 或更高版本数据库向低版本降级方法 前言 SQL Server2008R2或更高版本的数据库mdf文件无法直接被低版本SQL Server打开,但可以采取生成脚本的方式曲线降级,下面就记录了数据库降级过程。
1655 0
22、Python与设计模式--状态模式
#一、电梯控制器 电梯在我们周边随处可见,电梯的控制逻辑中心是由电梯控制器实现的。电梯的控制逻辑,即使简单点设计,把状态分成开门状态,停止状态和运行状态,操作分成开门、关门、运行、停止,那流程也是很复杂的。首先,开门状态不能开门、运行、停止;停止状态不能关门,停止;运行状态不能开门、关门、运行。要用一个一个if…else…实现,首先代码混乱,不易维护;二是不易扩展。至于各种设计原则什么的……
3792 0
恢复低版本的FlashPlayer
做页游开发,经常会遇到一些很奇怪的问题。我最近就遇到一个问题:用户进入游戏,只显示游戏部分界面,chrome浏览器是正常的,就IE死活不行,而我自己的IE却又是可以的(都是IE8)。右击看了一下flash player的版本号,她的ie8使用的flash player版本号比她本机的chrome要高,比我的也要高,而且是非debug版本。
609 0
WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了。但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案。于是我模拟WebSocket在浏览器上的行为,用AS3写了个兼容的版本。
2010 0
android(cm11)状态栏源码分析(一)
版权声明:您好,转载请留下本人博客的地址,谢谢 https://blog.csdn.net/hongbochen1223/article/details/50216563 (一):写在前面 最近由于工作需要,需要了解CM11中的有关于StatusBar相关的内容。
932 0
Android屏幕适配之状态栏导航栏半透明、全透明(5.0以上去阴影),方法多样
1.1 StatusBar半透明用StatusBarView实现(4.4以上有效) 1.2 StatusBar半透明用setStatusBarColor实现(5.0以上有效) 2.1 StatusBar全透明用fitSystemWindows实现(4.
3877 0
MySql状态查看方法 MySql如何查看连接数和状态?
原文:MySql状态查看方法 MySql如何查看连接数和状态? 如果是root帐号,你能看到所有用户的当前连接。如果是其它普通帐号,只能看到自己占用的连接  怎么进入mysql命令行呢? mysql的安装目录下面有个bin目录,先用命令行进入该目录,然后用 mysql -uroot -p123456 来登录(注意:用户名和密码不用包含“”)  命令: show processlist; 如果是root帐号,你能看到所有用户的当前连接。
811 0
低版本的无法打开高版本的VM
低版本VM工具運行高版本VM環境時,會彈出不支持虚拟机配置。例如:使用VM8工具打開VM9配置的VM環境,會彈出下面的提示   在遇到這種情況的時候,一般都會選擇升級VM工具。如果不想升級VM工具,可以通過修改VM環境的配置,使VM環境可以正常的run起來。
594 0
+关注
1635
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载