如何创建一个带有图像、文本和两种颜色的按钮？

Question

这是我想到的链接。

https://dribbble.com/shots/1407665-Categories/attachments/204971

有没有人知道的流行图书馆可以管理这个，否则我可以走定制路线。

我在我的 XML 中定义了 9 个按钮没问题。

接下来我知道我必须在可绘制文件夹中创建一个 xml 文件，例如“button_shape.xml”。然后我将它添加到我的代码中：

android:background="@drawable/button_shape"

我让我的按钮有一个图像，我假设：

android:drawableTop="@drawable/buttonImage"

我想最后是如何创建一个使底部颜色与文本大小保持一致的形状。同时允许不同的按钮大小。我也可以通过在每个按钮上设置样式并这样定义它们来轻松地交替颜色：

  <style name ="ButtonTheme.Custom1" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorPrimary">@android:color/holo_blue_light</item>
        <item name="colorPrimaryDark">@android:color/holo_blue_dark</item>
    </style>

    <style name ="ButtonTheme.Custom2" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorPrimary">@android:color/holo_green_light</item>
        <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
    </style>

    <style name ="ButtonTheme.Custom3" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorPrimary">@android:color/holo_red_light</item>
        <item name="colorPrimaryDark">@android:color/holo_red_dark</item>
    </style>

    <style name ="ButtonTheme.Custom4" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorPrimary">@android:color/holo_orange_light</item>
        <item name="colorPrimaryDark">@android:color/holo_orange_dark</item>
    </style>

    <style name ="ButtonTheme.Custom5" parent="Base.Widget.AppCompat.Button.Colored">
        <item name="colorPrimary">@android:color/holo_blue_bright</item>
        <item name="colorPrimaryDark">@android:color/holo_blue_light</item>
    </style>

到目前为止，我的自定义形状是这个，很接近；但是如何使较深的颜色保持一致的大小，而其他颜色则根据按钮的大小移动？

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="10dp">
        <shape android:shape="rectangle" >
            <size android:height="10dp" />
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>

    <item android:top="120dp">
        <shape android:shape="rectangle" >
            <size android:height="120dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

Answer 1

你可以使用 RecyclerView 和 StaggeredGrid

https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html