PageChangeListener로 탭 아이콘의 색상을 동적으로 변경하십시오.

Question

Facebook 앱과 같이 탭 아이콘의 색상을 변경하고 싶습니다.

ViewPager의 상태가 SCROLL_STATE_DRAGGING이며, 모든 아이콘 변경 '때 ViewPager의 상태가 SCROLL_STATE_SETTLING 및 SCROLL_STATE_IDLE 때 다른 한편으로는, 선택되지 않은 (회색) 색상에 색상을, 다음, 선택 (흰색에 선택한 탭의 아이콘을 변경할) 색깔.

테스트를 수행했습니다. 현재 선택된 조각을 다른 조각으로 스크롤하지만 여전히 SCROLL_STATE_DRAGGING 상태를 유지합니다.

이상한 상황에서 에뮬레이터에서 앱을 실행했는데 완벽하게 작동하는 것 같습니다. 실제 기기에서 앱을 실행하면 ViewPager 상태 일 때 선택한 탭의 색상이 흰색으로 변경되지 않았습니다. SCROLL_STATE_IDLE 또는 SCROLL_STATE_SETTLING

addOnPageChangeListener에서 ViewPager까지를 추가했으며 각기 다른 색으로 변경되었습니다.

팁이 있습니까?

void setupViews() { 
     mViewPager = (ViewPager) findViewById(R.id.container); 
     tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
     colorSelected = ContextCompat.getColor(ctx, R.color.itemSelected);//white 
     colorUnselected = ContextCompat.getColor(ctx, R.color.itemUnselected);//gray 

     pagerIcons = new Drawable[2]; 
     pagerIcons[0] = DrawableCompat.wrap(VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_list_black_24dp, null)); 
     pagerIcons[1] = DrawableCompat.wrap(VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_shopping_cart_black_24dp, null)); 

     ViewPagerHelper.TabOption option = new ViewPagerHelper.TabOption(true, true); 
     helper = new ViewPagerHelper(getSupportFragmentManager(), mViewPager, tabLayout, option); 
     helper.bindViewPager(); 

     helper.addFragmentWithTabIcon(new ExpenseIncomeFragment(), pagerIcons[0], ExpenseIncomeFragment.TAG); 
     helper.addFragmentWithTabIcon(new FragmentWishList(), pagerIcons[1], FragmentWishList.TAG); 

     mViewPager.setScrollbarFadingEnabled(true); 
     mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
       //if (positionOffset>0)DrawableCompat.setTint(pagerIcons[mViewPager.getCurrentItem()], colorUnselected); 
       Log.e("MainActivity","position="+position+" 
positionOffset="+positionOffset+" positionOffsetPixels="+positionOffsetPixels); 
      } 

      @Override 
      public void onPageSelected(int position) { 
       Log.e("MainActivity","position="+position); 

pagerIcons[mViewPager.getCurrentItem()].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN); 
     } 

      @Override 
      public void onPageScrollStateChanged(int state) { 
       int pos = mViewPager.getCurrentItem(); 
       switch (state) { 
        case ViewPager.SCROLL_STATE_IDLE: 
         Log.e("MainActivity","SCROLL_STATE_IDLE" + " getCurrentItem="+pos); 

         pagerIcons[pos].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN); 
         break; 
        case ViewPager.SCROLL_STATE_DRAGGING: 
         Log.e("MainActivity","SCROLL_STATE_DRAGGING" + " getCurrentItem="+pos); 
         pagerIcons[pos].setColorFilter(colorUnselected, PorterDuff.Mode.SRC_IN); 
         break; 
        case ViewPager.SCROLL_STATE_SETTLING: 
         Log.e("MainActivity","SCROLL_STATE_SETTLING" + " getCurrentItem="+pos); 
         pagerIcons[pos].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN); 
         break; 
       } 

      } 
     }); 
     helper.update(); 

     mViewPager.setCurrentItem(0); 
     int len = pagerIcons.length; 
     for (int i = 0; i < len; i++) { 
      pagerIcons[i].setColorFilter(colorUnselected, 
      PorterDuff.Mode.SRC_IN); 
     } 
     pagerIcons[0].setColorFilter(colorSelected,PorterDuff.Mode.SRC_IN); 

    }); 
} 

클래스 ViewPagerHelper이 TabLayout에 ViewPager을 결합하는 데 사용됩니다

여기 내 코드입니다. pagerIcons은 탭 아이콘의 드로어 블이며 색상을 채색합니다.

Answer 1

벡터 드로어 블을 사용하므로이 문제를 다른 방법으로 해결할 수 있습니다. 당신은 전체 OnPageChangeListener을 없애 그냥이 자신을 떠날 수 :

void setupViews() { 
    mViewPager = (ViewPager) findViewById(R.id.container); 
    tabLayout = (TabLayout) findViewById(R.id.tabLayout); 

    pagerIcons = new Drawable[2]; 
    pagerIcons[0] = VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_list_black_24dp, null); 
    pagerIcons[1] = VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_shopping_cart_black_24dp, null); 

    ViewPagerHelper.TabOption option = new ViewPagerHelper.TabOption(true, true); 
    helper = new ViewPagerHelper(getSupportFragmentManager(), mViewPager, tabLayout, option); 
    helper.bindViewPager(); 

    helper.addFragmentWithTabIcon(new ExpenseIncomeFragment(), pagerIcons[0], ExpenseIncomeFragment.TAG); 
    helper.addFragmentWithTabIcon(new FragmentWishList(), pagerIcons[1], FragmentWishList.TAG); 

    mViewPager.setScrollbarFadingEnabled(true); 
    helper.update(); 

    mViewPager.setCurrentItem(0); 
} 

대신 자바에있는 아이콘의 색상을 관리하려고, 당신은 <vector>에서 그들을 관리하여 당신을 위해 그것을 할 시스템을하도록 할 수 있습니다 drawables 자체. 먼저, res/color/ 디렉토리에 색상 선택기 파일을 만듭니다

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:color="@color/itemSelected" android:state_selected="true"/> 
    <item android:color="@color/itemUnselected"/> 
</selector> 

이 그런 다음 벡터 파일에이 색상을 사용

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="24dp" 
    android:height="24dp" 
    android:viewportWidth="24.0" 
    android:viewportHeight="24.0"> 
    <path 
     android:fillColor="@color/my_color_selector" 
     android:pathData="M3,13h2v-2L3,11v2zM3,17h2v-2L3,15v2zM3,9h2L5,7L3,7v2zM7,13h14v-2L7,11v2zM7,17h14v-2L7,15v2zM7,7v2h14L21,7L7,7z"/> 
</vector> 

당신이 21 이하 API 수준을 지원해야하는 경우 사용할 수 없습니다 색상 선택기를 벡터에서 직접 사용할 수 있습니다. 대신 각 벡터 드로어 블의 복사본을 두 개 만듭니다. 하나는 선택한 색으로, 다른 하나는 선택되지 않은 색으로 만듭니다. 그리고 자바에서 StateListDrawable을 구축하고 pagerIcons 배열에 그 지정 :

에 관계없이 XML의 색상 선택기를 사용하거나 자바에서 StateListDrawable을 구축 할 수 있는지 여부

Drawable selected0 = ContextCompat.getDrawable(this, R.drawable.ic_list_black_24dp_selected); 
Drawable unselected0 = ContextCompat.getDrawable(this, R.drawable.ic_list_black_24dp_unselected); 

StateListDrawable statelist0 = new StateListDrawable(); 
statelist0.addState(new int[]{android.R.attr.state_selected}, selected0); 
statelist0.addState(StateSet.WILD_CARD, unselected0); 

pagerIcons[0] = statelist0; 

는, 루트 개념은 동일합니다 :하자 안드로이드 프레임 워크는 어떤 탭이 선택되었는지를 결정하고, 당신을 위해 색칠을 처리하게합니다.