自动调整选项卡布局中的文本

Question

我使用很棒的字体库创建了自定义选项卡布局。

自定义Tab布局如下

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tab" android:textSize="20sp" android:textColor="#888888"/>

主要tableout设计如下

<android.support.design.widget.CoordinatorLayout 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.design.widget.AppBarLayout
        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"
            android:gravity="top|start"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            app:tabIndicatorColor="#D71A21"
            app:tabIndicatorHeight="6dp"
            app:tabTextColor="#888888"
            app:tabSelectedTextColor="#000000"
            android:fontFamily="sans-serif-light"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_alignParentBottom="true"
        android:textColor="#888888"/>
</android.support.design.widget.CoordinatorLayout>

当我运行我的选项卡中的程序时，我得到了这样的输出

如您所见，可滚动条完全对齐，但是当我在另一台设备上安装该应用程序时，我得到了这样的输出

这里到底出了什么问题？

我应该使用一些允许文本自动缩放的内置库吗？

Answer 1

好吧，因为布局设置为 wrap_content，在较小的屏幕上，它会像那样包装内容，只要尝试给它一个合适的 40 or 60dp 高度，随便你看，我认为它会解决您的问题

试试这个

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#FFFFFF"
        app:tabIndicatorColor="#D71A21"
        app:tabIndicatorHeight="6dp"
        app:tabTextColor="#888888"
        app:tabSelectedTextColor="#000000"
        android:fontFamily="sans-serif-light"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

Answer 2

我尝试了一些博客和教程，开始了解 "Scroll able tab layout"。即使这样可以使图标和文本完美对齐。

只需在选项卡布局中添加这个

<android.support.design.widget.TabLayout
      ...........
      app:tabMode="scrollable
      ........... />

我也请求未来的访问者更新答案，以防下一个版本出现更好的东西。

自动调整选项卡布局中的文本

Autoadjusting Text in a Tab Layout

xml

tabs

android