【问题标题】:Text size of android design TabLayout tabsandroid设计TabLayout标签的文字大小
【发布时间】:2015-10-06 21:36:51
【问题描述】:

我在更改设计库 tablayout (android.support.design.widget.TabLayout) 选项卡的文本大小时遇到​​困难。

我设法通过在 TabLayout 中分配 tabTextAppearance 来更改它

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

以下样式

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
</style>

但我有 2 个副作用:

1) 我失去了所选标签的强调色

2) 选项卡文本不再大写。

【问题讨论】:

    标签: android text-size android-tablayout


    【解决方案1】:

    继续使用 tabTextAppearance,但是

    1) 修复大写字母的副作用,在您的风格中添加 textAllCap :

    <style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">true</item>
    </style>
    

    2) 修复选中标签颜色的副作用,在 TabLayout xml 中添加以下库属性:

    app:tabSelectedTextColor="@color/color1"
    app:tabTextColor="@color/color2" 
    

    希望这会有所帮助。

    【讨论】:

    • 它现在就像一个魅力。感谢 u2gilles 的及时答复。
    • @u2gilles 我在标签中使用了自定义布局,它是带有 2 个文本视图的线性布局,但我只想在标签选择上更改一种文本视图颜色?
    • 如果你想设置 false 那么这里应该是除了两个之外的另一个字符串:false
    【解决方案2】:
    <style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
    </style>
    

    使用在TabLayout这样

    <android.support.design.widget.TabLayout
                app:tabTextAppearance="@style/MineCustomTabText"
                ...
                />
    

    【讨论】:

    • 工作正常。我正在使用支持库 25.1.0。
    • 适用于支持库 25.3.1
    • 太棒了,兄弟,你节省了我的时间,,它在 lib 25.1.0 上工作
    • @Sufian,它对我不起作用,我使用与您相同的支持版本(25.1.0)。知道为什么吗?
    • 如果您的标签文本是多行的。然后 tabLayout 它使用不同的字段来设置文本大小。请在此处查看我的答案以获得解决方案:stackoverflow.com/a/48797329/700693
    【解决方案3】:

    我有类似的问题和类似的解决方案:

    1) 尺寸

    在 xml 中你有 TabLayout,

            <android.support.design.widget.TabLayout
                ...
                app:tabTextAppearance="@style/CustomTextStyle"
                ...
            />
    

    那么风格,

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

    如果你不想要大写字符在 "android:textAllCaps" 中输入 false

    2) 选中或未选中选项卡的文本颜色,

    TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
        } else {
            tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
        }
    

    然后在 res/color/tab_selector.xml 中

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_selected="true" />
    <item android:color="@color/white" />
    

    【讨论】:

      【解决方案4】:

      使用 api 22 和 23 制作这种风格:

      <style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
          <item name="android:textSize">12sp</item>
          <item name="android:textAllCaps">true</item>
      </style>
      

      并将其应用于您的标签布局:

      <android.support.design.widget.TabLayout
          android:id="@+id/contentTabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="10dp"
          android:background="@drawable/list_gray_border"
          app:tabTextAppearance="@style/TabLayoutStyle"
          app:tabSelectedTextColor="@color/colorPrimaryDark"
          app:tabTextColor="@color/colorGrey"
          app:tabMode="fixed"
          app:tabGravity="fill"/>
      

      【讨论】:

        【解决方案5】:
        TabLayout  tab_layout = (TabLayout)findViewById(R.id.tab_Layout_);
        
        private void changeTabsFont() {
            Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
            ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
            int tabsCount = vg.getChildCount();
            for (int j = 0; j < tabsCount; j++) {
                ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
                int tabChildsCount = vgTab.getChildCount();
                for (int i = 0; i < tabChildsCount; i++) {
                    View tabViewChild = vgTab.getChildAt(i);
                    if (tabViewChild instanceof TextView) {
                        ((TextView) tabViewChild).setTypeface(font);
                        ((TextView) tabViewChild).setTextSize(15);
        
                    }
                }
            }
        }
        

        此代码适用于我使用 tablayout。 它会改变字体的大小,也会改变字体样式。

        这对你们也有帮助,请检查此链接

        https://stackoverflow.com/a/43156384/5973946

        此代码适用于 Tablayout 更改文本颜色、字体(字体样式)以及文本大小。

        【讨论】:

          【解决方案6】:

          试试下面提到的截图,它也适用于我。

          在我的布局xml 中,我有我的TabLayout,为TabLayout 添加了样式,如下所示:

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

          在我的style.xml 中,我已经定义了在我的布局 xml 中使用的样式,请检查下面添加的样式的代码:

          <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
              <item name="android:background">YOUR BACKGROUND COLOR</item>
              <item name="tabTextAppearance">@style/MyCustomTabText</item>
              <item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
              <item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
          </style>
          
          <style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
              <item name="android:textSize">YOUR TEXT SIZE</item>
              <item name="android:textStyle">bold</item>
              <item name="android:textColor">@android:color/white</item>
          </style>
          

          希望对你有用.....

          【讨论】:

            【解决方案7】:

            按照以下方式进行。

            1.将样式添加到 XML

                <style name="MyTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
                    <item name="android:textSize">14sp</item>
                </style>
            

            2。应用样式

            找到包含 TabLayout 的 Layout 并添加样式。添加的行是粗体。

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

            【讨论】:

              【解决方案8】:

              我使用的是 Android Pie,但似乎没有任何效果,所以我使用了 app:tabTextAppearance 属性。我知道这不是完美的答案,但可能会对某人有所帮助。

              <android.support.design.widget.TabLayout
                      android:id="@+id/tabs"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      app:tabMode="fixed"
                      app:tabTextAppearance="@style/TextAppearance.AppCompat.Caption" />
              

              【讨论】:

                【解决方案9】:

                XML 文件的值

                <style name="tab">
                    <item name="android:textSize">@dimen/_10ssp</item>
                    <item name="android:textColor">#FFFFFF</item>
                </style>
                

                标签布局

                <com.google.android.material.tabs.TabLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_27sdp"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:tabTextAppearance="@style/tab"
                    app:tabGravity="fill"
                    android:layout_marginTop="@dimen/_10sdp"
                    app:layout_constraintStart_toStartOf="parent"
                   >
                
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TAB 1"
                        android:scrollbarSize="@dimen/_4sdp"
                        />
                
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:scrollbarSize="@dimen/_6sdp"
                        android:text="TAB 2" />
                
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:scrollbarSize="@dimen/_4sdp"
                        android:text="TAB 3" />
                </com.google.android.material.tabs.TabLayout>
                

                【讨论】:

                  【解决方案10】:
                  >   **create custom style in styles.xml**  <style name="customStylename"
                  > parent="Theme.AppCompat">
                  >         <item name="android:textSize">22sp</item>  <item name="android:color">colors/primarydark</item>
                  >     </style>
                  > 
                  >   **link to your material same name **  
                  > <android.support.design.widget.TabLayout  
                  > android:layout_width="match_parent"
                  >         android:layout_height="wrap_content" 
                  >         android:id="@+id/tabs"
                  >         app:tabTextAppearance="@style/customStylename" 
                  >       />
                  

                  这是我的解决方案

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2015-09-13
                    • 1970-01-01
                    • 2015-08-12
                    • 2016-03-14
                    • 1970-01-01
                    • 2018-03-14
                    • 2015-09-03
                    • 1970-01-01
                    相关资源
                    最近更新 更多