web-dev-qa-db-ja.com

デザインサポートライブラリのNavigationViewのスタイル設定方法

そこで、私は Android Design Support Library が提供するNavigationViewを使用しています。

enter image description here

私はそれをスタイルする方法の例を見つけることができないようです。

これまでのところ:

<Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_height="match_parent"
    Android:layout_width="wrap_content"
    Android:layout_gravity="start"
    app:headerLayout="@layout/header"
    app:menu="@menu/drawer"
    app:itemTextColor="@color/black"
    app:itemIconTint="@color/black"/>

ヘッダーのスタイル設定は、独自のxmlレイアウトの下にあるため簡単ですが、本文はメニューリソースファイルであり、レイアウトではありません。

  • app:itemTextColorはテキストの色を変更します
  • app:itemIconTintアイコンの色を変更します
  • app:itemBackgroundアイテムの背景色を変更します

設定方法

  • 選択したアイテムの背景
  • 選択したアイテムのテキストの色
  • 選択したアイテムのアイコンの色合い
29
Frozen Crayon

同様の質問に答えました ここ

基本的に必要なのは、Color State List Resourceを使用することです。そのために、最初にxmlディレクトリ内に新しいcolor(たとえば、drawer_item.xml)を作成します(resディレクトリ内にある必要があります)。色はすでに、作成します。

drawer_item.xmlの内部で、次のようにします

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="checked state color" Android:state_checked= "true" />
    <item Android:color="your default color" />
</selector>

itemBackgroundの場合、別のドロアブルもドロアブルフォルダー内に配置する必要があります。名前は同じdrawer_itemです。 itemBackgroundAndroid:drawableの代わりにAndroid:colorプロパティを設定する必要があります:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
       Android:drawable="@drawable/shape_rectangle_checked"

        Android:state_checked= "true" />
    <item Android:drawable="@drawable/shape_rectangle" />

</selector>

ファイルshape_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shape="rectangle">
<solid Android:color="#ffffff" /> <!--white color -->
</shape>

ファイルshape_rectangle_checked

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shape="rectangle">
<solid Android:color="#25aaf1" /> <!--blue color -->
</shape>

そして、このようにナビゲーションビューで設定します

app:itemIconTint="@color/drawer_item" //notice here
app:itemTextColor="@color/drawer_item" //and here
app:itemBackground="@drawable/drawer_item"//and here for changing the background color of the item which is checked
45
Sash_KP

@Sash_KPの答えを拡張するには、xmlフォルダー内のdrawableに対して、@drawable/shape_rectangle@drawable/shape_rectangle_checkは必要ありません。 @color/your_colorを使用できます。

API >= 21についても、ナビゲーションメニュー項目には既定でプリセットセレクターがあることに気付きました。メニュー項目を長押しすると、波紋が表示されます。カスタムitemBackgroundを使用しても、デフォルトのリップルは上書きされません。したがって、ripple drawableを使用すると、2つの波紋が作成されます。また、ripple drawablesのあるメニュー項目では、何らかの理由で押された状態にすることはできません(デフォルトの波紋は、押したままの場合にのみ表示されます)。

API >= 21の場合、ripple drawableの使用はお勧めしません。カスタムリップルのない通常のselector drawableを使用するだけです。

3
mco