web-dev-qa-db-fra.com

Android 4.0 Sous-titre (section) Style d'étiquette

Je regardais donc le site Android Dev Design pour ICS et toutes les applications ont ces sous-titres/en-têtes de section:

ICS Section Headers

Je me demandais si quelqu'un connaissait le style personnalisé pour réaliser des étiquettes qui ressemblent à ceci. Je n'ai trouvé aucune vue d'étiquette qui ressemble à ceci dans le SDK Android mais j'aime vraiment leur apparence).

Merci d'avance!

androidandroid-layoutstyling
64
Brandon

Voici donc ce que j'ai fini par utiliser:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <style name="sectionHeader" parent="Android:Widget.Holo.Light.TextView">
        <item name="Android:drawableBottom">@drawable/section_header</item>
        <item name="Android:drawablePadding">4dp</item>
        <item name="Android:layout_marginTop">8dp</item>
        <item name="Android:paddingLeft">4dp</item>
        <item name="Android:textAllCaps">true</item>
        <item name="Android:textColor">@color/emphasis</item>
        <item name="Android:textSize">14sp</item>
    </style>
</resources>

Où @ drawable/section_header est:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <size Android:width="1000dp" Android:height="2dp" />
    <solid 
        Android:color="@color/emphasis"/>
</shape>

Et @ color's:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="emphasis">#31b6e7</color>
    <color name="bg_gray">#cecbce</color>
</resources>
69
Brandon

Brandon a raison; vous devrez faire un travail personnalisé pour l'instant pour obtenir le style bleu, ce qui est un peu frustrant car il est parsemé dans le nouveau guide de conception.

Malheureusement, vous ne pouvez pas référencer Widget.Holo.Light.TextView.ListSeparator en tant que parent d'un style personnalisé, car il est privé.

Mais si vous n'êtes intéressé que par la ligne grise, vous pouvez utiliser le stock Android style inline:

style="?android:attr/listSeparatorTextViewStyle"

Cela vous amènera au moins à la ligne grise, style toutes majuscules:

enter image description here

La réponse de Brandon vous amènera au style bleu personnalisé.

Pour info, si vous voulez sous-classer exactement à partir du style actuel (v15) Android pour les séparateurs de liste, les styles combinés utilisés dans Android pour Widget.TextView.ListSeparator et Widget.Holo.Light.TextView.ListSeparator que vous pouvez copier dans un nouveau style sont:

<item name="Android:background">@drawable/list_section_divider_holo_light</item>
<item name="Android:textAllCaps">true</item>
<item name="Android:layout_width">match_parent</item>
<item name="Android:layout_height">wrap_content</item>
<item name="Android:textStyle">bold</item>
<item name="Android:textColor">?android:textColorSecondary</item>
<item name="Android:textSize">14sp</item>
<item name="Android:gravity">center_vertical</item>
<item name="Android:paddingLeft">8dip</item>

Vous devrez cependant copier les drawables dans vos propres répertoires, car ils sont privés.

52
annie

Je ne sais pas exactement de quel style il s'agit, mais l'application des préférences l'utilise aussi (ou quelque chose de très similaire). C'est un en-tête de section. En outre, le TextField a le textAllCaps défini sur true. Vous pouvez probablement le trouver dans le dossier des ressources du SDK si vous recherchez le textAllCaps :)

2
dmon

Je dis, pour tracer la ligne, utilisez simplement une vue, avec une hauteur définie pour 1dp environ. Vous pouvez définir la couleur en utilisant l'attribut background

0
urSus