탐색 창에서 선택한 메뉴 항목의 색상 변경


103

새로운 Android 디자인 지원 라이브러리를 사용하여 내 애플리케이션에서 탐색 창을 구현하고 있습니다.

선택한 항목의 색상을 변경하는 방법을 모르겠어요!

다음은 메뉴의 xml입니다.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_1"
        android:title="@string/navigation_item_1"/>

    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_2"
        android:title="@string/navigation_item_2"/>
</group>

그리고 다음은 내부에 위치한 navigationview xml입니다 android.support.v4.widget.DrawerLayout.

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/black"
    app:itemTextColor="@color/primary_text"
    app:menu="@menu/menu_drawer">

    <TextView
        android:id="@+id/main_activity_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@color/primary_text" />

</android.support.design.widget.NavigationView>

도와 주셔서 감사합니다!

[편집] 나는 이미 이것과 같은 해결책을 보았다 : 안드로이드 메뉴의 배경색을 바꾸십시오 .

꽤 해킹 인 것 같고 새로운 디자인 지원 라이브러리를 사용하면 더 깨끗한 것이 도입되었을 것이라고 생각했습니다.


답변:


244

Color State Resource를 사용하여이를 달성 할 수 있습니다 . NavigationView당신이 사용하고 있다는 것을 알게되면

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

여기에 대신 사용 @color/black하거나 @color/primary_test하는을 사용합니다 Color State List Resource. 이를 위해 먼저 디렉토리 (디렉토리 xml안에 color있어야 함 ) 내에 새 (예 : drawer_item.xml) 를 만듭니다. res이름이 지정된 디렉토리가없는 경우 새로 color만듭니다.

이제 내부에서 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>

마지막 단계는 NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@android:color/transparent"// and here for setting the background color to tranparent
    app:menu="@menu/menu_drawer">

이와 같이 IconTint,, ItemTextColor에 대해 별도의 색상 상태 목록 리소스를 사용할 수 있습니다 ItemBackground.

이제 항목을 선택 (인 xml또는 프로그래밍 방식)으로 설정하면 특정 항목이 선택되지 않은 항목과 다른 색상을 갖게됩니다.


눌러서 작동하려면 android : state_checked에서 android : state_pressed로 변경해야합니다.
Programista

32
ItemBackground의 경우 색상 리소스를 사용하여 배경을 정의 할 수 없기 때문에 색상 대신 드로어 블을 사용해야합니다.
sirFunkenstine

@sash 선택 탐색 항목에서 아이콘 이미지를 변경하려면 어떻게해야합니까?
mohit

@sirFunkenstine 색상 선택기를 사용하는 경우 res 폴더의 색상 폴더에 넣을 수 있습니다.
Kishan Vaghela 2016 년

바이너리 XML 파일 라인 # 3 : <항목> 태그는 드로어 블을 정의하는 '당김'속성 또는 아이 태그가 필요 @KishanVaghela은 당신이 제안하는이 오류가 발생하고
iOSAndroidWindowsMobileAppsDev

66

저는 믿습니다 app:itemBackground예상하는 드로어 블을. 따라서 아래 단계를 따르십시오.

highlight_color.xml다음 내용 으로 드로어 블 파일 을 만듭니다 .

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

nav_item_drawable.xml다음 내용으로 다른 드로어 블 파일 을 만듭니다 .

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/highlight_color" android:state_checked="true"/>
</selector>

마지막으로 app:itemBackgroundNavView 에 태그를 추가 합니다.

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

여기서 highlight_color.xml 파일은 배경에 대한 단색 드로어 블을 정의합니다. 나중에이 색상 드로어 블이 nav_item_drawable.xml 선택기에 할당됩니다.

이것은 나를 위해 일했습니다. 이것이 도움이되기를 바랍니다.

********************************************** 업데이트 됨 *** *******************************************

위에서 언급 한 답변은 일부 속성에 대한 미세한 제어를 제공하지만 설명하려는 방식은 더 단단 하고 약간 차갑습니다 .

그래서 당신이 할 수있는 것은 다음 과 같이 NavigationView에 대한 ThemeOverlay 를 정의 할 수 있습니다 styles.xml.

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/color_of_your_choice</item> 

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/color_of_your_choice</item> 

    </style>

이제 다음과 같이이 ThemeOverlay를 app:themeNavigationView의 속성에 적용 합니다.

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:theme="@style/ThemeOverlay.AppCompat.navTheme"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer">

이것이 도움이되기를 바랍니다.


1
또한이 방법은 android:background="@drawable/nav_item_drawable"RadioButton, Checkbox, Button 등과 같은 다른 위젯 에서도 사용할 수 있습니다 setOnCheckedChangeListener. 색상 강조 표시만을위한 블로 트웨어 프로그래밍을 줄 입니다.
rupinderjeet

@Ankush이 작동하지만 텍스트와 아이콘이 사라지고 항목 색조 색상도 설정했지만 작동하지 않습니다. 어떻게 할 수 있는지 제게 제안 해 주시겠습니까
User

1
@User 귀하의 코드에 무엇이 잘못되었는지 모르겠지만 답변에 추가했습니다. 적은 노력으로 동일한 것을 달성하는 완전히 다른 방법. 당신은 그것을 확인할 수 있습니다.
Ankush

1
이것은 답으로 받아 들여 져야합니다! 대단히 감사합니다, 매우 도움이됩니다 !!!
Svetlana Rozhkova

4

NavigateItem항목을 NavigateView클릭 할 때마다 true 로 설정해야합니다.

//listen for navigation events
NavigationView navigationView = (NavigationView)findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(this);
// select the correct nav menu item
navigationView.getMenu().findItem(mNavItemId).setChecked(true);

추가 NavigationItemSelectedListenerNavigationView

  @Override
  public boolean onNavigationItemSelected(final MenuItem menuItem) {
    // update highlighted item in the navigation menu
    menuItem.setChecked(true);
    mNavItemId = menuItem.getItemId();

    // allow some time after closing the drawer before performing real navigation
    // so the user can see what is happening
    mDrawerLayout.closeDrawer(GravityCompat.START);
    mDrawerActionHandler.postDelayed(new Runnable() {
      @Override
      public void run() {
        navigate(menuItem.getItemId());
      }
    }, DRAWER_CLOSE_DELAY_MS);
    return true;
  }

Vikalp를 도와 주셔서 감사합니다.하지만 저는 이미 그렇게하고 있습니다 ( setChecked(true)). 확인 된 항목의 색상이 변경되는 것을 볼 수 있지만 직접 수정할 수는 없습니다. 색상은 항상 navigatioview 배경의 밝은 버전입니다.
그렉

@Greg 기본적 setChecked(true)으로 View사용하는 장치에 따라 배경색 을 변경합니다. 항목의 배경을 다른 색상으로 변경하려면 레이아웃을 확장 DrawerLayout하거나 NavigationView직접 처리해야합니다.
Vikalp 파텔

다시 한 번 감사드립니다. 말씀하신대로 시도했지만 성공하지 못했습니다.
그렉

2

이를 달성하는 또 다른 방법은 다음과 같습니다.

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            item.setEnabled(true);
            item.setTitle(Html.fromHtml("<font color='#ff3824'>Settings</font>"));
            return false;
            }
        });


    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}


내 dobut는 팝업 메뉴에서 선택한 항목의 색상을 변경하려면 어떻게해야하는지에 관한 것이지만,이 솔루션에서 선택한 메뉴 항목의 색상을 변경하는 좋은 아이디어를 얻은 덕분에 투표를 !!! 해결 방법은 :: item.setTitle (Html.fromHtml ( "<font color = '# ff3824'> 설정 </ font>"));
Tarit Ray

1

활동의 onCreate 메서드에서 수행하는 방법은 다음과 같습니다.

NavigationView navigationView = findViewById(R.id.nav_view);
ColorStateList csl = new ColorStateList(
    new int[][] {
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_checked}  // checked
    },
    new int[] {
        Color.BLACK,
        Color.RED
    }
);
navigationView.setItemTextColor(csl);
navigationView.setItemIconTintList(csl);

1

1 단계 : 선택 / 선택 취소 선택기 작성 :

selector.xml

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

2 단계 : 위젯 app:itemTextColor내 에서 xml 속성을 사용 NavigationView하여 텍스트 색상을 선택합니다.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/navigation_header_layout"
    app:itemTextColor="@drawable/selector"
    app:menu="@menu/navigation_menu" />

3 단계 :
어떤 이유로 NavigationView메뉴 에서 항목을 눌렀을 때 이를 버튼 확인으로 간주하지 않습니다. 따라서 선택한 항목을 수동으로 확인하고 이전에 선택한 항목을 지워야합니다. 그렇게하려면 아래 리스너를 사용하십시오.

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    int id = item.getItemId();

    // remove all colors of the items to the `unchecked` state of the selector
    removeColor(mNavigationView);

    // check the selected item to change its color set by the `checked` state of the selector
    item.setChecked(true);

    switch (item.getItemId()) {
      case R.id.dashboard:
          ...
    }

    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

private void removeColor(NavigationView view) {
    for (int i = 0; i < view.getMenu().size(); i++) {
        MenuItem item = view.getMenu().getItem(i);
        item.setChecked(false);
    }
}

4 단계 :
아이콘 색상을 변경하려면 메뉴 항목 의 app:iconTint속성을 사용 NavigationView하고 동일한 선택기로 설정합니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/nav_account"
        android:checked="true"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="My Account"
        app:iconTint="@drawable/selector" />
    <item
        android:id="@+id/nav_settings"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="Settings"
        app:iconTint="@drawable/selector" />

    <item
        android:id="@+id/nav_logout"
        android:icon="@drawable/logout"
        android:title="Log Out"
        app:iconTint="@drawable/selector" />
</menu>

결과:

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.