Lollipop: วาดด้านหลัง StatusBar โดยตั้งค่าสีเป็นโปร่งใส

ฉันได้ตั้งค่าสถานะแถบสีเป็นโปร่งใสสำหรับ Lollipop เฉพาะกับบรรทัดต่อไปนี้ในธีมของฉัน:

<item name="android:statusBarColor">@android:color/transparent</item>

ตอนนี้ฉันต้องการวาดมัน แต่ฉันไม่สามารถรับมุมมองใด ๆ ที่อยู่เบื้องหลังมัน ฉันรู้ว่าต้องทำอย่างไรกับwindowTranslucentStatusคุณสมบัตินี้ แต่ไม่ต้องการใช้คุณสมบัตินี้เนื่องจากจะไม่สนใจสีของสถานะที่บาร์ตั้งค่าเป็นโปร่งใส

วิธีที่ # 1:

เพื่อให้บรรลุแถบสถานะที่โปร่งใสอย่างสมบูรณ์คุณต้องใช้statusBarColorซึ่งมีเฉพาะใน API 21 และสูงกว่าเท่านั้น windowTranslucentStatusพร้อมใช้งานบน API 19 ขึ้นไป แต่เพิ่มพื้นหลังสีอ่อนสำหรับแถบสถานะ อย่างไรก็ตามการตั้งค่าwindowTranslucentStatusทำได้อย่างหนึ่งที่การเปลี่ยนstatusBarColorเป็น transparent ไม่ได้: มันตั้งค่าSYSTEM_UI_FLAG_LAYOUT_STABLE และตั้งSYSTEM_UI_FLAG_LAYOUT_FULLSCREENค่าสถานะ วิธีที่ง่ายที่สุดในการรับเอฟเฟกต์เดียวกันคือการตั้งค่าสถานะเหล่านี้ด้วยตนเองซึ่งจะปิดการใช้งานการแทรกอย่างมีประสิทธิภาพที่กำหนดโดยระบบเลย์เอาต์ Android และปล่อยให้คุณจัดการเอง

คุณเรียกสายนี้ตามonCreateวิธีการของคุณ:

getWindow().getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

อย่าลืมตั้งค่าความโปร่งใสใน /res/values-v21/styles.xml:

<item name="android:statusBarColor">@android:color/transparent</item>

หรือตั้งค่าความโปร่งใสโดยทางโปรแกรม:

getWindow().setStatusBarColor(Color.TRANSPARENT);

ข้อดีของวิธีนี้คือสามารถใช้เลย์เอาต์และการออกแบบเดียวกันกับ API 19 ได้โดยการแลกเปลี่ยนแถบสถานะแบบโปร่งใสสำหรับแถบสถานะแบบโปร่งแสงที่มีสีอ่อน

<item name="android:windowTranslucentStatus">true</item>

วิธีที่ # 2:

หากคุณต้องการทาสีภาพพื้นหลังภายใต้แถบสถานะของคุณแทนที่จะวางมุมมองไว้ด้านหลังสิ่งนี้สามารถทำได้โดยเพียงแค่ตั้งค่าพื้นหลังของธีมกิจกรรมของคุณเป็นภาพที่ต้องการและตั้งค่าความโปร่งใสของแถบสถานะดังแสดงในวิธีที่ # 1 นี่เป็นวิธีที่ฉันใช้ในการสร้างภาพหน้าจอสำหรับบทความ Android Policeเมื่อไม่กี่เดือนที่ผ่านมา

วิธีที่ # 3:

หากคุณต้องเพิกเฉยระบบมาตรฐานจะแทรกเลย์เอาต์บางรูปแบบในขณะที่ทำงานในรูปแบบอื่น ๆ วิธีเดียวที่ทำงานได้คือการทำงานกับScrimInsetsFrameLayoutคลาสที่ลิงก์บ่อยๆ แน่นอนว่าบางสิ่งที่ทำในชั้นเรียนนั้นไม่จำเป็นสำหรับทุกสถานการณ์ ตัวอย่างเช่นหากคุณไม่ได้วางแผนที่จะใช้การซ้อนทับแถบสถานะแบบสังเคราะห์ให้ใส่ความคิดเห็นทุกอย่างในinit()เมธอดและอย่าไปเพิ่มอะไรลงในไฟล์ attrs.xml ฉันเคยเห็นวิธีการนี้ใช้งานได้ แต่ฉันคิดว่าคุณจะพบว่ามันนำมาซึ่งความหมายอื่น ๆ ซึ่งอาจเป็นงานที่ต้องทำมากมาย

ฉันยังเห็นว่าคุณไม่เห็นด้วยกับการห่อหลายเค้าโครง ในกรณีของการห่อหนึ่งเลย์เอาต์ภายในของอีกเลย์เอาต์ที่ทั้งสองมีmatch_parentความสูงและความกว้างผลกระทบของประสิทธิภาพมีความสำคัญเกินไปที่จะต้องกังวล ไม่ว่าคุณจะสามารถหลีกเลี่ยงสถานการณ์นั้นได้ทั้งหมดโดยเปลี่ยนคลาสที่ขยายจากเป็นคลาสเลย์เอาต์FrameLayoutชนิดอื่นที่คุณต้องการ มันจะทำงานได้ดี

สิ่งนี้ใช้ได้กับกรณีของฉัน

// Create/Set toolbar as actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

// Check if the version of Android is Lollipop or higher
if (Build.VERSION.SDK_INT >= 21) {

    // Set the status bar to dark-semi-transparentish
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

    // Set paddingTop of toolbar to height of status bar.
    // Fixes statusbar covers toolbar issue
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}

// A method to find height of the status bar
public int getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับ statusBars: youtube.com/watch?v=_mGDMVRO3iE

ลองชุดรูปแบบนี้

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimaryDark">@android:color/transparent</item>
    <item name="colorPrimary">@color/md_blue_200</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

ตรวจสอบให้แน่ใจว่าเค้าโครงของคุณตั้งค่าไว้

android:fitsSystemWindows="false"

แทน

<item name="android:statusBarColor">@android:color/transparent</item>

ใช้สิ่งต่อไปนี้:

<item name="android:windowTranslucentStatus">true</item>

และตรวจสอบให้แน่ใจว่าได้ลบการเติมเต็มด้านบน (ซึ่งเพิ่มโดยค่าเริ่มต้น) บนเค้าโครง 'MainActivity' ของคุณ

โปรดทราบว่าการทำเช่นนี้จะไม่ทำให้แถบสถานะโปร่งใสอย่างสมบูรณ์และจะมีการซ้อนทับ "จางสีดำ" บนแถบสถานะของคุณ

ทางออกจาก Cody Toombs เกือบจะเป็นกลอุบายของฉัน ฉันไม่แน่ใจว่าXamarinเกี่ยวข้องหรือไม่ แต่ตอนนี้ฉันมีวิธีแก้ปัญหาที่ยอมรับได้:

นี่คือการตั้งค่าของฉัน:

ฉันมีโครงการ Android ที่ฉันได้อ้างอิงแพ็คเกจ Android.Support v4 และ v7 ฉันมีการกำหนดสองสไตล์:

ค่า / styles.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <style name="MyStyle" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

ค่า-V21 / styles.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <style name="MyStyle" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

AndroidManifest กำหนดเป้าหมาย "MyStyle":

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.agn.test.test">
    <uses-sdk android:minSdkVersion="10" />
    <application android:allowBackup="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:theme="@style/MyStyle">
    </application>
</manifest>

และสุดท้ายรหัสในกิจกรรมหลัก:

[Activity (Label = "Test", MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity
{
    protected override void OnCreate (Bundle savedInstanceState)
    {
        base.OnCreate (savedInstanceState);

        SetContentView (Resource.Layout.Main);
        //Resource.Layout.Main is just a regular layout, no additional flags. Make sure there is something in there like an imageView, so that you can see the overlay.

        var uiOptions = (int)Window.DecorView.SystemUiVisibility;
        uiOptions ^= (int)SystemUiFlags.LayoutStable;
        uiOptions ^= (int)SystemUiFlags.LayoutFullscreen;
        Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;

        Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds);
    }
}

สังเกตว่าฉันตั้งค่าสถานะ DrawsSystemBarBackgrounds สิ่งนี้สร้างความแตกต่างทั้งหมด

Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds); 

ฉันใช้เวลามากมายในการทำให้ถูกต้องในความเป็นจริงเวลามากเกินไป หวังว่าคำตอบนี้จะช่วยให้ทุกคนพยายามบรรลุสิ่งเดียวกัน

คำตอบของ @Cody Toombs นำไปสู่ปัญหาที่นำเค้าโครงด้านหลังแถบนำทาง ดังนั้นสิ่งที่ฉันพบคือการใช้โซลูชั่นนี้ที่ได้รับจาก @Kriti

นี่คือข้อมูลโค้ด Kotlin ในชื่อเดียวกัน:

if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT < 21) {
    setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, true)
}

if (Build.VERSION.SDK_INT >= 19) {
    window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
}

if (Build.VERSION.SDK_INT >= 21) {
    setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, false)
    getWindow().setStatusBarColor(Color.TRANSPARENT)
}

private fun setWindowFlag(activity: Activity, bits: Int, on: Boolean) {

    val win: Window = activity.getWindow()

    val winParams: WindowManager.LayoutParams = win.getAttributes()
    if (on) {
        winParams.flags = winParams.flags or bits
    } else {
        winParams.flags = winParams.flags and bits.inv()
    }
    win.setAttributes(winParams)
}

คุณต้องเพิ่ม

android:fitsSystemWindows="false"

มุมมองรากของเค้าโครงของคุณ

ฉันมีปัญหาเดียวกันดังนั้นฉันจึงสร้าง ImageView ที่อยู่เบื้องหลังแถบสถานะ API 19+

ตั้งภาพที่กำหนดเองหลังแถบสถานะgist.github.com

public static void setTransparent(Activity activity, int imageRes) {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
        return;
    }
    // set flags
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
    } else {
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }

    // get root content of system window
    //ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
    // rootView.setFitsSystemWindows(true);
    // rootView.setClipToPadding(true);

    ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
    if (contentView.getChildCount() > 1) {
        contentView.removeViewAt(1);
    }

    // get status bar height
    int res = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
    int height = 0;
    if (res != 0)
        height = activity.getResources().getDimensionPixelSize(res);

    // create new imageview and set resource id
    ImageView image = new ImageView(activity);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height);
    image.setLayoutParams(params);
    image.setImageResource(imageRes);
    image.setScaleType(ScaleType.MATRIX);

    // add image view to content view
    contentView.addView(image);
    // rootView.setFitsSystemWindows(true);

}

คุณสามารถใช้ ScrimInsetFrameLayout

https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/ScrimInsetsFrameLayout.java

android: fitsSystemWindows = "true" ควรตั้งค่าในรูปแบบ scrim!

คล้ายกับโซลูชันบางอย่างที่โพสต์ แต่ในกรณีของฉันฉันทำแถบสถานะโปร่งใสและแก้ไขตำแหน่งของแถบการกระทำโดยมีระยะขอบติดลบ

if (Build.VERSION.SDK_INT >= 21) {
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) toolbar.getLayoutParams();
    lp.setMargins(0, -getStatusBarHeight(), 0, 0);
}

และฉันใช้ในแถบเครื่องมือและมุมมองรูท

android:fitsSystemWindows="true"

มีห้องสมุดที่ดีStatusBarUtilจาก@laobieที่จะช่วยให้ง่ายต่อการวาดภาพในแถบสถานะ

เพียงเพิ่มในbuild.gradle:

compile 'com.jaeger.statusbarutil:library:1.4.0'

จากนั้นในชุดกิจกรรม

StatusBarUtil.setTranslucentForImageView(Activity activity, int statusBarAlpha, View viewNeedOffset)

ในการจัดวาง

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

    <ImageView
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:adjustViewBounds="true"
        android:layout_height="wrap_content"
        android:src="@drawable/toolbar_bg"/>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/view_need_offset"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <!-- Your layout code -->
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

สำหรับข้อมูลเพิ่มเติมดาวน์โหลดตัวอย่างหรือโคลนจากหน้า GitHubและเล่นกับคุณสมบัติทั้งหมด

หมายเหตุ: รองรับ KitKat ขึ้นไป

หวังว่าจะช่วยคนอื่น!

ด้วย Android Studio 1.4 โครงการแม่แบบพร้อมชุดรหัสแผ่นบอยเลอร์จะกำหนดOverlayธีมใน AppbarLayout และ / หรือ Toolbar ของคุณ นอกจากนี้ยังตั้งค่าให้แสดงหลังแถบสถานะโดยfitSystemWindowattribute = true ซึ่งจะทำให้แถบเครื่องมือเท่านั้นที่จะแสดงผลโดยตรงใต้แถบสถานะและทุกอย่างอื่นจะแสดงผลใต้แถบเครื่องมือ ดังนั้นโซลูชันที่ให้ไว้ข้างต้นจะไม่ทำงานด้วยตนเอง คุณจะต้องทำการเปลี่ยนแปลงดังต่อไปนี้

• ลบธีมOverlayหรือเปลี่ยนเป็นธีมที่ไม่ใช่ Overlay สำหรับแถบเครื่องมือ

• ใส่รหัสต่อไปนี้ในไฟล์styles-21.xml ของคุณ

  @android: สี / โปร่งใส

• กำหนดธีมนี้ให้กับกิจกรรมที่มีลิ้นชักการนำทางในไฟล์AndroidManifest.xml

สิ่งนี้จะทำให้ลิ้นชักการนำทางแสดงหลังแถบสถานะโปร่งใส

สิ่งที่คุณต้องทำคือตั้งค่าคุณสมบัติเหล่านี้ในธีมของคุณ

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

คำตอบที่ยอมรับใช้งานได้สำหรับฉันโดยใช้ CollapsingToolbarLayout สิ่งสำคัญคือให้สังเกตว่าการsetSytstemUiVisibility()แทนที่การเรียกก่อนหน้านี้ไปยังฟังก์ชันนั้น ดังนั้นหากคุณกำลังใช้ฟังก์ชั่นนั้นอยู่ที่อื่นสำหรับมุมมองเดียวกันคุณจะต้องรวมView.SYSTEM_UI_FLAG_LAYOUT_STABLEและView.SYSTEM_UI_FLAG_LAYOUT_FULLSCREENค่าสถานะหรือจะถูกแทนที่ด้วยการโทรใหม่

นี่เป็นกรณีสำหรับฉันและเมื่อฉันเพิ่มสองธงไปยังสถานที่อื่น ๆ ที่ฉันได้รับการเรียกร้องให้setSystemUiVisibility()คำตอบที่ได้รับการยอมรับทำงานอย่างสมบูรณ์

ฉันจะเพิ่มข้อมูลเพิ่มเติมที่นี่ การพัฒนา Android ล่าสุดทำให้ง่ายต่อการจัดการหลายกรณีในแถบสถานะ ต่อไปนี้เป็นข้อสังเกตของฉันจากstyles.xml

1. สีพื้นหลัง : สำหรับ SDK 21+ ตามคำตอบที่กล่าวมาจำนวนมาก<item name="android:windowTranslucentStatus">true</item> จะทำให้แถบสถานะโปร่งใสและแสดงต่อหน้า UI กิจกรรมของคุณจะใช้พื้นที่ทั้งหมดของด้านบน

2. สีพื้นหลัง : อีกครั้งสำหรับ SDK 21+ <item name="android:statusBarColor">@color/your_color</item>จะให้สีกับแถบสถานะของคุณโดยไม่ส่งผลกระทบใด ๆ

3. อย่างไรก็ตามในอุปกรณ์ต่อมา (Android M / +) ไอคอนเริ่มมาในเฉดสีที่แตกต่างกัน ระบบปฏิบัติการที่สามารถให้สีเข้มของสีเทาไอคอนสำหรับ SDK 23 / + ถ้าคุณแทนที่ของstyles.xmlไฟล์ในโฟลเดอร์และเพิ่มvalues-23 ด้วยวิธีนี้คุณจะให้ผู้ใช้ของคุณเห็นแถบสถานะได้ชัดเจนขึ้นหากแถบสถานะของคุณมีสีอ่อน (คิดว่าแอพของ Google จำนวนมากมีพื้นหลังสีอ่อน แต่ไอคอนจะมองเห็นได้ในสีเทา) ฉันขอแนะนำให้คุณใช้สิ่งนี้หากคุณให้สีกับแถบสถานะของคุณผ่านจุดที่ 2 <item name="android:windowLightStatusBar">true</item>
   
   

4. ในอุปกรณ์ล่าสุด SDK 29 / + มาพร้อมกับระบบแสงกว้างและธีมสีเข้มซึ่งผู้ใช้สามารถควบคุมได้ ในฐานะที่เป็น devs เราควรจะแทนที่ไฟล์สไตล์ของเราในvalues-nightโฟลเดอร์ใหม่เพื่อมอบประสบการณ์ที่แตกต่างให้กับผู้ใช้ 2 คน
   ที่นี่อีกครั้งฉันพบจุด # 2 ที่จะมีประสิทธิภาพในการให้ "สีพื้นหลังเพื่อแถบสถานะ" แต่ระบบไม่เปลี่ยนสีของไอคอนแถบสถานะสำหรับแอพของฉัน เนื่องจากรูปแบบวันของฉันประกอบด้วยธีมที่เบากว่าซึ่งหมายความว่าผู้ใช้จะได้รับการมองเห็นต่ำ (ไอคอนสีขาวบนพื้นหลังที่มีน้ำหนักเบา)
   ปัญหานี้สามารถแก้ไขได้โดยใช้วิธีจุด # 3 หรือโดยการเอาชนะไฟล์สไตล์ในvalues-29โฟลเดอร์และใช้ใหม่ <item name="android:enforceStatusBarContrast">true</item>API วิธีนี้จะบังคับใช้โทนสีเทาเป็นไอคอนโดยอัตโนมัติหากสีพื้นหลังของคุณสว่างเกินไป

นี่คือชุดรูปแบบที่ฉันใช้เพื่อทำสิ่งนี้:

<style name="AppTheme" parent="@android:style/Theme.NoTitleBar">

    <!-- Default Background Screen -->
    <item name="android:background">@color/default_blue</item>
    <item name="android:windowTranslucentStatus">true</item>

</style>

ทางออกที่เหมาะสมคือเปลี่ยนคุณสมบัติใน XML ภายใต้แท็กกิจกรรมเป็นสไตล์ด้านล่าง มันใช้งานได้

  android:theme="@style/Theme.AppCompat.Light.NoActionBar"