web-dev-qa-db-ja.com

AndroidナビゲーションドロワーおよびwindowActionBarOverlay = true

アプリケーションに新しいAndroid Navigation Drawerを実装しようとしています。Drawerセットアップとリスナーを処理するBaseActivity.Javaを作成しました。この基本クラスを拡張する2つのサブアクティビティがあります。 2番目のアクティビティでは、次の属性を使用して、異なるアクションバースタイルを使用する予定です。

<item name="Android:windowActionBarOverlay">true</item>
<item name="Android:background">@Android:color/transparent</item>

レイアウトに画像ヘッダーがあるので、アクションバーを透明にし、コンテンツをより豊かにします。

私はそれを達成しましたが、問題は、コンテンツが拡張されてActionBarをオーバーレイとして使用する余分なスペースを利用するため、ナビゲーションドロワー自体も拡張され、ActionBarと重なり、かなりひどいことです。見た目のレイアウト：

enter image description here

私がしたいのは、余分なスペースを占める実際のコンテンツ（フラグメントが入力されるフレームレイアウト）ですが、Playミュージックアプリと同様に、ナビゲーションドロワーをアクションバーの下に置いたままにします。

enter image description here

それを実現するために私が何ができるかについてのアイデアはありますか？

[〜＃〜] edit [〜＃〜]したがって、Ahmadの支援に従って、marginTopをListViewのみに設定しました。レイアウトは次のとおりです。

<!-- The navigation drawer -->
<ListView Android:id="@+id/left_drawer"
          Android:layout_marginTop="?android:attr/actionBarSize"
<!-- This was added after seeing the crazy effect, but does nothing -->
          Android:layout_marginBottom="0dp"
          Android:layout_marginLeft="0dp"
          Android:layout_marginRight="0dp"
          Android:layout_width="240dp"
          Android:layout_height="fill_parent"
          Android:layout_gravity="start"
          Android:choiceMode="singleChoice"
          Android:background="?attr/listviewBackground"
          />

そして今、それは上面にうまく機能しますが、何らかの理由でビューの下部にもマージンがあり、それは私にはまったく意味がありません。 これはスクリーンショットです 。

何が原因かわからない:(

androidandroid-actionbaroverlaynavigation-drawer
25
daniel_c05

誰かがこの質問の別の見方に興味がある場合。これが起こったことです。

次のように、リストビューの上部にマージンのみを設定してみました。

Android:layout_marginTop="?android:attr/actionBarSize"

しかし、編集された質問で述べたように、レイアウトリソースファイルに設定されていなくても、下部にマージンがあるという奇妙な動作がありました。

そのため、私はPlayミュージックアプリを注意深く見ていましたが、実際にはマージンではなく一部のパディングであり、さらに、パディングで指定されたスペースを透明色で塗りつぶすカスタム背景を使用していることに気付きました。

これが私がしたことです：

  • マージンではなく、ListViewの上部にパディングを設定します。

    Android:paddingTop="?android:attr/actionBarSize"

前述のように、寸法はデバイスごとに異なるため、寸法をハードコーディングしないことが重要です。

  • 上部が透明で残りが無地のカスタムドローアブルを作成します。

それは次のように見えます：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
    <shape  Android:shape="rectangle">
        <solid Android:color="#80000000" />
    </shape>
</item>

<item Android:top="@dimen/action_bar_default_height">
    <shape
            Android:shape="rectangle">
        <solid Android:color="@color/light_gray" />
    </shape>
</item>

ドローアブルで?android:attr/actionBarSizeを使用しようとしたが、アプリが強制終了したことに注意してください。代わりに、grepcodeを検索して、アクションバーのサイズが異なるいくつかのdimenファイルを見つけたので、それらを自分のプロジェクトのdimenファイルに追加しました。

  • 値の場合：48 dp
  • バリューランドの場合：40 dp
  • Values-sw600dpの場合：56dp

その後、私は見栄えが良いと思います。スクリーンショットで、リストビューとアクションバーが重なっておらず、リストビューの透明部分がちょうどいいサイズであることに注意してください。

enter image description here

これがどのようにして実現するのかと思っていた人を助けることを願っています。

14
daniel_c05

そして今、それは上部側に適していますが、何らかの理由でビューの下部にもマージンがあり、それは私にはまったく意味がありません。こちらがスクリーンショットです。

リストビューの重力をstart | bottomに設定すると、問題が解決します。下部に余白は追加されません。 DrawerLayoutのデフォルトの重力がstart | centerのように見えます

<ListView
    Android:id="@+id/left_drawer"
    Android:layout_marginTop="?android:attr/actionBarSize"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start|bottom"/>
16
kofi

レイアウトの上部にマージンを設定して、コンテンツがActionBarの下に描画されるようにすることができます。

これを親レイアウトに追加するだけです：

Android:layout_marginTop="?android:attr/actionBarSize"

属性actionBarSizeは、ご想像のとおり、ActionBarのサイズを指します。絶対値をマージンとして設定することはできません。これは、ActionBarがすべてのAndroidデバイス間で常に同じサイズであるとは限らないためです（タブレットでは大きく、携帯電話では小さくなります）。 ）。

編集：

マージンをListViewに設定します。

<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_marginTop="?android:attr/actionBarSize"
        Android:layout_width="240dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"/>
</Android.support.v4.widget.DrawerLayout>

Googleミュージックアプリでも同じことができます。

enter image description here

8
Ahmad

私はpaddingTopを使用してこの問題を解決しました：

<FrameLayout
    Android:id="@+id/menu_frame"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:paddingTop="?attr/actionBarSize" >

    <ListView 
        Android:id="@+id/left_drawer_list"
        Android:layout_width="240dp"
        Android:layout_height="match_parent" />

</FrameLayout>

それが役に立てば幸い

4
Vadim Bryl

上記のガイドに従って動作するデモを作成し、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>
0
Vipin Sahu