Development Tip

NavigationView 내에서 항목 배경 및 항목 텍스트 색상을 사용자 지정하는 방법은 무엇입니까?

yourdevel 2020. 10. 22. 22:56
반응형

NavigationView 내에서 항목 배경 및 항목 텍스트 색상을 사용자 지정하는 방법은 무엇입니까?


머티리얼 디자인 문서에 나와있는 이와 같은 것을 달성하고 싶습니다 .

colorControlHighlight 선택한 항목의 배경에 사용됩니다.

사용자 정의해야합니다.

  • 백그라운드 선택 해제
  • 텍스트 색상 확인
  • 텍스트 색상 선택 취소

NavigationDrawer (NavigationView)에는 선택 / 선택된 항목의 구성을위한 세 가지 옵션이 있습니다.

app:itemIconTint="@color/menu_text_color" //icon color
app:itemTextColor="@color/menu_text_color" //text color
app:itemBackground="@drawable/menu_background_color" //background

아이콘 및 텍스트 색상

우선 두 가지 옵션 (아이콘과 텍스트) 필요의 색상 상태 목록 자원 - https://developer.android.com/guide/topics/resources/color-list-resource.html .

이러한 menu_text_color리소스는 res / color 로 만들어야 합니다 . 이 파일 내용은 다음과 유사해야합니다.

<!-- res/color/menu_text_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/colorWhite" android:state_checked="true" />
  <item android:color="@color/colorBlack" android:state_checked="false"/>
</selector>
  • @color/colorWhite -체크 항목에 사용되는 색상 리소스

  • @color/colorBlack -체크되지 않은 항목에 사용되는 색상 리소스

둘 다에 대해 하나의 리소스를 만들었지 만 텍스트 용과 아이콘 용으로 하나씩 두 개의 분리 된 파일을 만들 수 있습니다.

배경 (itemBackground)

배경 옵션에는 색상 대신 드로어 블 리소스가 필요하며 색상을 설정하려는 모든 시도는 예외로 종료됩니다. 드로어 블 리소스는 res / drawable 로 만들어야 하며 그 내용은 다음과 유사해야합니다.

<!-- res/drawable/menu_background_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@android:color/transparent"  android:state_checked="false"/>
  <item android:drawable="@color/colorPrimary" android:state_checked="true"/>
</selector>

색상을 시뮬레이션하는 드로어 블을 만들 필요가 없습니다 (다른 솔루션에서 이러한 제안을 보았습니다-아마도 이전 sdk 버전의 경우). 색상은이 파일에서 직접 사용할 수 있습니다. 이 예제 파일에서는 확인되지 않은 항목과 확인 된 항목에 대해 투명한 색상을 사용하고 colorPrimary있습니다.

문제 해결 및 중요 참고 사항

  • 백그라운드 리소스에서는 항상 기본값 대신 state_checked = "false"를 사용합니다. 기본 색상으로는 작동하지 않습니다.
  • 동적 / 프로그래밍 방식으로 생성 된 메뉴의 경우 항목을 체크 가능으로 설정해야합니다 .

코드 예 (동적 메뉴 항목 추가) :

  menu.add(group_id, item_id, Menu.NONE, item_name).setCheckable(true).setChecked(false);

항목이 체크 가능으로 설정되지 않으면 배경이 작동하지 않습니다 (텍스트 및 아이콘 색상이 예상대로 작동 함).


itemBackground, itemIconTint그리고 itemTextColor대신의 사용자 지정 접두사를 사용해야하지만, 설정할 수있는 간단한 XML-특성입니다 android:하나.

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

    <!-- Other layout views -->

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemBackground="@drawable/my_ripple"
        app:itemIconTint="#2196f3"
        app:itemTextColor="#009688"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

</android.support.v4.widget.DrawerLayout>

참고 : 이 경우 텍스트 색상, 아이콘 색조 및 배경은 정적입니다. 텍스트의 색상을 변경하려면 (예 : 선택하지 않으면 분홍색, 선택하면 청록색) ColorStateList.

다음 내용으로 새 * .xml 파일을 만듭니다. /res/color이름을 state_list.xml로 지정하겠습니다 .

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is used when the Navigation Item is checked -->
    <item android:color="#009688" android:state_checked="true" />
    <!-- This is the default text color -->
    <item android:color="#E91E63" />
</selector>

다음과 같이 간단히 참조하십시오. app:itemTextColor="@color/state_list"

동일은 간다 itemIconTint. itemBackground리소스 ID가 필요합니다. 문서참조하십시오 .


colorControlHighlight를 사용하는 것은 나에게 좋은 해결책입니다. 최신 지원 라이브러리를 사용하면 모든 위젯에 대한 테마 (스타일뿐 아니라)를 정의 할 수 있습니다. 예를 들어, colorControlHighlight를 NavigationView 테마에 정의 할 수 있으며 이는 나머지 위젯에는 적용되지 않습니다.


이벤트를 기반으로 한 활동에서 하나의 메뉴 항목 색상 만 변경하려면 HANIHASHEMI의이 블로그를 참조하십시오.

https://hanihashemi.com/2017/05/06/change-text-color-of-menuitem-in-navigation-drawer/

private void setTextColorForMenuItem(MenuItem menuItem, @ColorRes int color) {
  SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
  spanString.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, color)), 0, spanString.length(), 0);
  menuItem.setTitle(spanString);
}

호출 방법

setTextColorForMenuItem(item, R.color.colorPrimary);

Xamarin Android로 작업하는 경우 다음을 시도하십시오.

private void SetTextColorForMenuItem(IMenuItem menuItem, Android.Graphics.Color color)
        {
            SpannableString spanString = new SpannableString(menuItem.TitleFormatted.ToString());
            spanString.SetSpan(new ForegroundColorSpan(color), 0, spanString.Length(), 0);
            menuItem.SetTitle(spanString);
        }

호출 방법 :

SetTextColorForMenuItem(navigationView.Menu.GetItem(0), Android.Graphics.Color.OrangeRed);

You can use programmatically this code :

int[][] states = new int[][] {
    new int[] { android.R.attr.state_enabled}, // enabled
    new int[] {-android.R.attr.state_enabled}, // disabled
    new int[] {-android.R.attr.state_checked}, // unchecked
    new int[] { android.R.attr.state_pressed}  // pressed
};

int[] colors = new int[] {
    Color.BLACK,
    Color.RED,
    Color.GREEN,
    Color.BLUE
};

ColorStateList myList = new ColorStateList(states, colors);

  nav_view.setItemIconTintList(myList);

Now, in navigation view you can also provide your own item view. With new appcompat-v7:23.1.0 you can

set custom views for items via app:actionLayout or using MenuItemCompat.setActionView().

View view = View.inflate(context, R.layout.your_custom_nav_layout_item, null);
MenuItemCompat.setActionView(menuItem, view); 

This way you can create your own layout with TextView and change backgrounds/colors/fonts however you want. Hope this was helpful :) Source


You can do it using the following statement:

navigationView.setItemBackground(ContextCompat.getDrawable(CustomerHomeActivity.this, R.color.transparent));

If you want to do this programmatically:

Based on Jhon's answer:

You can use Kotlin extension like this:

fun NavigationView.setTextColorForMenuItems(@ColorInt color: Int) {
    for (i: Int in 0 until menu.size()) {
        val menuItem = menu.getItem(i)
        val spanString = SpannableString(menuItem.title.toString())
        spanString.setSpan(ForegroundColorSpan(color), 0, spanString.length, 0)
        menuItem.title = spanString
    }
}

Then call

nav_view.setTextColorForMenuItems(Color.BLACK)

참고URL : https://stackoverflow.com/questions/30594025/how-to-customize-item-background-and-item-text-color-inside-navigationview

반응형