TabLayout标签样式

我使用com.android.support:design库中的新TabLayout。我想更改选定/未选中选项卡的背景。我看源代码，发现只有tabBackground属性，改变所有标签的颜色，并不控制选定的标签颜色。TabLayout标签样式

如何控制选定/未选中的选项卡背景？

来源

2015-06-10 IlyaEremin

的重复可能[如何风格ActionBar中，所选的选项卡标签背景]（http://stackoverflow.com/questions/13285490/how-to-style-actionbar-tab-background-on -selected-tab） – jlopez

试试这个https://abhishekdabral.wordpress.com/2015/04/03/bottom-tabs-with-fragment-state-pager-adapter/?preview=true&preview_id=25&preview_nonce=49237562f9 – Abhishek

@Doraemon this文章有可怕的代码填充，并且不包含关于'TabLayout'的信息，对不起。 – IlyaEremin

定义：

<style name="AppTabLayout" 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">6dp</item> 
     <item name="tabPaddingEnd">6dp</item> 
     <item name="tabBackground">?attr/selectableItemBackground</item> 
     <item name="tabTextAppearance">@style/AppTabTextAppearance</item> 
     <item name="tabSelectedTextColor">@color/range</item> 
    </style> 

    <!-- for text --> 
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab"> 
     <item name="android:textSize">12sp</item> 
     <item name="android:textColor">@color/orange</item> 
     <item name="textAllCaps">false</item> 
    </style>

应用：

<android.support.design.widget.TabLayout 
    style="@style/AppTabLayout" 
    app:tabTextAppearance="@style/AppTabTextAppearance" 
    android:layout_width="match_parent" 
    .... />

来源

2015-07-16 21:51:39 Akshay

哪里有被称为选定标签背景的东西？ – AnhTriet

@Flae_201092在'TabLayout'选定的选项卡用'tabIndicatorColor'指示 – Akshay

因此，在'TabLayout'中，我们无法更改选定的选项卡背景？ – AnhTriet

我读How to Style ActionBar, tab background on selected tab并找出该怎么做。这实在是类似的问题，但是我发现真棒解决方案专为TabLayout：

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    android:layout_width="match_parent" 
    android:layout_height="48dp" 
    android:background="@color/tab_layout_color" 
    app:tabIndicatorHeight="48dp" 
    app:tabIndicatorColor="@color/selected_tab_color" 
    />

注意layout_height和tabIndicatorHeight具有相同的高度。所以你用这种方式获得漂亮的过渡动画。

来源

2015-06-10 11:44:43 IlyaEremin

这个解决方案有一个错误 - 指标覆盖标签文本 – IlyaEremin

-9

我也遇到了这个问题。我只是在整个项目搜索tabIndicatorColor，发现一些R.java下面的代码：

 @see #TabLayout_tabBackground 
     @see #TabLayout_tabContentStart 
     @see #TabLayout_tabGravity 
     @see #TabLayout_tabIndicatorColor 
     @see #TabLayout_tabIndicatorHeight 
     @see #TabLayout_tabMaxWidth 
     @see #TabLayout_tabMinWidth 
     @see #TabLayout_tabMode 
     @see #TabLayout_tabPadding 
     @see #TabLayout_tabPaddingBottom 
     @see #TabLayout_tabPaddingEnd 
     @see #TabLayout_tabPaddingStart 
     @see #TabLayout_tabPaddingTop 
     @see #TabLayout_tabSelectedTextColor 
     @see #TabLayout_tabTextAppearance 
     @see #TabLayout_tabTextColor

所以，问题就解决了。愿这对你有所帮助。
即我用IDEA

来源

2015-08-10 09:04:29 acntwww

为什么“问题解决了”？由此，我们如何设置选定的标签背景？ – AnhTriet

如果你看看TabLayout.class你会发现对标签的实际布局内TabView.class。它与isSelected属性的布局相同。选择标签也会对这种影响，因此所有你需要做的是创造选择背景绘制像

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

并将其连接到tabBackground属性如在XML像

<android.support.design.widget.TabLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabBackground="@drawable/tab_bg" 
      app:tabIndicatorHeight="4dp"/>

来源

2015-09-03 11:48:18 Michal

TabLayout标签样式

回答

相关问题