【问题标题】:Put Navigation Drawer Under Status Bar将导航抽屉放在状态栏下
【发布时间】:2015-05-30 01:03:08
【问题描述】:

我正在尝试让我的导航抽屉位于状态栏下方。我已广泛阅读有关 ScrimInsetsFrameLayout 视图的内容,并尝试实现它,但由于某种原因它不会失败。

这是我使用/编写的代码。

XML 抽屉布局:

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <include layout="@layout/toolbar" />

    </FrameLayout>

    <com.andrewq.planets.util.ScrimInsetsFrameLayout
        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="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" />
    </com.andrewq.planets.util.ScrimInsetsFrameLayout>


</android.support.v4.widget.DrawerLayout>

ScrimInsetsFrameLayout.java:

package com.andrewq.planets.util;

/*
* 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.
*/

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.widget.FrameLayout;

import com.andrewq.planets.R;

/**
 * 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);
    }
}

最后,这是我的 values-v21 的 styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppThemeNavDrawer" parent="Theme.AppCompat.NoActionBar">
        <item name="colorAccent">#F8F8F8</item>
        <item name="android:windowTranslucentStatus">true</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>
</resources>

我查看了 2014 I/O 应用程序源代码以及this 问题,我不知道有什么不同。

这是我目前的截图,减去状态栏下的抽屉:

我已经让其他一切工作正常,这是我需要做的最后一件事。非常感谢您的帮助!

编辑:

为了澄清,我想让图像在状态栏下着色,就像在大多数 Google Apps 和 Google Now 中一样。

【问题讨论】:

  • 您是否将样式应用于清单中的活动?
  • 我做到了。这是我检查是否忘记的第一件事。
  • 你得到任何答案了吗?我也面临同样的问题
  • @Parth Anjaria - 请参阅下面的答案。
  • 我不想为此使用任何库。

标签: android


【解决方案1】:

在 DrawerLayout 中添加android:fitsSystemWindows="false" 即可解决问题

【讨论】:

  • 也为我工作。
  • 将 android:fitsSystemWindows="false" 添加到 NavigationView 解决了问题
  • 对我来说很好。谢谢!
  • 完美运行。谢谢。
  • 最简单的答案:)
【解决方案2】:

有不同的方法可以达到预期的结果。您可以通过样式或代码启用半透明。

我创建了一个 MaterialDrawer(它遵循 Android 材料设计指南),它实现了所有这些并为您处理所有事情。在这里阅读更多:https://github.com/mikepenz/MaterialDrawer/

如果您想自己创建它,您总是必须决定要支持的最低 api 和/或是否必须拆分样式。

因此,要启用 translucentStatusbar,您必须至少在 API v19 上,或者为 v19+ 创建分隔样式values-v19 这看起来像这样

<style name="YourTheme.TranslucentStatus" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
</style>

所以现在这会将您的完整布局移动到状态栏下方。在几乎所有情况下,您现在都需要在抽屉内容和普通视图内容的顶部添加填充。

您可以通过添加24dp 填充来做到这一点。

这不是一个很好的实现。因此,使用 Google IO 2014 应用程序中使用的 ScrimInsetsLayout 有一种不同的方法。 https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/ScrimInsetsFrameLayout.java

这将是您的内容布局,您可以在其上设置状态栏的颜色。您可以在此处找到有关如何使用它的详细说明:https://stackoverflow.com/a/26932228

需要一些时间来适应样式和/或ScrimInsetsLayout

编辑:

关于如何以编程方式处理此问题的更复杂示例:

if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT < 21) {
    //enable translucent statusbar via flags
    setTranslucentStatusFlag(true);
}
if (Build.VERSION.SDK_INT >= 19) {
    mActivity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
if (Build.VERSION.SDK_INT >= 21) {
    //we don't need the translucent flag this is handled by the theme
    setTranslucentStatusFlag(false);
    //set the statusbarcolor transparent to remove the black shadow
    mActivity.getWindow().setStatusBarColor(Color.TRANSPARENT);
}

//add a padding to the content of the drawer (25dp on devices starting with api v19)
mDrawerContentRoot.setPadding(0, mActivity.getResources().getDimensionPixelSize(R.dimen.tool_bar_top_padding), 0, 0);

// define the statusBarColor
mDrawerContentRoot.setInsetForeground(mStatusBarColor);


private void setTranslucentStatusFlag(boolean on) {
    if (Build.VERSION.SDK_INT >= 19) {
        Window win = mActivity.getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        if (on) {
            winParams.flags |= bits;
        } else {
            winParams.flags &= ~bits;
        }
        win.setAttributes(winParams);
    }
}

EDIT2:

解决此问题的完整解决方案是清理项目中的所有布局。一些布局和样式的组合造成了麻烦。

完整的更改可以在这个拉取请求中找到: https://github.com/Andrew-Quebe/Planets-Gradle/commit/83e28c09253af6e807b6f4e94baca8fbca3fc7c8

【讨论】:

  • 如何在我的 XML 代码中实现 ScrimInsetsView?我的尝试做对了吗?此外,目前,我正在努力使抽屉仅用于棒棒糖设备......暂时。我的 v21 主题中已经包含 &lt;item name="android:windowTranslucentStatus"&gt;true&lt;/item&gt;
  • 据我所知,一切看起来都很好。我会仔细看看你的来源@github
  • 我已经解决了你的问题@github。是一个巨大的承诺。你的布局和样式有很多问题。
  • @mikepenz 你从哪里得到setInsetForeground?我在任何地方都找不到它。
  • @Mark13426 这个答案来自 2015 年。从那时起事情可能会发生变化
【解决方案3】:

您需要创建一个新的styles.xml 并将该文件放在style-v19 文件夹中,因为状态栏半透明方法不适用于前kitkat 设备。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
    <item name="android:windowTranslucentStatus">true</item>
</style>

之后您将看到您的应用程序位于状态栏下但是您需要为工具栏提供填充以进行精确实现。创建一个 dimen-v19 并添加

&lt;dimen name="ToolBarPaddingTop"&gt;24dp&lt;/dimen&gt;

在工具栏中使用它

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/accent_material_light"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:fitsSystemWindows="true"
    android:paddingTop="@dimen/ToolBarPaddingTop">

</android.support.v7.widget.Toolbar>

【讨论】:

  • 我已经有一个 values-v19 文件夹,它具有特定于 Kitkat 的样式。我不明白这会有什么影响。
  • 我刚刚尝试了你所说的,它所做的只是在工具栏的顶部添加了 24dp 的内边距......抽屉根本不会下沉。
【解决方案4】:

这对我有用:

  • 在 v21 文件夹中以默认样式将 android:windowTranslucentStatus 设置为 true。这将使您的状态栏在 Lollipop 中几乎是透明的。
  • 使用样式中的android:colorPrimary 参数定义Toolbar 的颜色。
  • 不要在布局中设置android:fitsSystemWindows="true"
  • 在工具栏顶部和抽屉顶部添加一个 24dp 的内边距,但只能来自 Lollyipop。最好的方法是为您的维度文件添加一个新维度。在 values 文件夹中将其设置为 0,在 values-v21 中将其设置为 24 dp,然后在 ToolbarDrawer 上使用它。

【讨论】:

  • 所有设备都没有 24dp 状态栏。例如,某些 Android 版本的默认值为 25dp。
【解决方案5】:

我相信您还需要将android:fitsSystemWindows="true" 添加到android.support.v4.widget.DrawerLayout 标记中。

【讨论】:

  • 不……可悲的是……那没有做到。
  • 我看到你的状态栏本身不透明。奇怪
  • fitSystemWindows 到抽屉布局也会将其向下移动。并且不透明的状态栏是由 ScrimInsetsLayout 引起的(据我所知)
  • @mikepenz 嗯,我得到一个透明的状态栏,有和没有 ScrimInsetsLayout
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-27
  • 1970-01-01
  • 1970-01-01
  • 2015-01-10
  • 1970-01-01
相关资源
最近更新 更多