TabLayout(Android 设计库)文本颜色
Posted
技术标签:
【中文标题】TabLayout(Android 设计库)文本颜色【英文标题】:TabLayout (Android Design Library) Text Color 【发布时间】:2015-09-03 17:51:50 【问题描述】:我正在使用来自 android 设计库的新 TabLayout。我设法使用tabLayout.setTabTextColors(colorstatelist)
设置了textcolor statelist
如何使用styles.xml 实现相同的效果?
【问题讨论】:
【参考方案1】:XML 属性
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_
android:layout_
app:tabIndicatorColor="@color/white"
app:tabBackground="@color/colorAccent"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/white"
app:tabMode="scrollable" />
以编程方式在 Kotlin 中
(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
ContextCompat.getColor(mContext, R.color.white))
【讨论】:
【参考方案2】:使用Material Components Library 中提供的TabLayout
,您可以:
<com.google.android.material.tabs.TabLayout
style="@style/My_Tablayout"
..>
并按照您的风格使用带有选择器的 tabTextColor
。
<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
<item name="tabTextColor">@color/tab_layout_selector</item>
</style>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_selected="true"/>
<item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>
在您的布局中使用 app:tabTextColor
:
<com.google.android.material.tabs.TabLayout
app:tabTextColor="@color/tab_layout_selector"
..>
【讨论】:
【参考方案3】:最好的或短而简单的方法是制作自定义 appbar 之类的
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/colorAccent"
app:theme="@style/myCustomAppBarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
android:layout_
android:layout_>
<ImageButton
android:id="@+id/btn_back"
android:layout_
android:layout_
android:layout_alignParentLeft="true"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/txt_title"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@+id/btn_back"
android:layout_toRightOf="@+id/btn_back"
android:text="Title"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
【讨论】:
【参考方案4】:简单而完美的方法:
在xml文件中::
<android.support.design.widget.TabLayout
android:layout_
android:layout_
app:tabTextAppearance="@style/TabText"/>
在值样式文件中:
注意:“cairo_semibold”是外部字体,你可以用你的字体替换它。
<style name="TabText" parent="TextAppearance.Design.Tab">
<item name="android:textColor">#1f57ff</item>
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">@font/cairo_semibold</item>
</style>
【讨论】:
【参考方案5】:对于自定义标签,我们必须覆盖以下内容: 1) app:tabTextColor //for_unselected_text"
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyCustomTabLayout"
android:layout_
android:layout_
android:background="?attr/colorPrimary"
android:scrollbarSize="24sp"
android:visibility="gone"
app:tabTextColor="@color/white_40_percent"
app:tabMode="scrollable" />
2) tabSelectedTextColor // 用于选择的标签颜色 3) tabIndicatorColor // 标签指示器的颜色
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="android:textColorPrimary">@color/white</item>
<item name="tabSelectedTextColor">@color/white</item>
<item name="tabTextAppearance">@style/TabTextStyle</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="android:tabStripEnabled">true</item>
<item name="android:padding">0dp</item>
</style>
<style name="TabTextStyle">
<item name="android:fontFamily">@string/font_fontFamily_medium</item>
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">true</item>
<item name="android:textColor">@color/tab_text_color</item>
<item name="android:textSize">16sp</item>
</style>
tab_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white_40_percent"android:state_selected="false"/>
<item android:color="@color/white_100_percent"android:state_selected="true"/>
</selector>
【讨论】:
【参考方案6】:通过 XML 属性:
<android.support.design.widget.TabLayout
android:layout_
android:layout_
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="@color/your_unselected_text_color"
app:tabSelectedTextColor="@color/your_selected_text_color"/>
此外,还有 tabIndicatorColor 或 tabIndicatorHeight 等属性用于进一步的样式设置。
在代码中:
tabLayout.setTabTextColors(
getResources().getColor(R.color.your_unselected_text_color),
getResources().getColor(R.color.your_selected_text_color)
);
由于这种旧方式自 API 23 起已被弃用,替代方案是:
tabLayout.setTabTextColors(
ContextCompat.getColor(context, R.color.your_unselected_text_color),
ContextCompat.getColor(context, R.color.your_selected_text_color)
);
【讨论】:
@Fe Le 如果我想务实地改变怎么办? @pcpriyanka 感谢您的提示,我已经用一种在代码中定义选定和未选定颜色的简单方法更新了我的答案。【参考方案7】:以上所有答案都是正确的,但我认为最好覆盖默认样式并仅更改您要更改的特定元素。 下面的示例将使文本变为粗体:
<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
<item name="android:textStyle">bold</item>
</style>
那么..,
app:tabTextAppearance="@style/Widget.TabItem"
【讨论】:
很抱歉,您是从哪里找到这种方法的?【参考方案8】:这是覆盖文本样式和选定文本颜色的 sn-p 代码
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTabText</item>
<item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>
<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/tab_text</item>
</style>
这是用于布局的 sn-p 代码
<android.support.design.widget.TabLayout
android:layout_
android:layout_
style="@style/MyCustomTabLayout" />
【讨论】:
谢谢 - 这对我有用。就像指出 tabSelectedTextColor 是选项卡下的行的颜色和选项卡我选择时选项卡的文本。 为什么要继承 Widget.Design.TabLayout ? 为什么我们必须在 TabLayout 上使用“样式”?如果我使用“android:theme”为什么它不起作用? @Spacemonkey 因为 Widget.Design.TabLayout 包含标签的基本样式,例如“tabIndicatorColor”、“tabIndicatorHeight” @sweetrenard 哦,所以它覆盖了我在“android:theme”中指定的主题?【参考方案9】:您只需覆盖android:textAppearance
样式。因为 TabLayout 使用 textAppearance。这是样式的小sn-p代码。
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Below will reference with our custom style -->
<item name="android:textAppearance">@style/my_tab_text</item>
</style>
<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">@android:color/holo_blue_dark</item>
</style>
并且如果您不想从您的 Apptheme 中引用,您可以使用下面的 sn-p 直接指定 TabLayout。
<android.support.design.widget.TabLayout
android:layout_
android:layout_
app:tabTextAppearance="@style/my_tab_text"
app:tabIndicatorHeight="48dp"/>
【讨论】:
确保您使用 AppCompact 作为父级 好吧,你是对的,它有效。但仅适用于“未选择”选项卡。选定的标签文本对我来说总是黑色的 好的,设计库中没有可用于在设计支持库中分配所选选项卡的 textColor 的代码。因此,对于选定的选项卡文本颜色,您必须使用属性 .. 进行设置以上是关于TabLayout(Android 设计库)文本颜色的主要内容,如果未能解决你的问题,请参考以下文章
如何设置 android.support.design.widget.tablayout的选择的文本进行加粗显示