Navigation Drawer กึ่งโปร่งใสบนแถบสถานะไม่ทำงาน

ฉันกำลังทำโปรเจ็กต์ Android และกำลังใช้งาน Navigation Drawer ฉันกำลังอ่านผ่านใหม่วัสดุการออกแบบ Specและรายการตรวจสอบการออกแบบวัสดุ
ข้อมูลจำเพาะระบุว่าบานหน้าต่างเลื่อนออกควรลอยอยู่เหนือสิ่งอื่นใดรวมถึงแถบสถานะและเป็นแบบกึ่งโปร่งใสบนแถบสถานะ

แผงการนำทางของฉันอยู่เหนือแถบสถานะ แต่ไม่มีความโปร่งใสใด ๆ ฉันได้ติดตามโค้ดจากโพสต์SOนี้ตามที่แนะนำในบล็อกสปอตนักพัฒนาของ Google ลิงก์ด้านบนฉันจะใช้ DrawerLayout เพื่อแสดงบน ActionBar / Toolbar และภายใต้แถบสถานะได้อย่างไร .

ด้านล่างนี้คือเลย์เอาต์ XML ของฉัน

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/my_awesome_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/appPrimaryColour" />
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout"
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true"
        android:background="#ffffff">
        <ListView android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"></ListView>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

ด้านล่างนี้คือธีมแอปของฉัน

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/appPrimaryColour</item>
        <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
        <item name="colorAccent">@color/appPrimaryColour</item>
        <item name="windowActionBar">false</item>
        <item name="windowActionModeOverlay">true</item>

    </style>

ด้านล่างนี้คือธีมแอป v21 ของฉัน

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/appPrimaryColour</item>
    <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
    <item name="colorAccent">@color/appPrimaryColour</item>
    <item name="windowActionBar">false</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

ด้านล่างนี้คือเมธอด onCreate ของฉัน

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

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout)findViewById(R.id.my_drawer_layout);
    mDrawerList = (ListView)findViewById(R.id.left_drawer);

    mDrawerLayout.setStatusBarBackgroundColor(
        getResources().getColor(R.color.appPrimaryColourDark));

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        LinearLayout linearLayout = 
            (LinearLayout)findViewById(R.id.linearLayout);
        linearLayout.setElevation(30);
    }

ด้านล่างนี้เป็นภาพหน้าจอของลิ้นชักการนำทางของฉันที่แสดงด้านบนไม่โปร่งใส

พื้นหลังแถบสถานะของคุณคือสีขาว, LinearLayoutสีพื้นหลังของลิ้นชักของคุณ ทำไม? คุณคือการตั้งค่าfitsSystemWindows="true"สำหรับคุณDrawerLayoutและLinearLayoutภายในนั้น สิ่งนี้ทำให้คุณLinearLayoutขยายด้านหลังแถบสถานะ (ซึ่งโปร่งใส) ดังนั้นทำให้พื้นหลังสำหรับส่วนลิ้นชักของแถบสถานะเป็นสีขาว

หากคุณไม่ต้องการให้ลิ้นชักของคุณขยายออกไปด้านหลังแถบสถานะ (ต้องการให้มีพื้นหลังกึ่งโปร่งใสสำหรับแถบสถานะทั้งหมด) คุณสามารถทำได้สองสิ่ง:

1) คุณสามารถลบค่าพื้นหลังใด ๆ ออกจากคุณLinearLayoutและระบายสีพื้นหลังของเนื้อหาของคุณได้ หรือ

2) คุณสามารถลบออกfitsSystemWindows="true"จากLinearLayoutไฟล์. ฉันคิดว่านี่เป็นแนวทางที่สมเหตุสมผลและสะอาดกว่า นอกจากนี้คุณยังจะหลีกเลี่ยงไม่ให้มีเงาปรากฏอยู่ใต้แถบสถานะซึ่งลิ้นชักการนำทางของคุณจะไม่ขยายออกไป

หากคุณต้องการลิ้นชักของคุณเพื่อขยายหลังบาร์สถานะและมีแถบกึ่งโปร่งใสสถานะขนาดซ้อนทับคุณสามารถใช้ScrimInsetFrameLayoutเป็นภาชนะสำหรับเนื้อหาลิ้นชักของคุณ (กListView) app:insetForeground="#4000"และตั้งค่าพื้นหลังแถบสถานะใช้ แน่นอนคุณสามารถเปลี่ยน#4000เป็นอะไรก็ได้ที่คุณต้องการ อย่าลืมเก็บไว้fitsSystemWindows="true"ที่นี่!

หรือถ้าคุณไม่ต้องการวางซ้อนเนื้อหาของคุณและแสดงเฉพาะสีทึบคุณก็สามารถตั้งค่าพื้นหลังของคุณLinearLayoutเป็นอะไรก็ได้ที่คุณต้องการ อย่าลืมตั้งค่าพื้นหลังของเนื้อหาของคุณแยกต่างหาก!

แก้ไข:คุณไม่จำเป็นต้องจัดการกับสิ่งนี้อีกต่อไป โปรดดูไลบรารีการสนับสนุนการออกแบบเพื่อการใช้งาน Navigation Drawer / View ที่ง่ายขึ้น

สิ่งที่คุณต้องทำคือใช้สีกึ่งโปร่งใสสำหรับแถบสถานะ เพิ่มบรรทัดเหล่านี้ในธีม v21 ของคุณ:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/desired_color</item>

อย่าลืมว่าcolor(ทรัพยากร) ต้องอยู่ในรูปแบบของ#AARRGGBB. ซึ่งหมายความว่าสีจะรวมค่าอัลฟาด้วย

ทำไมไม่ใช้สิ่งที่คล้ายกันนี้?

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

    <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="#80111111"/>
</android.support.v4.widget.DrawerLayout>

โค้ดด้านบนใช้ทรัพยากรอัลฟ่าในการandroid:backgroundแสดงความโปร่งใสภายในแถบการทำงาน

มีวิธีอื่นในการทำเช่นนี้ผ่านรหัสดังที่คำตอบอื่น ๆ แสดง คำตอบของฉันข้างต้นจำเป็นในไฟล์เลย์เอาต์ xml หรือไม่ซึ่งในความคิดของฉันแก้ไขได้ง่าย

คำตอบทั้งหมดที่กล่าวถึงนี้เก่าและยาวเกินไป ทางออกที่ดีที่สุดและสั้นที่สุดที่ทำงานร่วมกับ Navigationview ล่าสุดคือ

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);

    try {
        //int currentapiVersion = android.os.Build.VERSION.SDK_INT;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP){
            // Do something for lollipop and above versions

        Window window = getWindow();

        // clear FLAG_TRANSLUCENT_STATUS flag:
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        // finally change the color to any color with transparency

         window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDarktrans));}

    } catch (Exception e) {

        Crashlytics.logException(e);

    }
}

นี่จะเปลี่ยนสีแถบสถานะของคุณเป็นโปร่งใสเมื่อคุณเปิดลิ้นชัก

ตอนนี้เมื่อคุณปิดลิ้นชักคุณจะต้องเปลี่ยนสีแถบสถานะอีกครั้งเป็นสีเข้มดังนั้นคุณสามารถทำได้ด้วยวิธีนี้

@Override
public void onDrawerClosed(View drawerView) {
   super.onDrawerClosed(drawerView);
    try {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            // Do something for lollipop and above versions

            Window window = getWindow();

            // clear FLAG_TRANSLUCENT_STATUS flag:
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

            // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

            // finally change the color again to dark
            window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
        }
    } catch (Exception e) {
        Crashlytics.logException(e);
    }
}

จากนั้นในเค้าโครงหลักให้เพิ่มบรรทัดเดียวเช่น

            android:fitsSystemWindows="true"

และเค้าโครงลิ้นชักของคุณจะเป็นอย่างไร

            <android.support.v4.widget.DrawerLayout     
            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:id="@+id/drawer_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

และมุมมองการนำทางของคุณจะมีลักษณะดังนี้

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer"
        />

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

คุณต้องห่อเค้าโครงลิ้นชักการนำทางไว้ในไฟล์ScrimLayout.

ScrimLayoutวาดพื้นสี่เหลี่ยมกึ่งโปร่งใสมากกว่ารูปแบบลิ้นชักนำทางของคุณ ในการดึงขนาดของสิ่งที่ใส่เข้าไปเพียงแค่แทนที่fitSystemWindowsในScrimLayoutไฟล์.

@Override
protected boolean fitSystemWindows(Rect insets) {
    mInsets = new Rect(insets);
    return true;
}

ต่อมาแทนที่onDrawเพื่อวาดสี่เหลี่ยมผืนผ้ากึ่งโปร่งใส

ตัวอย่างเช่นการดำเนินการสามารถพบได้ในแหล่งที่มาของ Google IO App ที่นี่คุณสามารถดูวิธีการที่จะนำมาใช้ในรูปแบบ XML

หากคุณต้องการให้แผงการนำทางอยู่เหนือแถบสถานะและเป็นแบบกึ่งโปร่งใสเหนือแถบสถานะ ที่มาของแอป Google I / O Androidเป็นทางออกที่ดี ( APK ใน Play Storeไม่ได้รับการอัปเดตเป็นเวอร์ชันล่าสุด)

ก่อนอื่นคุณต้องมีScrimInsetFrameLayout

/*
* Copyright 2014 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* A layout that draws something in the insets passed to {@link #fitSystemWindows(Rect)}, i.e. the area above UI chrome
* (status and navigation bars, overlay action bars).
*/
public class ScrimInsetsFrameLayout extends FrameLayout {
    private Drawable mInsetForeground;

    private Rect mInsets;
    private Rect mTempRect = new Rect();
    private OnInsetsCallback mOnInsetsCallback;

    public ScrimInsetsFrameLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        final TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ScrimInsetsView, defStyle, 0);
        if (a == null) {
            return;
        }
        mInsetForeground = a.getDrawable(R.styleable.ScrimInsetsView_insetForeground);
        a.recycle();

        setWillNotDraw(true);
    }

    @Override
    protected boolean fitSystemWindows(Rect insets) {
        mInsets = new Rect(insets);
        setWillNotDraw(mInsetForeground == null);
        ViewCompat.postInvalidateOnAnimation(this);
        if (mOnInsetsCallback != null) {
            mOnInsetsCallback.onInsetsChanged(insets);
        }
        return true; // consume insets
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        int width = getWidth();
        int height = getHeight();
        if (mInsets != null && mInsetForeground != null) {
            int sc = canvas.save();
            canvas.translate(getScrollX(), getScrollY());

            // Top
            mTempRect.set(0, 0, width, mInsets.top);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Bottom
            mTempRect.set(0, height - mInsets.bottom, width, height);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Left
            mTempRect.set(0, mInsets.top, mInsets.left, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Right
            mTempRect.set(width - mInsets.right, mInsets.top, width, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            canvas.restoreToCount(sc);
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(this);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(null);
        }
    }

    /**
     * Allows the calling container to specify a callback for custom processing when insets change (i.e. when
     * {@link #fitSystemWindows(Rect)} is called. This is useful for setting padding on UI elements based on
     * UI chrome insets (e.g. a Google Map or a ListView). When using with ListView or GridView, remember to set
     * clipToPadding to false.
     */
    public void setOnInsetsCallback(OnInsetsCallback onInsetsCallback) {
        mOnInsetsCallback = onInsetsCallback;
    }

    public static interface OnInsetsCallback {
        public void onInsetsChanged(Rect insets);
    }
}

จากนั้นในเค้าโครง XML ของคุณให้เปลี่ยนส่วนนี้

<LinearLayout android:id="@+id/linearLayout"
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:fitsSystemWindows="true"
    android:background="#ffffff">
    <ListView android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"></ListView>
</LinearLayout>

เปลี่ยน LinearLayout เป็น ScrimInsetFrameLayout ของคุณเช่นนี้

<com.boardy.util.ScrimInsetFrameLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout"
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:fitsSystemWindows="true"
    app:insetForeground="#4000">
    <ListView android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"></ListView>
</com.boardy.util.ScrimInsetFrameLayout>

ฉันมีคุณลักษณะที่คล้ายกันที่จะใช้ในโครงการของฉัน และเพื่อให้ลิ้นชักของฉันโปร่งใสฉันเพียงแค่ใช้ความโปร่งใสสำหรับสีฐานสิบหก ใช้เลขฐานสิบหก 6 หลักคุณจะมีเลขฐานสิบหก 2 หลักสำหรับแต่ละค่าเป็นสีแดงสีเขียวและสีน้ำเงินตามลำดับ แต่ถ้าคุณใส่ตัวเลขสองหลักเพิ่มเติม (เลขฐานสิบหก 8 หลัก) คุณจึงมี ARGB (ตัวเลขสองหลักสำหรับค่าอัลฟา) ( ดูที่นี่ )

นี่คือค่า Hex Opacity: สำหรับตัวเลข 2 หลักเพิ่มเติม

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

ตัวอย่าง: หากคุณมีสีฐานสิบหก (# 111111) เพียงใส่ค่าความทึบค่าใดค่าหนึ่งเพื่อให้ได้ความโปร่งใส ดังนี้: (# 11111100)

ลิ้นชักของฉันไม่ครอบคลุมแถบการทำงาน (เช่นของคุณ) แต่สามารถใช้ความโปร่งใสในกรณีเหล่านี้ได้เช่นกัน นี่คือรหัสของฉัน:

     <ListView
          android:id="@+id/left_drawer"
          android:layout_width="240dp"
          android:layout_height="match_parent"
          android:layout_gravity="start"
          android:background="#11111100"
          android:choiceMode="singleChoice"
          android:divider="@android:color/transparent"
          android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

และนี่คือบทความอื่นที่สามารถช่วยให้คุณเข้าใจรหัสอัลฟาในสีฐานสิบหก

โซลูชันที่มีอยู่ค่อนข้างล้าสมัย นี่คือโซลูชันล่าสุดที่ควรทำงานได้อย่างสมบูรณ์บนไลบรารี AndroidX หรือ Material

• เพิ่มandroid:fitsSystemWindows="true"ในมุมมองรูทของเค้าโครงของคุณซึ่งเป็น DrawerLayout สำหรับกรณีของคุณ

  สิ่งนี้จะบอกให้ View ใช้ทั้งหน้าจอสำหรับการวัดและเค้าโครงโดยซ้อนทับกับแถบสถานะ

• เพิ่มสิ่งต่อไปนี้ในสไตล์ XML ของคุณ

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

  windowTranslucentStatusจะทำให้แถบสถานะโปร่งใส
  windowDrawsSystemBarBackgroundsบอกให้แถบสถานะวาดอะไรก็ได้แทนที่จะเป็นโมฆะสีดำ

• โทรDrawerLayout.setStatusBarBackground()หรือDrawerLayout.setStatusBarBackgroundColor()ในกิจกรรมหลักของคุณ

  สิ่งนี้จะบอก DrawerLayout ให้ระบายสีพื้นที่แถบสถานะ

คำตอบทั้งหมดที่นี่ซับซ้อนมากขอบอกรหัสง่ายๆตรงไปตรงมา ภายใต้สไตล์ AppTheme ของคุณเพิ่มบรรทัดของรหัสนี้และคุณจะได้รับแถบสถานะสีเทากึ่งโปร่งใสเมื่อคุณเปิดลิ้นชัก

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

สิ่งนี้จะทำให้มันใช้งานได้