导航抽屉半透明状态栏不起作用
我正在开发Android项目,并正在实施导航抽屉。 我正在阅读新的“ 材料devise规范”和“ 材料devise检查表” 。
该规范说,滑出窗格应该浮动高于包括状态栏在内的所有内容,并且在状态栏上是半透明的。
我的导航面板是在状态栏,但它没有得到任何透明度。 我已经按照谷歌开发者博客文章中的build议关注了SOpost中的代码,上面的链接如何使用DrawerLayout来显示ActionBar /工具栏和状态栏? 。
以下是我的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
的背景。 为什么? 对于DrawerLayout
和其中的LinearLayout
您的设置为fitsSystemWindows="true"
。 这会导致您的LinearLayout
在状态栏后面展开(这是透明的)。 因此,使状态栏的抽屉部分的背景变为白色。
如果您不希望抽屉在状态栏后面延伸(希望为整个状态栏提供半透明背景),则可以执行两项操作:
1)您可以简单地从您的LinearLayout
移除任何背景值,并为其内容的背景着色。 要么
2)你可以从你的LinearLayout
移除fitsSystemWindows="true"
。 我认为这是一个更合理和更清洁的方法。 您还可以避免在状态栏下放置阴影,导航抽屉不能延伸。
如果您希望抽屉在状态栏后面延伸并具有半透明状态栏大小的叠加层,则可以使用ScrimInsetFrameLayout
作为抽屉内容( ListView
)的容器,并使用app:insetForeground="#4000"
设置状态栏背景app:insetForeground="#4000"
。 当然,你可以把#4000
改成你想要的任何东西。 不要忘记在这里保持fitsSystemWindows="true"
!
或者,如果您不想叠加内容,只显示纯色,则可以将LinearLayout
的背景设置为任何所需的内容。 别忘了分别设置你的内容的背景!
编辑:你不再需要处理任何这个。 请参阅devise支持库以获得更简单的导航抽屉/视图实现。
所有你需要做的是为状态栏使用一些半透明的颜色。 将这些行添加到您的v21主题中:
<item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@color/desired_color</item>
不要忘记color
(资源)的格式必须是#AARRGGBB
。 这意味着颜色也将包含alpha值。
为什么不使用类似的东西呢?
<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
的alpha资源来显示操作栏中的透明度。
还有其他的方法可以通过代码来实现,就像其他的答案一样。 我上面的答案,在xml布局文件,这在我看来是很容易编辑必要的。
您需要将您的导航抽屉布局包裹在ScrimLayout
。
ScrimLayout
基本上在您的导航抽屉布局上绘制一个半透明的矩形。 要检索插入的大小,只需在ScrimLayout
覆盖ScrimLayout
。
@Override protected boolean fitSystemWindows(Rect insets) { mInsets = new Rect(insets); return true; }
稍后重写onDraw
绘制一个半透明的矩形。
一个示例实现可以在Google IO App源中find。 在这里你可以看到它是如何在布局xml中使用的。
如果您希望导航面板位于状态栏上并且在状态栏上是半透明的。 Google I / O Android App Source提供了一个很好的解决scheme( Play Store中的APK不会更新为持续版本)
首先你需要一个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)}, ie 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 (ie when * {@link #fitSystemWindows(Rect)} is called. This is useful for setting padding on UI elements based on * UI chrome insets (eg 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>
我有一个类似的function在我的项目中实现。 为了使我的抽屉透明,我只是使用hex颜色的透明度 。 使用6个hex数字,每个红色,绿色和蓝色的值分别有2个hex数字。 但如果你把两个额外的数字(8个hex数字),所以你有ARGB(阿尔法值两位数字)( 看这里 )。
这里是hex不透明度值: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
例如:如果你使用dehex颜色(#111111),只需要input一个不透明度值来获得透明度。 像这样:(#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>
这里是另一篇文章 ,可以帮助你了解hex颜色的字母代码。
这里提到的所有答案都太旧,太冗长了。 与最新的Navigationview一起使用的最佳和最短的解决scheme是
@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); } }
这将打开抽屉时将状态栏颜色更改为透明
现在,当closures抽屉时,需要将状态栏的颜色再次改为黑暗。所以你可以这样做。
@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" />
我已经testing了它,并且完全正常工作。希望它可以帮助别人。这可能不是最好的方法,但是它工作顺利并且易于实现。 标记它,如果它帮助。快乐的编码:)