设计库 TabLayout，选项卡指示器在滚动后弹跳

Question

编辑最新的设计库修复了这个问题

我在两个实例中使用 TabLayout，PagerAdapter 和 FragmentStatePagerAdapter。在这两种情况下，当在页面之间滑动时，选项卡指示器会弹跳。单击选项卡换页时，选项卡指示器不会弹跳。

我不确定这是我的错误、已知问题还是指南的一部分。如果您需要更多代码或其他示例，我会 post 它。

FragmentStatePagerAdapter

    mViewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            LogMeal log = mLogMealAdapter.getItem(position);
            return MealViewFragment.newInstance(log.getId());
        }

        @Override
        public CharSequence getPageTitle(int position) { // Tab text
            LogMeal logMeal1 = mLogMealAdapter.getItem(position);
            String s;
            if (logMeal1.getMealName().toString().trim().length() > 12) {
                s = logMeal1.getMealName().substring(0, 12) + "..";
            } else {
                s = logMeal1.getMealName();
            }
            return s;
        }

        @Override
        public int getCount() {
            return mLogMealAdapter.getCount();
        }
    });

    tabs.setTabTextColors(Color.parseColor("#80ffffff"), Color.parseColor("#ffffff"));
    if (mLogMealAdapter.getCount() == 1) {
        tabs.setTabMode(TabLayout.MODE_FIXED);
    } else {
        tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
    tabs.setupWithViewPager(mViewPager);
    mViewPager.setCurrentItem(position);

XML

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_meal_view"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/primary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@+id/toolbar_meal_view"
        android:background="@color/primary"
        android:theme="@style/ToolbarTheme"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabs"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@+id/tabs"
        android:background="@drawable/toolbar_shadow"/>

</RelativeLayout>

Answer 1

这是设计支持库 22.2.0 上的错误

也许会修复。 https://code.google.com/p/android/issues/detail?id=175073

Answer 2

我最近遇到了类似的问题。
我的解决方法：

1) 将 tabs.setupWithViewPager(mViewPager); 更改为

    \ use own OnPageChangeListener 
    mViewPager.addOnPageChangeListener(new MyPageScrollListener(mTabLayout));  

    \ Manually add tabs, for example:  
    mTabLayout.addTab(mTabLayout.newTab().setText(mViewPager.getAdapter().getPageTitle(0)));
    mTabLayout.addTab(mTabLayout.newTab().setText(mViewPager.getAdapter().getPageTitle(1)));  

    \ use own OnTabSelectedListener  
    mTabLayout.setOnTabSelectedListener(new MyOnTabSelectedListener());

2) 为自定义侦听器添加实现

 private class MyPageScrollListener implements ViewPager.OnPageChangeListener {
    private TabLayout mTabLayout;

    public MyPageScrollListener(TabLayout tabLayout) {
        this.mTabLayout = tabLayout;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        if(mTabLayout != null) {
            mTabLayout.getTabAt(position).select();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

private class MyOnTabSelectedListener implements TabLayout.OnTabSelectedListener {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        if (mViewPager.getCurrentItem() != position) {
            mViewPager.setCurrentItem(position, true);
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

希望对您有所帮助。

Answer 3

指示器“弹跳”错误已在版本 22.2.1 中修复，并且优越的。

只需更新您的 build.gradle:

dependencies {
    //...
    compile 'com.android.support:design:22.2.1'
}

设计库 TabLayout，选项卡指示器在滚动后弹跳

Design Library TabLayout, tab indicator bouncing after scroll

android

android-tabs

android-design-library