我如何使用抽屉布局显示在动作栏/工具栏和状态栏下?

我已经在新的材质设计侧面导航规格中看到,你可以在动作栏上方和状态栏后面显示抽屉。我如何实现这个?

239090 次浏览

框架和支持库中的新功能正是这样做的。这里有三个“拼图”:

  1. 使用工具栏,这样你就可以将你的操作栏嵌入到你的视图层次结构中。
  2. 使DrawerLayout fitsSystemWindows,以便它被布置在系统栏后面。
  3. 禁用Theme.Material的正常状态栏着色,以便DrawerLayout可以在那里绘图。

我假设您将使用新的appcompat。

首先,你的布局应该是这样的:

<!-- The important thing to note here is the added fitSystemWindows -->
<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">


<!-- Your normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar -->
<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="?attr/colorPrimary" />


<!-- The rest of your content view -->


</LinearLayout>


<!-- Your drawer view. This can be any view, LinearLayout
is just an example. As we have set fitSystemWindows=true
this will be displayed under the status bar. -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true">


<!-- Your drawer content -->


</LinearLayout>


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

然后在你的活动/片段中:

public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);


// Your normal setup. Blah blah ...


// As we're using a Toolbar, we should retrieve it and set it
// to be our ActionBar
Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);


// Now retrieve the DrawerLayout so that we can set the status bar color.
// This only takes effect on Lollipop, or when using translucentStatusBar
// on KitKat.
DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
}

然后你需要确保DrawerLayout在状态栏后面是可见的。你可以通过改变values-v21主题来做到这一点:

values-v21 / themes.xml

<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
< p >注意: 如果使用<fragment android:name="fragments.NavigationDrawerFragment">代替

<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true">


<!-- Your drawer content -->


</LinearLayout>

如果你在从onCreateView方法返回的视图上调用fitsSystemWindows(boolean),就可以达到预期的效果。

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View mDrawerListView = inflater.inflate(
R.layout.fragment_navigation_drawer, container, false);
mDrawerListView.setFitsSystemWindows(true);
return mDrawerListView;
}

让它工作,在values-v21样式或主题xml需要使用这个属性:

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

这就是奇迹!

这是最简单的,对我来说很管用:

在值-21中:

<resources>
<style name="AppTheme" parent="AppTheme.Base">
...
<item name="android:windowTranslucentStatus">true</item>
</style>
<dimen name="topMargin">25dp</dimen>
</resources>

在值中:

<resources>
<dimen name="topMargin">0dp</dimen>
</resources>

并设置到工具栏

android:layout_marginTop="@dimen/topMargin"

编辑:新的设计支持库支持这一点,不再需要以前的方法。

这现在可以使用新的Android设计支持库来实现。

你可以看到Chris Banes的Cheesesquare样本应用程序演示了所有的新特性。


以前的方法:

由于没有完整的解决方案,这里是我实现预期结果的方法。

首先在你的项目中包含ScrimInsetsFrameLayout

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

然后创建一个可样式对象,以便可以设置insetForeground

值/ attrs.xml

<declare-styleable name="ScrimInsetsView">
<attr name="insetForeground" format="reference|color" />
</declare-styleable>

更新你的活动的xml文件,并确保android:fitsSystemWindowsDrawerLayoutScrimInsetsFrameLayout上都被设置为true。

布局/ activity_main.xml

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">


<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<!-- Your main content -->


</LinearLayout>


<!-- The navigation drawer -->
<com.example.app.util.ScrimInsetsFrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrimInsetsFrameLayout"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white"
android:elevation="10dp"
android:fitsSystemWindows="true"
app:insetForeground="#4000">


<!-- Your drawer content -->


</com.example.app.util.ScrimInsetsFrameLayout>


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

在活动的onCreate方法中,设置抽屉布局上的状态栏背景色。

MainActivity.java

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


// ...


mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mDrawerLayout.setStatusBarBackgroundColor(
getResources().getColor(R.color.primary_dark));
}

最后更新应用程序的主题,使DrawerLayout位于状态栏后面。

values-v21 / styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

结果:

以上所有的方法都是正确的,可能正在起作用。我已经按照上面的指南创建了一个工作演示,并在2上进行了测试。X至5.x

你可以从Github克隆

重要的事情是在主要活动中

toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();


this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
findViewById(R.id.linearLayout);
scrimInsetsFrameLayout.setOnInsetsCallback(this);
}

还有回调

@Override
public void onInsetsChanged(Rect insets) {
Toolbar toolbar = this.toolbar;
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
toolbar.getLayoutParams();
lp.topMargin = insets.top;
int top = insets.top;
insets.top += toolbar.getHeight();
toolbar.setLayoutParams(lp);
insets.top = top; // revert
}

V21的主题绝对有魔力

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 21 theme customizations can go here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/accent_material_light</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>

和ScrimInsetsFrameLayout

现在有了new 设计支持库,这变得更容易了

compile 'com.android.support:design:22.2.0'

克隆@Chris Banes https://github.com/chrisbanes/cheesesquare < / p >

试试这个:

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




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


<!--Main layout and ads-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<FrameLayout
android:id="@+id/ll_main_hero"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">


</FrameLayout>


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


<View
android:layout_width="320dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#ff00ff" />
</FrameLayout>




</LinearLayout>


<!--Toolbar-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/toolbar"
android:elevation="4dp" />
</FrameLayout>




<!--left-->
<ListView
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@null"
android:background="@mipmap/layer_image"
android:id="@+id/left_drawer"></ListView>


<!--right-->
<FrameLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@mipmap/layer_image">


<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/ken2"
android:scaleType="centerCrop" />
</FrameLayout>

风格:

<style name="ts_theme_overlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/red_A700</item>
<item name="colorPrimaryDark">@color/red1</item>
<item name="android:windowBackground">@color/blue_A400</item>
</style>

Main Activity扩展了ActionBarActivity

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

现在你可以像使用工具栏一样onCreateOptionsMenu

这是我的布局

  • TOP:左抽屉-右抽屉
    • 中:工具栏(ActionBar)
    • 底部:ListFragment
    • 李< / ul > < / >

    希望你能理解!玩得开心!

而不是使用ScrimInsetsFrameLayout…仅仅添加一个具有固定高度24dp和背景primaryColor的视图不是更容易吗?

我知道这涉及到在层次结构中添加一个虚拟视图,但对我来说似乎更干净。

我已经试过了,效果很好。

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


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


<!-- THIS IS THE VIEW I'M TALKING ABOUT... -->
<View
android:layout_width="match_parent"
android:layout_height="24dp"
android:background="?attr/colorPrimary" />


<android.support.v7.widget.Toolbar
android:id="@+id/activity_base_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="2dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark" />


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


</LinearLayout>


<fragment
android:id="@+id/activity_base_drawer_fragment"
android:name="com.myapp.drawer.ui.DrawerFragment"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:elevation="4dp"
tools:layout="@layout/fragment_drawer" />


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

随着最新的Android支持库(版本22.2.0)的发布,我们得到了一个设计支援图书馆,作为它的一部分,一个名为NavigationView的新视图。因此,我们不用自己用ScrimInsetsFrameLayout和所有其他东西来做所有事情,我们只需使用这个视图,所有事情都为我们完成了。

例子

步骤1

Design Support Library添加到你的build.gradle文件中

dependencies {
// Other dependencies like appcompat
compile 'com.android.support:design:22.2.0'
}

步骤2

NavigationView添加到你的DrawerLayout:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"> <!-- this is important -->


<!-- Your contents -->


<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navigation_items" /> <!-- The items to display -->
</android.support.v4.widget.DrawerLayout>

步骤3

/res/menu中创建一个新的菜单资源,并添加你想要显示的项目和图标:

<menu xmlns:android="http://schemas.android.com/apk/res/android">


<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_action_home"
android:title="Home" />
<item
android:id="@+id/nav_example_item_1"
android:icon="@drawable/ic_action_dashboard"
android:title="Example Item #1" />
</group>


<item android:title="Sub items">
<menu>
<item
android:id="@+id/nav_example_sub_item_1"
android:title="Example Sub Item #1" />
</menu>
</item>


</menu>

步骤4

Init NavigationView并处理点击事件:

public class MainActivity extends AppCompatActivity {


NavigationView mNavigationView;
DrawerLayout mDrawerLayout;


// Other stuff


private void init() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
mDrawerLayout.closeDrawers();
menuItem.setChecked(true);
switch (menuItem.getItemId()) {
case R.id.nav_home:
// TODO - Do something
break;
// TODO - Handle other items
}
return true;
}
});
}
}

步骤5

确保在values-v21中设置android:windowDrawsSystemBarBackgroundsandroid:statusBarColor,否则你的抽屉将不会显示在状态栏的“下面”

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Other attributes like colorPrimary, colorAccent etc. -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

可选步骤

在NavigationView中添加一个头。为此,只需创建一个新的布局,并将app:headerLayout="@layout/my_header_layout"添加到NavigationView。

结果

图片显示导航视图

笔记

  • 突出显示颜色使用通过colorPrimary属性定义的颜色
  • 列表项使用通过textColorPrimary属性定义的颜色
  • 图标使用通过textColorSecondary属性定义的颜色

你也可以通过克里斯·贝恩斯检查示例应用程序,它突出显示了NavigationView以及其他设计支持库中的新视图(如FloatingActionButtonTextInputLayout间小吃店TabLayout等)。

我正在使用设计支持库。通过使用自定义主题,我实现了打开导航抽屉时透明的状态栏。

enter image description here

enter image description here

<style name="NavigationStyle" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryColorDark</item>


<!-- To Make Navigation Drawer Fill Status Bar and become Transparent Too -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>


</style>

最后在Manifest文件中添加主题

<activity
........
........
android:theme="@style/NavigationStyle">
</activity>

不要忘记在"DrawerLayout"中使用android:fitsSystemWindows="true"属性。

这里提到的所有答案都太旧太长了。与最新的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);


}
}

这将改变你的状态栏颜色为透明当你打开抽屉

现在,当你关闭抽屉,你需要改变状态栏颜色再次为深色。你可以这样做。

        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"
/>

我已经测试过了,它完全工作。希望它能帮助到别人。这可能不是最好的方法,但它工作平稳,实现简单。 如果有用的话,做个记号。快乐编码:)