带有深色文本的白色选项卡

时间:2016-02-15 10:46:08

标签: android android-styles android-tablayout

我正在使用TabLayout并尝试将tabbackground设置为带有深色文字的白色

我似乎无法改变文字的颜色,似乎仍然保持白色。

这是我使用的风格:

<style name="TabWhiteText" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@color/deepEggplant</item>
</style>

<style name="TabWhite" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@color/deepEggplant</item>
    <item name="tabBackground">@android:color/white</item>
    <item name="tabIndicatorColor">@android:color/white</item>
</style>

<style name="TabWhiteMedium" parent="TabWhite">
    <item name="android:textAppearance">@style/TabWhiteText</item>
</style>

适用于此:

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:layout_alignParentTop="true"
        style="@style/TabWhiteMedium"
        selectFromListView:tabMode="scrollable" />

2 个答案:

答案 0 :(得分:0)

您可以使用setTabTextColors()方法以编程方式为选项卡文本添加颜色。请参阅文档 TabLayout

要添加颜色资源,请使用ContextCompat.getColor(context,您的颜色资源ID ),而不是直接将资源作为参数

答案 1 :(得分:0)

这里有一个很好的教程:http://guides.codepath.com/android/google-play-style-tabs-using-tablayout

您可以使用带有深色或标签的<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabMaxWidth">@dimen/tab_max_width</item> <item name="tabIndicatorColor">?attr/colorAccent</item> <item name="tabIndicatorHeight">2dp</item> <item name="tabPaddingStart">12dp</item> <item name="tabPaddingEnd">12dp</item> <item name="tabBackground">@android:color/white</item> <!-- Your white color maybe --> <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> <item name="tabSelectedTextColor">?android:textColorPrimary</item> </style> <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">14sp</item> <item name="android:textColor">#000000</item> <!-- Or your TabLayout textcolor to dark maybe --> <item name="textAllCaps">true</item> </style> 背景白色:

TabLayout

然后将其用作<android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/MyCustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 的样式:

app:tabBackground="@android:color/white"
app:tabTextColor="@color/darkcolor"

或其他自定义。

更新:此外,无需添加样式,只需:

<android.support.design.widget.TabLayout
          android:id="@+id/tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:minHeight="?attr/actionBarSize"
          app:tabIndicatorColor="#ffffff"
          app:tabIndicatorHeight="4dp"
          app:tabBackground="@android:color/white" 
          app:tabTextColor="@color/darkcolor"  
          app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

<强>即:

function do_stuff() {
  $(".landing-page-header-container").addClass('reveal-signup');
  $(".landing-page-vehicle-left-container").addClass('animated fadeInLeftBig');
  $(".landing-page-vehicle-right-container").addClass('animated fadeInUpBig');
  $(".landing-close-video").removeClass('reveal-landing-close-video');
}

setTimeout(do_stuff, 8000);
$('.landing-close-video').click(do_stuff);