Question

我刚刚将新的TabLayout组件添加到我的应用中。您可能知道标签app:tabMode="scrollable"和app:tabMode="fixed"有两种不同的模式。

当我使用app:tabMode="fixed"时，我得到以下结果：

左侧和右侧没有边距/填充，但文本被包裹。

但是当我使用app:tabMode="scrollable"时，我得到以下结果：

文字没有被包裹，但右边是一个奇怪的边缘，我无法摆脱它。

我还尝试将tabGravity设置为app:tabGravity="center"或app:tabGravity="fill"，但未实现任何更改。

如果你们中的聪明人和女孩能为我找到解决方案，那会很好。

干杯，卢卡斯

Answer 1

这是一个快速破解，比使用setCustomView()短很多：使用android:theme上的TabLayout属性：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TabLayout_Theme"
    app:tabMode="fixed"/>

然后在您的主题XML：

<style name="TabLayout_Theme" parent="@style/AppTheme">
    <item name="android:singleLine">true</item>
</style>

我们必须这样做，因为遗憾的是，{Taberay上的android:singleLine设置会忽略app:tabTextAppearance属性。 app:tabTextAppearance实际上只对更改文字大小有用。

Answer 2

此处的一个解决方案是为每个选项卡扩展自定义布局，这将使您可以更好地控制每个选项卡的外观。这是通过setCustomView()方法完成的。

请注意，在不同的屏幕分辨率下它会有所不同。

让它在每台设备上看起来都很完美很难，但至少使用这种方法可以提供更多控制，因为您可以针对不同的屏幕分辨率/尺寸使用不同的自定义布局xml文件。

一种方法是使字体大小尽可能大，而不会在每个屏幕尺寸上切断。

我得到了一个简单的示例，它将每个标签中的文本限制为一行，但是在这个简单的示例中，它还会使侧边标签中的长文本在不改变字体大小的情况下进行椭圆化。下一步是确定每个屏幕大小的最佳字体大小，并为每个屏幕大小创建一个特定的选项卡布局xml。

以下是custom_tab.xml文件，其中指定了android:singleLine="true"：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/custom_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:textSize="16dip"
        android:textColor="#ffffff"
        android:singleLine="true"
        />
</LinearLayout>

以下是MainActivity的布局：

<RelativeLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

这是活动代码，其中包含FragmentPagerAdapter：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        PagerAdapter pagerAdapter =
                new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }


    class PagerAdapter extends FragmentPagerAdapter {

        String tabTitles[] = new String[] { "Aufzeichnung", "Berichte", "Neue Aufgabe", };
        Context context;

        public PagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

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

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new BlankFragment();
                case 1:
                    return new BlankFragment();
                case 2:
                    return new BlankFragment();
            }

            return null;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // Generate title based on item position
            return tabTitles[position];
        }

        public View getTabView(int position) {
            View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView tv = (TextView) tab.findViewById(R.id.custom_text);
            tv.setText(tabTitles[position]);
            return tab;
        }

    }
}

这是上面代码的结果：

请注意，如果您移除android:singleLine="true"，它看起来像这样，与您在问题中的外观类似：

Answer 3

显示＆＃34; ...＆＃34;在标签标题中不会提供良好的用户界面体验我建议您将 tabmode 设置为可滚动，并让标题标题占用他们想要的空间。

  <android.support.design.widget.TabLayout
                android:id="@+id/htab_tabs"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="scrollable" />

Answer 4

如果是一个选项，您可以使用RelativeLayout中心选项卡并设置android：layout_centerHorizontal =＆＃34; true＆＃34;

这将在左侧和右侧给您相同的余量。

e.g。

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

Answer 5

在您的布局XML中，如果您使用TextView，请使用android:maxLines="1"或android:singleLine="true" 看看这是否有效。如果不是TextView那么请把你的xml放在这里。

Answer 6

通过为app分配样式解决了我的问题：tabTextAppearance

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/MyCustomTabTextAppearance">

式：

<style name="MyCustomTabTextAppearance" parent="@style/AppTheme">
    <item name="android:singleLine">true</item>
    <item name="android:textSize">@dimen/_5sdp</item>
</style>

您也可以设置textSize。

Answer 7

我已添加：

app:tabMaxWidth="0dp"

在元素中。

Answer 8

使用此代码，您可以删除默认填充。对我来说，它可以在一行内制作稍长的文本

<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"

从这里： http://panavtec.me/playing-with-the-new-support-tablayout

在TabLayout

9 个答案: