Android - 带有状态列表背景的仪表板布局仅为图标绘制

Question

我正在尝试创建仪表板布局。它不同于 google i/o's dashboard从某种意义上说，图像图标的背景和图标下方的文字是不同的。

换句话说，图标(仅图像)有一个 StateListDrawable 作为背景，而文本有一个透明背景。一种方法是将图像和文本的组合放在 LinearLayout 中，并在仪表板布局中用于每个看起来不那么简单的项目。这是我能做到的唯一方法吗？还是有更好更简单的解决方案？

更新:您可以从here获取项目设置和实验。

• 布局文件 dashboard2.xml 使用了 google 的 DashboardLayout 类。在主要 Activity 中，我只是将 View 的内容设置为 dashboard2

• 在该项目中，您将在 drawable 文件夹中找到名为 dashboard_icon_bg_selector.xml 的 statelist drawable。我希望所有仪表板图标的背景都是可绘制的状态列表。

如有任何建议，我们将不胜感激。

Answer 1

我能想到的一个可能的解决方案是使用 LayerDrawable作为您的 TextView 的 topDrawable。我将概述这个想法，列举一些细节并在下面附上修改后的示例项目的链接。

按钮代码(在布局文件中):

<Button android:id="@+id/home_btn_schedule"
    style="@style/DPDashBoardButton"
    android:text="button 1"
    android:drawableTop="@drawable/dashboard_icon_bg_selector" />

两个 LayerDrawables，一个用于 'pressed/focussed/selected' 状态，一个用于所有其他状态(休息):

dashboard_icon_layer_background_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_selected" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_pressed"
            android:gravity="center" />
    </item>
</layer-list>

dashboard_icon_layer_background_rest.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_rest" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_rest"
            android:gravity="center" />
    </item>
</layer-list>

这个具体例子的一些特殊性:

• 星形图像作为位图引用的原因是为了防止 Android 将它们缩放到容器的全宽和全高。添加底部距离实际上是为了让星星相对于背景图像居中(textSize=12，加上 2 用于填充)，老实说，这样的硬编码很难看。如果没有这个偏移量，居中的重力会将星形图像放在整个容器的中心，因此包括文本添加的空间。
• 因此，通过 <item android:drawable="@drawable/btn_star_big_on_rest" /> 将项目替换为位图, 将导致星形图像被放大。只需尝试一次即可了解效果。
• 这种现象非常不幸，因为我们可能会引用另一个带有上面的 xml 可绘制对象，利用它所有已经定义的状态!这就是为什么我实际上必须从 Android 存储库中复制两张星形图像:您不能将 xml 可绘制对象引用为位图源，并且实际图像也不能公开引用。尝试用 <item android:drawable="@android:drawable/btn_star" /> 替换位图定义查看图像按比例放大，但保持预定义状态不变。
• 您可以通过从星形图像创建 9 个补丁、为不同状态创建 StateListDrawable 并在图层项目中引用生成的 xml 可绘制对象来解决缩放问题。尽管 Android 仍会将整个图像拉伸(stretch)到容器的完整尺寸，但 9 个补丁可以确保只缩放透明像素。
• //编辑:我意识到这种方法还有另一个限制，因为点击文本不会改变图标的​​状态。这可能是您想要的，但我个人认为，从用户的角度来看，让整个事物响应触摸事件是有意义的...

希望这是有道理的!只是给你看一下结果:左边都是静止状态，右边是左上角的按钮被按下。

Zipped project here.