Android沉浸式(侵入式)标题栏(状态栏)Status（一）

最新推荐文章于 2021-05-30 18:07:21 发布

贵公子

最新推荐文章于 2021-05-30 18:07:21 发布

阅读量472

点赞数

分类专栏：开源框架/项目

开源框架/项目专栏收录该内容

377 篇文章 5 订阅

订阅专栏

Android沉浸式(侵入式)标题栏(状态栏)Status（一）

现在越来越多的APP设计采用这种称之为沉浸式状态栏（Status）的设计，这种沉浸式状态栏又称之“侵入式”状态栏或标题栏，在Android中实现，方案多，也不难。以下以xml方式实现：

三步：
（1）我的例子中，Androidmanifest.xml文件中定义的app的style为AppTheme：

[html] view plain copy

print ?

<?xml version=“1.0” encoding=“utf-8”?>
<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
package=“zhangphil.myapplication”>
<application
android:allowBackup=“true”
android:icon=“@mipmap/ic_launcher”
android:label=“@string/app_name”
android:supportsRtl=“true”
android:theme=“@style/AppTheme”>
<activity android:name=“.MainActivity”>
<intent-filter>
<action android:name=“android.intent.action.MAIN” />
<category android:name=“android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
</application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="zhangphil.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

上面的Androidmanifest.xml是Android Studio自动生成的，同时Android Studio自动在res/values目录下生成的styles.xml文件中定义了AppTheme，我把这个AppTheme重新修改为：

[html] view plain copy

print ?

<resources>
<style name=“AppTheme” parent=“android:Theme.Holo.Light.NoActionBar”>
</style>
</resources>

<resources>

    <style name="AppTheme" parent="android:Theme.Holo.Light.NoActionBar">

    </style>

</resources>

（2）再为Android v19准备一套styles.xml文件。在res/目录下新建一个名为values-v19目录，在res/values-v21目录下再建一个styles.xml文件，注意名字和AppTheme相同：

[html] view plain copy

print ?

<resources>
<style name=“AppTheme” parent=“android:Theme.Holo.NoActionBar.TranslucentDecor”>
<item name=“android:windowTranslucentStatus”>true</item>
<item name=“android:windowTranslucentNavigation”>true</item>
</style>
</resources>

<resources>

    <style name="AppTheme" parent="android:Theme.Holo.NoActionBar.TranslucentDecor">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

</resources>

（3）写一个简单的MainActivity.java测试，MainActivity.java代码（特别注意！本例的MainActivity继承自Activity而不是AppCompatActivity，如果继承自AppCompatActivity，显示结果达不到本例结果）：

[java] view plain copy

print ?

package zhangphil.myapplication;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

package zhangphil.myapplication;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

MainActivity.java加载的activity_main.xml代码：

[html] view plain copy

print ?

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:background=“@android:color/holo_orange_dark”
android:orientation=“vertical”>
<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_gravity=“center”
android:background=“@android:color/white”
android:text=“zhang phil @ csdn” />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_dark"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:text="zhang phil @ csdn" />
</LinearLayout>

代码运行结果：

TextView跑到顶部状态栏下面去了，这显然不合适，在activity_main.xml代码中增加android:fitsSystemWindows=”true” ：

[html] view plain copy

print ?

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:background=“@android:color/holo_orange_dark”
android:fitsSystemWindows=“true”
android:orientation=“vertical”>
<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_gravity=“center”
android:background=“@android:color/white”
android:text=“zhang phil @ csdn” />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_dark"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:text="zhang phil @ csdn" />
</LinearLayout>

代码运行结果：

显示就正常了。