TabLayout中的选项卡未填满整个ActionBar

时间:2015-06-09 01:11:33

标签: java android tabs

我使用$(document).ready(function(){ var href = window.location.href; var splitit = (href.split('#'))[1]; //split url to get sec1 name if(splitit !== "" || splitit !== "undefined"){ $('html, body').animate({ scrollTop: $('#'+splitit).offset().top }, 2000); } }); TabLayout在指南Google Play Style Tabs using TabLayout后面显示ViewPager,但我的标签会被压缩到ActionBar的左侧,如下所示:


我希望他们以相同的宽度占据整个酒吧。我只对指南做了一些小改动:

在activity_main.xml中创建了一个样式来显示ActionBar:

ActionBar tabs

这是styles.xml代码:

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

此外,我的<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="windowActionBar">true</item> <item name="tabIndicatorColor">#ffff0030</item> </style> 现在扩展MainActivity而不是AppCompatActivity

6 个答案:

答案 0 :(得分:41)

您可以参考TabLayout

GRAVITY_CENTER重力用于布置TabLayout中心的标签。

GRAVITY_FILL重力用于尽可能多地填充TabLayout。

MODE_FIXED固定标签会同时显示所有标签,最适合使用受益于标签之间快速支点的内容。

MODE_SCROLLABLE可滚动标签在任何给定时刻都会显示标签的子集,并且可以包含更长的标签标签和更多的标签。

在您的代码或布局xml中设置它。

app:tabGravity="center"
app:tabMode="fixed"

tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
tabLayout.setTabMode(TabLayout.MODE_FIXED);    

通常情况下,使用像打击这样的代码可以在不设置tabGravitytabMode的情况下工作。

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

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

</android.support.design.widget.AppBarLayout>

答案 1 :(得分:39)

我从img得到的简单回答。

您只需将其放入xml代码中:

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

答案 2 :(得分:3)

尝试将此添加到MainActivity:

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

答案 3 :(得分:1)

在xml中添加 - app:tabGravity =“fill”属性。

例如 -

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

答案 4 :(得分:0)

尝试这样做有效

class Something {
    constructor() {
        this.maxRange = 5;
        this.minRange = 1;
        this.selectedRange = 3;
    }
    set selectedRange(value) {
        if (value <= this.maxRange && value >= this.minRange) {
            return true;
        }
    }
} 

答案 5 :(得分:0)

设置TabLayout宽度以匹配父

喜欢这个。

<TabLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"/>