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

Question

这是link我想到的。

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

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

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

接下来我知道我必须在像 "button_shape.xml" 这样的可绘制文件夹中创建一个 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

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

How to create an Button with an image, text, and two colours?

xml

android

android-button

android-drawable

android-shapedrawable