将 TabLayout 文本设为粗体
Making TabLayout text bold
我正在使用 Android 设计支持库中的 TabLayout,并希望为其文本(标题)设置样式。特别是让它变得大胆。如何仅在 XML 中实现?
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" />
在 styles.xml
中添加 TabLayout 文本样式
<style name="TabLayoutTextStyle">
<item name="android:textStyle">bold</item>
</style>
并将 TabLayoutTextStyle
设置为您的 TabLayout 属性的样式。
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp"
style="@style/TabLayoutTextStyle" />
首先必须将此添加到 styles.xml:
<style name="TabLayoutTextStyle">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
</style>
即使您不想改变文本大小,您也必须将其包含在样式中,否则将不会显示任何内容。
然后必须使用 app:tabTextAppearance
而不是 style
属性将样式应用于 TabLayout
!
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp"
app:tabTextAppearance="@style/TabLayoutTextStyle" />
要启用全大写,您可以将以下内容添加到 TabLayoutTextStyle
:
<item name="android:textAllCaps">true</item>
一个选项是添加 In styles.xml
<item name="android:textStyle">bold</item>
在 "TextAppearance.Design.Tab" 内,与 parent
同名
<style name="TextAppearance.Design.Tab" parent="TextAppearance.Design.Tab">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
<item name="android:singleLine">true</item>
</style>
其他选项:在您的布局中直接指向您的样式 - 假设您将其命名为 myTabLayoutStyle
style="@style/myTabLayoutStyle"
并在该样式内再次重定向到其他样式,仅用于显示文本:
<item name="tabTextAppearance">@style/myTabTextStyle</item>
像那样:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
style="@style/myTabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="600dp"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
android:singleLine="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
内部 styles.xml:
<style name="myTabLayoutStyle" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">3dp</item>
<item name="tabPaddingEnd">3dp</item>
<item name="android:singleLine">true</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
<item name="tabTextAppearance">@style/myTabTextStyle</item>
</style>
<style name="myTabTextStyle">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
<item name="android:singleLine">true</item>
</style>
这是正确的方法。
<LinearLayout 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:orientation="vertical"
android:baselineAligned="false">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabTextAppearance="@style/TextAppearance.Bold"
app:tabTextColor="@color/grey"
app:tabSelectedTextColor="@color/black" />
</LinearLayout>
您需要声明以下样式
<style name="TabLayoutTextStyle">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/black</item>
</style>
现在您可以像这样使用它了:
然后必须使用 app:tabTextAppearance 而不是样式属性将样式应用于 TabLayout!
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/TabLayoutTextStyle" />
我正在使用 Android 设计支持库中的 TabLayout,并希望为其文本(标题)设置样式。特别是让它变得大胆。如何仅在 XML 中实现?
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" />
在 styles.xml
中添加 TabLayout 文本样式<style name="TabLayoutTextStyle">
<item name="android:textStyle">bold</item>
</style>
并将 TabLayoutTextStyle
设置为您的 TabLayout 属性的样式。
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp"
style="@style/TabLayoutTextStyle" />
首先必须将此添加到 styles.xml:
<style name="TabLayoutTextStyle">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
</style>
即使您不想改变文本大小,您也必须将其包含在样式中,否则将不会显示任何内容。
然后必须使用 app:tabTextAppearance
而不是 style
属性将样式应用于 TabLayout
!
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp"
app:tabTextAppearance="@style/TabLayoutTextStyle" />
要启用全大写,您可以将以下内容添加到 TabLayoutTextStyle
:
<item name="android:textAllCaps">true</item>
一个选项是添加 In styles.xml
<item name="android:textStyle">bold</item>
在 "TextAppearance.Design.Tab" 内,与 parent
同名<style name="TextAppearance.Design.Tab" parent="TextAppearance.Design.Tab"> <item name="android:textSize">15sp</item> <item name="android:textStyle">bold</item> <item name="android:textColor">?android:textColorSecondary</item> <item name="textAllCaps">true</item> <item name="android:singleLine">true</item> </style>
其他选项:在您的布局中直接指向您的样式 - 假设您将其命名为 myTabLayoutStyle
style="@style/myTabLayoutStyle"
并在该样式内再次重定向到其他样式,仅用于显示文本:
<item name="tabTextAppearance">@style/myTabTextStyle</item>
像那样:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
style="@style/myTabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="600dp"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
android:singleLine="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
内部 styles.xml:
<style name="myTabLayoutStyle" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">3dp</item>
<item name="tabPaddingEnd">3dp</item>
<item name="android:singleLine">true</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
<item name="tabTextAppearance">@style/myTabTextStyle</item>
</style>
<style name="myTabTextStyle">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
<item name="android:singleLine">true</item>
</style>
这是正确的方法。
<LinearLayout 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:orientation="vertical"
android:baselineAligned="false">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabTextAppearance="@style/TextAppearance.Bold"
app:tabTextColor="@color/grey"
app:tabSelectedTextColor="@color/black" />
</LinearLayout>
您需要声明以下样式
<style name="TabLayoutTextStyle">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/black</item>
</style>
现在您可以像这样使用它了:
然后必须使用 app:tabTextAppearance 而不是样式属性将样式应用于 TabLayout!
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/TabLayoutTextStyle" />