当tabMode设置为“可滚动”时，TabLayout不填充宽度

我已经将TabLayout （从支持库v22.2.1）添加到我的片段：

问题是，当片段的方向是横向（在片段的初始创建之前或之后）， TabLayout与Fragment的宽度不匹配（是的，父对象的宽度也设置为match_parent ）。

当屏幕宽度很小（即不是所有的标签可以同时显示）：

当屏幕宽度足以显示所有标签时（请参阅右侧的空白处）：

如果我将tabMode更改为fixed，则宽度将被填充，但制表符太小。 那里有没有适当的解决方案？

Answer 1

我想这是实现你想要的最简单的方法。

 public class CustomTabLayout extends TabLayout { public CustomTabLayout(Context context) { super(context); } public CustomTabLayout(Context context, AttributeSet attrs) { super(context, attrs); } public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); try { if (getTabCount() == 0) return; Field field = TabLayout.class.getDeclaredField("mTabMinWidth"); field.setAccessible(true); field.set(this, (int) (getMeasuredWidth() / (float) getTabCount())); } catch (Exception e) { e.printStackTrace(); } } } 

Answer 2

而不是创建自定义的TabLayout，并绕开或创建更多的布局，作为TabLayout的包装仅用于背景。 尝试这个，

  android:background="@color/colorAccent" app:tabGravity="fill" app:tabMode="scrollable"/> 

这会将背景设置在tabLayout后面，而不是在每个选项卡后面设置背景。

Answer 3

尝试这个变化

Answer 4

我并不关心填充宽度的标签，但我关心背景颜色没有扩大到全宽。 所以我想到了这个解决方案，我把一个FrameLayout放在它后面，使用与制表符相同的背景颜色。

Answer 5

请使用这个将会解决这个问题

Answer 6

请检查这个我认为它的作品

公共类MainActivity扩展AppCompatActivity {

 private TextView mTxv_Home, mTxv_News, mTxv_Announcement; private View mView_Home, mView_News, mView_Announcements; private HorizontalScrollView hsv; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTxv_Home = (TextView) findViewById(R.id.txv_home); mTxv_News = (TextView) findViewById(R.id.txv_news); mTxv_Announcement = (TextView) findViewById(R.id.txv_announcements); mView_Home = (View) findViewById(R.id.view_home); mView_News = (View) findViewById(R.id.view_news); mView_Announcements = (View) findViewById(R.id.view_announcements); hsv = (HorizontalScrollView) findViewById(R.id.hsv); viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); DisplayMetrics displaymetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(displaymetrics); int wt = displaymetrics.widthPixels/3; mTxv_Home.setWidth(wt); mTxv_News.setWidth(wt); // mTxv_Announcement.setWidth(wt); mTxv_Home.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mTxv_Home.setTextColor(Color.parseColor("#3F51B5")); mTxv_News.setTextColor(Color.parseColor("#808080")); mTxv_Announcement.setTextColor(Color.parseColor("#808080")); mView_Home.setBackgroundColor(Color.parseColor("#3F51B5")); mView_News.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_Announcements.setBackgroundColor(Color.parseColor("#E8E8E8")); hsv.post(new Runnable() { public void run() { hsv.fullScroll(HorizontalScrollView.FOCUS_LEFT); } }); viewPager.setCurrentItem(0); } }); mTxv_News.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mTxv_Home.setTextColor(Color.parseColor("#808080")); mTxv_News.setTextColor(Color.parseColor("#3F51B5")); mTxv_Announcement.setTextColor(Color.parseColor("#808080")); mView_Home.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_News.setBackgroundColor(Color.parseColor("#3F51B5")); mView_Announcements.setBackgroundColor(Color.parseColor("#E8E8E8")); hsv.post(new Runnable() { public void run() { int centerX = hsv.getChildAt(0).getWidth()/2; hsv.scrollTo(centerX, 0); } }); viewPager.setCurrentItem(1); } }); mTxv_Announcement.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mTxv_Home.setTextColor(Color.parseColor("#808080")); mTxv_News.setTextColor(Color.parseColor("#808080")); mTxv_Announcement.setTextColor(Color.parseColor("#3F51B5")); mView_Home.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_News.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_Announcements.setBackgroundColor(Color.parseColor("#3F51B5")); hsv.post(new Runnable() { public void run() { hsv.fullScroll(HorizontalScrollView.FOCUS_RIGHT); } }); viewPager.setCurrentItem(2); } }); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (position == 0) { mTxv_Home.setTextColor(Color.parseColor("#3F51B5")); mTxv_News.setTextColor(Color.parseColor("#808080")); mTxv_Announcement.setTextColor(Color.parseColor("#808080")); mView_Home.setBackgroundColor(Color.parseColor("#3F51B5")); mView_News.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_Announcements.setBackgroundColor(Color.parseColor("#E8E8E8")); hsv.post(new Runnable() { public void run() { hsv.fullScroll(HorizontalScrollView.FOCUS_LEFT); } }); } else if (position == 1) { mTxv_Home.setTextColor(Color.parseColor("#808080")); mTxv_News.setTextColor(Color.parseColor("#3F51B5")); mTxv_Announcement.setTextColor(Color.parseColor("#808080")); mView_Home.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_News.setBackgroundColor(Color.parseColor("#3F51B5")); mView_Announcements.setBackgroundColor(Color.parseColor("#E8E8E8")); hsv.post(new Runnable() { public void run() { int centerX = hsv.getChildAt(0).getWidth()/2; hsv.scrollTo(centerX, 0); } }); } else if (position == 2) { mTxv_Home.setTextColor(Color.parseColor("#808080")); mTxv_News.setTextColor(Color.parseColor("#808080")); mTxv_Announcement.setTextColor(Color.parseColor("#3F51B5")); mView_Home.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_News.setBackgroundColor(Color.parseColor("#E8E8E8")); mView_Announcements.setBackgroundColor(Color.parseColor("#3F51B5")); hsv.post(new Runnable() { public void run() { hsv.fullScroll(HorizontalScrollView.FOCUS_RIGHT); } }); } } @Override public void onPageScrollStateChanged(int state) { } }); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new HomeFragment(), "Home"); adapter.addFragment(new NewsFragment(), "News"); adapter.addFragment(new AnnouncementsFragment(), "Announcements"); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List mFragmentList = new ArrayList<>(); private final List mFragmentTitleList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } public void addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } 

}

Answer 7

试试这个，这是一个解决方法，它设置了tabMaxWidth="0dp" ， tabGravity="fill"和tabMode="fixed" 。

10英寸平板电脑屏幕截图：

Answer 8

当你想显示标签“填充”时，你应该设置应用程序：tabMode =“固定”。

 **** 

Answer 9

如果任何标签标题大于（measuredWidth / tabCount），则@ dtx12 answer不起作用。

有这种情况的我的TabLayout子类（在Kotlin）。 我希望这会帮助别人。

 class FullWidthTabLayout : TabLayout { constructor(context: Context?) : super(context) constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { super.onLayout(changed, l, t, r, b) if (changed) { val widths = mutableListOf() for (i in 0..this.tabCount - 1) { widths.add(this.getTabAt(i)!!.customView!!.width) } if (widths.sum() < this.measuredWidth) { var equalPart: Long = this.measuredWidth.toLong() / this.tabCount.toLong() var biggerWidths = widths.filter { it > equalPart } var smallerWidths = widths.filter { it <= equalPart } var rest: Long = this.measuredWidth.toLong() - biggerWidths.sum() while (biggerWidths.size != 0) { equalPart = rest / smallerWidths.size biggerWidths = smallerWidths.filter { it >= equalPart } smallerWidths = smallerWidths.filter { it < equalPart } rest -= biggerWidths.sum() } val minWidth = (rest / smallerWidths.size) + 10 //dont know why there is small gap on the end, thats why +10 for (i in 0..this.tabCount - 1) { this.getTabAt(i)!!.customView!!.minimumWidth = minWidth.toInt() } } } } }