DrawerLayoutを使用してActionBar / Toolbarの上およびステータスバーの下に表示するにはどうすればよいですか?


394

新しいマテリアルデザインのサイドナビゲーション仕様で、ドロワーをアクションバーの上とステータスバーの後ろに表示できることを確認しました。どうすれば実装できますか?


4
今日でも、下位互換性で機能する明確な答えはありません。これらの種類の問題は、プログラマを本当に苛立たせます。「N」APIおよびAndroidシステムで改善するための多くの基本的な側面をすでに宣伝しています。
Val Martinez 2016年

回答:


528

フレームワークとサポートライブラリの新機能は、まさにこれを可能にします。「パズルのピース」は3つあります。

  1. アクションバーをビュー階層に埋め込むことができるようにツールバーを使用する。
  2. システムバーの背後に配置される fitsSystemWindowsようにDrawerLayoutを作成します。
  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>

注:の<fragment android:name="fragments.NavigationDrawerFragment">代わりにa を使用した場合

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

    <!-- Your drawer content -->

</LinearLayout>

実際のレイアウトではfitsSystemWindows(boolean)onCreateViewメソッドから戻るビューを呼び出すと、望ましい効果が得られます。

@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;
}

3
はい、DrawerLayoutシステムバーの後ろに配置する必要があります。次に、それをドロワービューに設定してDrawerLayout、ウィンドウのインセット内に配置する必要があります。
Chris Banes

11
これをまったく機能させることができません。上記のコードを新しいデモアプリケーションで使用すると、結果は@ScootrNovaの説明と同様になります。このスクリーンショットを見る:imgur.com/QLk3syt
Michael Schmidt

6
layout_marginTopドロワーコンテンツのレイアウトのルートでネガを実際に使用する必要があるようです。それ以外の場合は、ドロワーコンテンツのレイアウトの背景がステータスバーの上に描画され、それ以外はすべて押し下げられます。ただし、これは、私が知る限り、?attr / statusBarSizeまたはAndroidによって提供されるようなものがないことを知っている限り、ちょっと大まかな解決策のようです。
Charles Madere 2014年

26
ドロワーがステータスバーから見えるようにする効果を得るには、ドロワーレイアウトでandroid:fitsSystemWindowsをfalseに設定し、メインコンテンツレイアウト(ツールバーを含むレイアウト)でandroid:fitsSystemWindowsをtrueに設定し、<item name私のテーマの= "android:windowTranslucentStatus"> true </ item>-Lollipopについて
ジェイコブ

8
この答えは不完全です。また、ナビゲーションドロワーをScrimLayout内にラップする必要があります。stackoverflow.com/a/26926998/174149を
Markus Hi

138

編集:新しいデザインサポートライブラリはこれをサポートしており、以前の方法は不要になりました。

これは、新しいAndroid Design Support Libraryを使用して実現できます。

すべての新機能をデモする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設定を作成して、を設定できるようにします。

values / attrs.xml

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

アクティビティのxmlファイルを更新し、とのandroid:fitsSystemWindows両方でtrueに設定されていることを確認DrawerLayoutしてくださいScrimInsetsFrameLayout

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

結果:


10
これは私にとって最も効果的でした。私はこれを機能させるために2日間費やしましたが、これが1つです。これは回答としてマークする必要があります。どうもありがとうございます。
kalehv 14

2
私はappcompatを使用していませんが、これは機能しませんでした。:( appcompatなしでこれを機能させるガイドはありますか?
Jared Rummler、2015年

3
これが最も完璧な答えです。4.Xから5.XまでのさまざまなAndroidデバイスに実装してテストしましたが、完全に機能することを確認できます。どうもありがとう。
Aritra Roy、2015

2
私が言ったように、それは完全に動作しますが、私は少し問題があります。ナビゲーションドロワーを使用するアクティビティには透明なステータスバーがありますが、他のすべてのアクティビティではステータスバーから「primaryDark」の色が失われています。それを取り戻すには?
Aritra Roy、2015

5
引き出しの断片に巻き付けられたこの追加のレイアウトを使用する以外に方法は現在ないことを受け入れるのに3日かかりました。それ以外の場合、ステータスバーは灰色(最初の子の背景色)になるか、ドロワーがステータスバーの下に表示されます。
Denis Loh

96

最新のリリースではAndroidのサポートライブラリ(REV 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

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

必ず設定android:windowDrawsSystemBarBackgroundsandroid:statusBarColorvalues-v21ください。そうしないと、ドロワーはステータスバーの「下」に表示されません。

<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属性を

また、チェックすることができ、例えばアプリによってクリスBanes(のようなデザインサポートライブラリの一部である他の新しい景色と一緒にNavigationViewを強調FloatingActionButtonTextInputLayoutスナックバーTabLayoutなど)


1
@reVerseに感謝!! あなたは、スタイルファイルからリスト内のすべてのアイテムとアイコンを更新したい場合は>、あなたは使用してそれを行うことができます:<item name="itemTextColor">@color/YOUR_COLOR</item> <item name="itemIconTint">@color/YOUR_COLOR</item>
フアン・サラビア教授

選択したアイテムの背景色をどのように変更しますか?
Joop、2015

2
このアプローチでも、ActionBarの背後にあるNavigationViewが生成されます。
サウザートン2015

1
@southertonもちろん、使用する必要がありますToolbar-これを使用してこれを行う方法はありませんActionBar
reVerse

1
@ reegan29好きmDrawerLayout.openDrawer(GravityCompat.START);なところに電話してください。を使用している場合、ActionBarDrawerToggleこれはハンバーガーアイコンをクリックするとすぐに自動的に実行されます。
2015年

6

動作させるには、values-v21スタイルまたはテーマxmlでこの属性を使用する必要があります。

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

それが魔法になります!


3
これにより、アクションバーがステータスバーの後ろにも表示されます。
Michiel、2014年

しかし、それが達成しようとしている効果です。Gmail5.0アプリを見てください。ステータスバーの後ろにサイドバーが表示されます。
Nicolas Jafelle 2014年

それは私が言うつもりではありませんでした。ナビゲーションドロワーは、このコード行でステータスバーの後ろにありますが、ツールバー/アクションバーも同様です。
Michiel、2014年

2
投稿者と回答者はAppCompatを設計したGoogleの従業員なので、コンテンツを書いたときに彼が何をしていたのかをよく知っていると思います。
afollestad 2014年

@Mixx、通常のコンテンツビューにandroid:fitsSystemWindows = "true"を設定できます(たとえば、承認された回答レイアウトを採用している場合)。Android 4.4でも機能します。ただし、ここには若干の違いがあります。Android5.0では、ステータスバーの透明度レベルがGMailの透明度レベルよりも少し高く(アルファ値が高い)、ステータスバーがさらに暗くなっています。
Qianqian

6

上記のすべてのアプローチは正しく、機能している可能性があります。上記のガイドに従って動作するデモを作成し、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

新しいデザインサポートライブラリにより、これがさらに簡単になりました

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

@Chris Banes https://github.com/chrisbanes/cheesesquareからのクローン


4

ここで言及されているすべての回答は古すぎて長すぎます。最新の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"
        />

私はそれをテストし、完全に機能しています。誰かを助けることを願っています。これは最善のアプローチではないかもしれませんが、スムーズに機能し、実装は簡単です。それが役立つならそれをマークアップしてください。


または、ActionBarでカスタムビューを使用している場合、カスタムビューの可視性をonDrawerSlide()でINVISIBLEに、onDrawerClosed()でVISIBLEに設定できます。
ミラノ、

3

デザインサポートライブラリを使用しています。そして、カスタムテーマを使用するだけで、ナビゲーションドロワーを開いたときに透明なステータスバーを実現しました。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

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

最後に、マニフェストファイルにテーマを追加します

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

android:fitsSystemWindows="true"「DrawerLayout」で、プロパティを使用することを忘れないでください


1
これをAPIレベル19のデバイスに使用する方法
AndroidGuy、

2

これは最も簡単で、私にとってはうまくいきました:

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

私もこれをしました、そしてそれはロリポップの魅力のように働きました。しかし、私24dpはトップマージンに使用しました。
Rafa

Android 7.1を搭載したデバイスで画面を分割すると、アプリが画面の2番目の部分である場合、上部にこのギャップが表示されます。
キケロモウラ

1

を使用する代わりに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 7.1を搭載したデバイスで画面を分割すると、アプリが画面の2番目の部分である場合、上部にこのギャップが表示されます。
キケロモウラ

0

これで試してください:

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

メインアクティビティはActionBarActivityを拡張します

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

これで、onCreateOptionsMenuToolBarを使用して通常のActionBarと同じようにできます。

これは私のレイアウトです

  • TOP:左引き出し-右引き出し
    • MID:ToolBar(アクションバー)
    • BOTTOM:ListFragment

ご理解のほどよろしくお願いいたします。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.