为什么在页面之间滑动时TabLayout的选项卡的图标/文本会闪烁?

and*_*per 8 icons android android-viewpager android-design-library android-tablayout

背景

我已经使用了PagerSlidingTabStrip库很长一段时间,在ViewPager上方显示标签.

最近,我的任务是设置图标(使用选择器,选择与未选择状态)而不是选项卡的文本,所以我做了.然而,似乎图书馆无法很好地处理它,有时显示空标签,所以我已经转移到TabLayout,这是谷歌设计库的一部分

问题

我注意到了一些如何向TabLayout添加图标的解决方案,但每个解决方案都有一个或多个问题:

  1. 没有显示图标
  2. 显示图标,但可以不时闪烁,特别是在设置了"exitFadeDuration"或快速滑动时使用选择器时
  3. 单击选项卡不会更改viewPager的当前页面.

代码

我使用的代码来自于MainActivity.java文件中的cheesesquare示例.这很基本:

      final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
      ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
      ...
      tabLayout.setupWithViewPager(viewPager);
Run Code Online (Sandbox Code Playgroud)

我尝试过的解决方案是:

  1. 为每个选项卡设置一个图标(并删除适配器的"getPageTitle"代码):

    for (int i = 0; i < tabLayout.getTabCount(); i++) 
        tabLayout.getTabAt(i).setIcon(...);
    
    Run Code Online (Sandbox Code Playgroud)

    当我没有使用选择器时,还尝试添加setOnTabSelectedListener.

    该解决方案导致闪烁效果(问题#2).

  2. 扩展TabLayout支持图标或实施TabViewProvider,如图所示这里.

    扩展TabLayout根本不显示图标(问题#1),实现TabViewProvider有闪烁图标的问题(尽管很少见).

  3. 对于getPageTitle,返回在它的图标,如图所示SpannableString 这里.这根本没有显示我的图标.

我记得我也尝试了其他解决方案,但他们也遇到了我提到过的问题.

这个问题

为标签设置图标的正确方法是什么?

有没有官方的方法来实现这一目标?我想至少为每个标签选择一个和未选择的图像.选择时的过渡是一个很好的奖励,我希望通过这种方式看起来更好.

为什么图标会闪烁?我注意到它甚至出现在文本中......

可能有解决方法吗?

and*_*per 8

这似乎是一个已知的问题,它也发生在文本中:

https://code.google.com/p/android/issues/detail?id=180454

它将在下一版本的库中得到修复.

解决方法是暂时使用以前的版本:

com.android.support:design:22.2.0
Run Code Online (Sandbox Code Playgroud)

编辑:这不是一个好的解决方法,因为图标可能会在某些情况下消失(我认为方向更改和滑动的组合).

编辑:我认为它不会消失,但更像是将其颜色更改为我给它的选择器中不存在的其他东西(它只有2个状态:选中和默认).

编辑:好的,找到了图标的解决方法.

  1. 使用旧版本(22.2.0),如上所述.

  2. 你需要避免使用图标的选择器.请使用确切的图像资源ID:

    private static final int[] TAB_ICONS_UNSELECTED = {...    };
    private static final int[] TAB_ICONS_SELECTED = {...    };
    
    Run Code Online (Sandbox Code Playgroud)
  3. 根据页面选择更新图标,如下所示:

    mViewPager.addOnPageChangeListener(new OnPageChangeListener() {
        @Override
        public void onPageSelected(final int position) {
            for (int i = 0; i < tabLayout.getTabCount(); ++i)
                tabLayout.getTabAt(i).setIcon(i != position ? TAB_ICONS_UNSELECTED[i] : TAB_ICONS_SELECTED[i]);
        }
    });
    
    Run Code Online (Sandbox Code Playgroud)

此外,请记住在初始化TabLayout时调用相同的循环.像这样的东西:

    for (int i = 0; i < tabLayout.getTabCount(); ++i)
        tabLayout.getTabAt(i).setIcon(i != mViewPager.getCurrentItem() ? TAB_ICONS_UNSELECTED[i] : TAB_ICONS_SELECTED[i]);
Run Code Online (Sandbox Code Playgroud)

我认为这也应该解决文本问题,而不仅仅是图标.


编辑:似乎v23将修复它,它很快就会出现.