PageChangeListenerでタブアイコンの色を動的に変更する

Question

Facebookアプリのようにタブアイコンの色を変更したいと思います。 ViewPagerの状態がSCROLL_STATE_SETTLINGとSCROLL_STATE_IDLEとき

ViewPagerとき選択されていない（灰色）色に色の状態がSCROLL_STATE_DRAGGINGあり、すべてのアイコンを変更 'は、他方で、次いで選択された（白に選択されたタブのアイコンを変更します） 色。

私はテストを行いました：現在選択されているフラグメントを他のフラグメントにスクロールしますが、まだ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); 
} 

代わりにJavaでアイコンの色を管理しようとしているの、あなたが<vector>でそれらを管理することにより、あなたのためにそれを行うシステムを聞かせすることができますドロアブル自体まず、あなたの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レベルをサポートする必要がある場合は、あなたが使用することはできませんあなたのベクトルの中に直接カラーセレクタを置きます。代わりに、選択された色と選択されていない色を持つそれぞれのベクトル描画可能ファイルの2つのコピーを作成します。次に、JavaでStateListDrawableを構築し、自分のpagerIcons配列にそれを割り当てる：

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; 

かかわらず、あなたがXMLでカラーセレクタを使用するか、JavaでStateListDrawableを構築することができますかどうかの、根本概念は同じですしましょうAndroidのフレームワークは、どのタブが選択されているかを決定し、あなたに色付けをさせる。