web-dev-qa-db-fra.com

Style de l'onglet TabLayout

J'utilise new TabLayout de com.Android.support:design bibliothèque. Je veux changer le fond des onglets sélectionnés/non sélectionnés. Je regarde les sources et trouve que seul l'attribut tabBackground modifie la couleur de tous les onglets et ne contrôle pas la couleur sélectionnée.

Comment puis-je contrôler l'arrière-plan des onglets sélectionnés/non sélectionnés?

androidandroid-design-library
54
IlyaEremin

Définir:

    <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>

Appliquer:

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

Si vous examinez le TabLayout.class, Vous remarquerez que la disposition réelle de l'onglet TabView.class Est interne. C'est la même disposition que n'importe quel autre avec l'attribut isSelected. La sélection de l'onglet aura également un impact sur ce point. Tout ce que vous avez à faire est de créer un sélecteur de fond pouvant être dessiné

<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>

et attachez-le à l'attribut tabBackground, par exemple. en XML comme

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

Je lis comment style ActionBar, onglet arrière-plan sur l'onglet sélectionné et comprendre ce qu'il faut faire. C'est vraiment un problème similaire, mais j'ai trouvé une solution géniale spécialement pour 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"
    />

notez que layout_height et tabIndicatorHeight ont la même hauteur. Ainsi, vous obtenez une jolie animation de transition de cette façon.

7
IlyaEremin