如何使tablayout文本大小相等?

时间:2016-04-04 09:33:25

标签: android tabs

这就是我所做的:我为文本创建了一种风格

<!-- Change tab text appearance -->
    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAppearance">@style/CustomTabWidgetText</item>
    </style>

    <style name="CustomTabWidgetText"
        parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">16sp</item>
    </style>

然后我将它设置为我的tablayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activity.HomeActivity"
    tools:showIn="@layout/app_bar_main">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:titleTextColor="#ffffff"
        />


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabTextColor="#ffffff" />

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

</RelativeLayout>

结果如下:

enter image description here

正如您所看到的,&#34; D-day完成&#34;文字小于其他文字。我要求它的尺寸与其他尺寸相同,但我不知道如何。请帮帮我,谢谢。

5 个答案:

答案 0 :(得分:36)

您可以尝试在TabLayout中设置填充 (app:tabPaddingStart =“ - 1dp”,app:tabPaddingEnd =“ - 1dp”)

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabTextColor="#ffffff" 
        app:tabPaddingStart="-1dp"
        app:tabPaddingEnd="-1dp"/>

它帮助了我)

答案 1 :(得分:9)

Per this post,这对我来说非常有用:

    <android.support.design.widget.TabLayout
       android:id="@+id/tab_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMode="scrollable"
       app:tabGravity="fill"
       app:tabIndicatorHeight="5dp"
    />

tabModetabGravity属性可以解决问题。这使得标签可以根据需要延伸并像这样滚动:

enter image description here

答案 2 :(得分:2)

在经历了类似的事情之后,在阅读了TabLayout源代码之后,我尝试在我的dimens.xml文件中覆盖一个维度,如下所示:

<dimen name="design_tab_text_size_2line" tools:override="true">48sp</dimen>

并且不要忘记在文件的根目录中添加命名空间,如下所示:

<resources xmlns:tools="http://schemas.android.com/tools">

它适用于我。

希望它有所帮助!

编辑:

它似乎不适用于所有情况(当文本有两行或更多行时,它实际上应该可以工作),但是当样式不起作用时它会有所帮助。所以我所做的就是我使用了两种技术(风格和被覆盖的维度)。

答案 3 :(得分:0)

这对我有用:

app:tabMode="scrollable"
app:tabGravity="fill"

答案 4 :(得分:0)

In 认为最好的方法是使用自定义视图。您将拥有最大的灵活性。例如:

<com.google.android.material.tabs.TabLayout
       android:id="@+id/tabs"
       android:layout_width="match_parent"
       android:layout_height="36dp"
       android:layout_marginLeft="16dp"
       android:layout_marginRight="16dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:tabGravity="fill"
       app:tabMode="fixed">

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab2"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab3"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab4"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

   </com.google.android.material.tabs.TabLayout>

view_tab_text_layout 可以是:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     tools:background="@color/colorPrimary"
     android:orientation="vertical">

<androidx.appcompat.widget.AppCompatTextView
    android:maxLines="1"
    android:lines="1"
    android:id="@+id/tabTextView"
    android:textColor="@android:color/white"
    android:textAllCaps="false"
    android:textSize="18dp"
    android:textStyle="bold"
    app:autoSizeMaxTextSize="18dp"
    app:autoSizeMinTextSize="12dp"
    android:ellipsize="end"
    app:autoSizeTextType="uniform"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    tools:text="Tab 1" />
</FrameLayout>

您可以像这样访问自定义视图:

    tabLayout = findViewById(R.id.tabs);
    ((TextView) tabLayout.getTabAt(0).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab1);
    ((TextView) tabLayout.getTabAt(1).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab2);
    ((TextView) tabLayout.getTabAt(2).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab3);
    ((TextView) tabLayout.getTabAt(3).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab4);

可以在此处找到完整的工作示例:https://bitbucket.org/mspapant/tablayout-example