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

我已经将TabLayout (从支持库v22.2.1)添加到我的片段:

 <android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/MyColorAccentTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable"/> 

问题是,当片段的方向是横向(在片段的初始创build之前或之后), TabLayoutFragment的宽度不匹配(是的,父对象的宽度也设置为match_parent )。

当屏幕宽度很小(即不是所有的标签可以同时显示): 在这里输入图像说明

当屏幕宽度足以显示所有标签时(请参阅右侧的空白处): 在这里输入图像说明

如果我将tabMode更改为fixed,则会填充宽度,但制表符太小。 那里有没有适当的解决scheme?

Solutions Collecting From Web of "当tabMode设置为“可滚动”时,TabLayout不填充宽度"

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

 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(); } } } 

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

 <android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/MyColorAccentTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" <!-- Instead of setting app:tabBackground --> android:background="@color/colorAccent" app:tabGravity="fill" app:tabMode="scrollable"/> 

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

尝试这个变化

  <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" /> 

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

 <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/MyColor"> <android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/MyCustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable"/> </FrameLayout> 

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

 <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed" /> 

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

公共类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<Fragment> mFragmentList = new ArrayList<>(); private final List<String> 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); } } 

}

 <HorizontalScrollView android:id="@+id/hsv" android:layout_width="fill_parent" android:layout_height="56dp" android:layout_weight="0" android:fillViewport="true" android:measureAllChildren="false" android:scrollbars="none" > <LinearLayout android:id="@+id/innerLay" android:layout_width="fill_parent" android:layout_height="50dp" android:orientation="horizontal" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/txv_home" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:text="Home" android:singleLine="true" android:paddingLeft="35dp" android:paddingRight="35dp" android:gravity="center" android:textSize="15sp"/> <View android:id="@+id/view_home" android:layout_width="match_parent" android:layout_height="3dp" android:background="@color/colorPrimary" /> </LinearLayout> <View android:layout_width="1dp" android:layout_height="match_parent" android:visibility="gone" android:background="#e8e8e8"/> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/txv_news" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:text="News" android:singleLine="true" android:paddingLeft="35dp" android:paddingRight="35dp" android:gravity="center" android:textSize="15sp"/> <View android:id="@+id/view_news" android:layout_width="match_parent" android:layout_height="3dp" android:background="#e8e8e8"/> </LinearLayout> <View android:layout_width="1dp" android:layout_height="match_parent" android:visibility="gone" android:background="#e8e8e8"/> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/txv_announcements" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:singleLine="true" android:text="Announcements" android:paddingLeft="35dp" android:paddingRight="35dp" android:gravity="center" android:textSize="15sp"/> <View android:id="@+id/view_announcements" android:layout_width="match_parent" android:layout_height="1dp" android:background="#e8e8e8"/> </LinearLayout> </LinearLayout> </HorizontalScrollView> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/hsv" /> 

尝试这一个,这是一个解决scheme,设置tabMaxWidth="0dp"tabGravity="fill"tabMode="fixed"

  <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed"/> </android.support.v4.view.ViewPager> 

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

截图

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

 **<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="#353535" app:tabMode="fixed" android:minHeight="?attr/actionBarSize" app:tabIndicatorColor="@color/red" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />** 

如果任何标签标题大于(measuredWidth / tabCount),则@ dtx12答案不起作用。

有这种情况的我的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<Int>() 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() } } } } }