web-dev-qa-db-ja.com

Android NavigationView:アイコンとテキストの間のスペースを減らし、 `itemBackground`が機能しない

メニューxmlを使用して構築したときに、NavigationViewのアイコンとテキストの間のスペースを減らす方法はありますか?

Android:drawablePaddingを使用してapp:itemTextAppearance属性とそれが機能しない、私はパディングとマージンを設定しようとしましたが何も機能しません。

また、app:itemBackgroundをオンにしてチェック状態にすると、メニュー項目全体がハイライト表示されず、下の図のようになります。

enter image description here

itemBackgroundの作成に使用されるxmlは次のとおりです。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_checked="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_focused="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_activated="true" Android:drawable="@color/white_alpha_10" />
    <item Android:drawable="@Android:color/transparent" />
</selector>

何が起こっているのでしょうか?メニュー項目の背景色があるように見えますが、メニューのxmlはかなり標準的なものです。

NavigationViewは、テーマから設定された紫色の背景を戻します。

<!--Activity xml -->
<Android.support.design.widget.NavigationView
    Android:id="@+id/nav_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    Android:layout_gravity="start"
    app:theme="@style/AppTheme.NavigationView"
    app:menu="@menu/menu_nav_drawer"
    app:itemBackground="@drawable/nav_drawer_item"
    app:headerLayout="@layout/nav_header"/>

<!-- styles.xml -->
<style name="AppTheme.NavigationView" parent="Widget.Design.NavigationView">
    <item name="Android:background">@color/charcoal_new</item>
    <item name="itemIconTint">@color/nav_drawer_icon</item>
    <item name="Android:listDivider">@color/dusk_alpha_50</item>
    <item name="itemTextAppearance">@style/NavigationViewTextAppearance</item>
</style>

<style name="NavigationViewTextAppearance" parent="TextAppearance.Body.Regular">
    <item name="Android:textColor">@color/white</item>
    <item name="Android:padding">0dp</item>
    <item name="Android:layout_margin">0dp</item>
</style>

Android support/design library 23.2.1を使用しています。

15
Ali

ソースを掘り下げた後。これを修正するために、ディメンションリソースをオーバーライドできることがわかりました。

<dimen tools:override="true" name="design_navigation_icon_padding">16dp</dimen>

ただし、これによりディメンションリソースがどこでも変更されることに注意してください。レイアウトファイルをコピーして、代わりに上書きすることもできますdesign_navigation_menu.xml

異なる色のエッジについては、app:itemBackground="@Android:color/transparent"次に、NavigationViewセットのテーマで:

<item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>

次のように、NavigationViewのテーマで両方を処理できます。

    <item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>
    <item name="itemBackground">@color/transparent</item>

nav_drawer_item_selector.xmlは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_checked="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_focused="true" Android:drawable="@color/white_alpha_10" />
    <item Android:state_activated="true" Android:drawable="@color/white_alpha_10" />
    <item Android:drawable="@color/transparent" />
</selector>
31
Ali

この行をdimens.xmlファイルに追加するだけです

<dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen>

これはNavigationViewのパディングをオーバーライドします

18
Ankur Bavishi

NavigationView が材料コンポーネントライブラリで定義されている場合、app:itemIconPadding属性。

<com.google.Android.material.navigation.NavigationView
    app:itemIconPadding="4dp"
    ../>

enter image description hereenter image description here

次のようなカスタムスタイルを定義することもできます。

  <style name="CustomNavigationView" parent="Widget.MaterialComponents.NavigationView">
    <item name="itemIconPadding">@dimen/....</item>
  </style>

デフォルト値は@dimen/mtrl_navigation_item_icon_paddingそして14dp

1

誰かがツールについて知らない場合に備えて、以下に従ってくださいOpen dimens.xml in res-> Values-> dimens.xml

<resources xmlns:tools="http://schemas.Android.com/tools"> <dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen> </resources>

1
sham.y

使用する app:itemIconPadding新しい資料NavigationView

<com.google.Android.material.navigation.NavigationView
                        ...
                        app:itemIconPadding="10dp"/>
1
random