安卓4.0副标题(章节)标签样式化

66

我在查看ICS的Android Dev Design网站时发现所有应用程序都有这些字幕/部分标题:

ICS Section Headers

我想知道是否有人知道如何自定义样式以实现此类标签。我在Android SDK中找不到任何类似于此的标签视图,但我非常喜欢这种外观。

谢谢您提前的帮助!

4个回答

71

所以这就是我最终使用的:

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

@drawable/section_header是什么:

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

还有@color的:

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

1
这不会使蓝线突出显示在下面的文本中,例如在GridLayout中有一个TextView。我猜这是因为他们在截图中没有使用TextViews。正确的行为应该是什么? - pjv
14
新手技巧:顶部代码应位于res/values/sectionHeader.xml中。@colors部分应位于res/values/colors.xml中。用法:在您想要此标题的textview上设置style="@style/sectionHeader"。在该textview上使用margin="15dp"。 - Nino van Hooff
这很接近了,但你需要稍微修改一下,就像Annie的回答中的样式一样:加粗的文本样式。将paddingLeft从4dp改为8dp,并将drawable的高度从2dp改为1dp。另外,添加一个8dp的paddingBottom。 - joepetrakovich

52

Brandon是正确的;目前你需要自定义工作才能获得蓝色样式,这有点令人沮丧,因为它在新的设计指南中随处可见。

不幸的是,你不能将Widget.Holo.Light.TextView.ListSeparator作为自定义样式的父级进行引用,因为它是私有的。

但是如果您只对灰线感兴趣,可以直接使用Android原始样式:

style="?android:attr/listSeparatorTextViewStyle"

这至少能将你带到灰色线条的全大写风格:

输入图像描述

Brandon的解答可以让你实现自定义蓝色风格。

如果你想要严格从当前(v15)Android List分隔符样式进行子类化,则可以复制Android中用于Widget.TextView.ListSeparatorWidget.Holo.Light.TextView.ListSeparator的组合样式,并将其复制到一个新样式中:

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

您需要将可绘制对象复制到自己的目录中,因为它们是私有的。


2

我不确定是哪种样式,但首选项应用程序也使用了类似的样式。它是一个部分标题。此外,TextField 的 textAllCaps 设置为 true。如果您寻找 textAllCaps,可以在 SDK 的资源文件夹中找到它 :)


3
请注意,此功能仅适用于API级别14及以下。在14级之前,您必须通过编程方式设置为全部大写字母或在字符串资源文件中使用特殊的全大写字符串才能使其正常工作。 - annie
1
14及以后的版本,但是没错。 - dmon

0

我建议使用一个高度设置为1dp的View来画线,您可以使用background属性来设置颜色。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接