1. ホーム
  2. android

NavigationView内のアイテムの背景色と文字色をカスタマイズする方法は?

2023-08-17 16:38:14

質問

で示されるようなことを実現したいのですが マテリアルデザインの資料 .

colorControlHighlight はチェックした項目の背景として使われます。

カスタマイズが必要です。

  • 背景のチェックをはずす
  • 文字色チェックあり
  • テキストカラーチェックなし

どのように解決するのですか?

を使用して MaterialComponents ライブラリ を使用すると、これらの属性を使用することができます。

  • app:itemShapeFillColor : 背景のアイテムカラー
  • app:itemIconTint : アイコンの色合い
  • app:itemTextColor 文字色

レイアウトで

<com.google.android.material.navigation.NavigationView
    app:itemShapeFillColor="@color/shape_selector"
    app:itemIconTint="@color/icon_tint_selector"
    app:itemTextColor="@color/text_color_selector"
    ../>

カスタムスタイルで

<style name="..." parent="Widget.MaterialComponents.NavigationView" >
   <item name="itemShapeFillColor">@color/shape_selector</item>
   <item name="itemIconTint">@color/icon_tint_selector</item>
   <item name="itemTextColor">@color/text_color_selector</item>
</style>

については itemIconTintitemTextColor のようにすると、このようなセレクタが使えるようになります。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:color="?attr/colorOnSurface"/>
</selector>

については itemShapeFillColor のようなセレクタを使用することができます。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_activated="true"/>
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:color="@android:color/transparent"/>
</selector>

ちょうど 最後の注意 . を使用することに注意してください。 itemBackground .

に設定されています。 @null によってプログラム的に生成された形状の背景を使用するために NavigationView としたとき itemShapeAppearance または itemShapeAppearanceOverlay が設定されています ( デフォルトの動作 ).

この背景は、スタイル付けされた itemShape* 属性を使っています。

設定方法 itemBackground を設定すると、プログラム上の背景が上書きされ、itemShape* 属性に設定された値が無視されるようになります。