Question

简而言之，这就是我想要添加一个如下所示的自定义按钮的内容：

IMG是我的mipmap文件夹中的.png文件，“ SOME TEXT”只是一个字符串值。虚线是作为分隔符添加在图像中，而不是在按钮中添加的。问题在于，圆角不会在添加图像的地方出现。看起来像这样：

我的问题如下：

这可以实现吗？
是否有办法覆盖<solid />中的<shape />属性？我将必须创建10个这些按钮，每个按钮具有不同的颜色，如果我添加具有不同值的android:color，颜色不会改变
添加图像时，它只能选择一张（例如mdpi一张）。如果将其显示在较大的屏幕上，是否会根据尺寸拍摄不同的.png图像？
我应该使用特定类型的按钮吗？我想在按下按钮时恢复颜色并保持按下状态。我对如何实现此方法有一个模糊的想法，但是是否也可以对.png文件执行此操作，或者是否需要将其他颜色已经反转的项目导入项目并进行切换？

custom_button.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners
    android:topLeftRadius="250px"
    android:bottomLeftRadius="250px"
    android:topRightRadius="50px"
    android:bottomRightRadius="50px" />
<solid
    android:color="@color/YellowPrimary"/>
</shape>

button_styles.xml

<resources>

<style name="CategoryToggle">
    <item name="android:background">@drawable/custom_button</item>
    <item name="android:textAllCaps">true</item>
</style>

<style name="CategoryToggle.First">
    <item name="android:color">@color/bluePrimary</item> // Does not override <solid>
    <item name="android:drawableLeft">@mipmap/icon_48mdpi</item>
    <item name="android:text">@string/first_cat</item>
</style>
</resources>

button_layout.xml

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    style="@style/CategoryToggle.History"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

我刚开始并尝试实现这种怪异的按钮格式时，目前还没有Java代码。

这是我的看法：

Answer 1

绝对。正如我在评论中提到的那样，请确保您的可绘制对象具有透明背景，或者使用create a custom button来掩盖该可绘制对象。
您将要使用style attribute为每个按钮应用不同的样式。我的意思是说，在您的custom_button.xml中定义的颜色应该引用一个color属性（在您的情况下应使用colorAccent这样的颜色），而不是静态颜色。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="?attr/colorAccent"/>
</shape>

然后以按钮样式（而不是android:color）更改此颜色。

<style name="CategoryToggle">
    <item name="colorAccent">@color/YellowPrimary</item>
</style>

确保添加了support library依赖项，否则colorAccent将不可用。

使用android:theme属性而不是style属性来应用按钮主题。

<Button
    android:width="wrap_content"
    android:height="wrap_content"
    android:theme="@style/CategoryToggle"/>

您的可绘制对象似乎没有使用resource qualifiers。您需要确保每个替代资源都具有与原始资源完全相同的名称（即，对于所有配置，您的icon_48mdpi.png应该改称为icon_48dp.png），并根据其密度放置在相应的drawable文件夹中。可绘制资源应如下所示（在Project view structure中，而不是Android视图结构中。）

res/
|-- drawable/
|   +-- custom_button.xml
|-- drawable-hdpi/
|   +-- icon_48dp.png
|-- drawable-mdpi/
|   +-- icon_48dp.png
|-- drawable-xhdpi/
|   +-- icon_48dp.png
|-- drawable-xxhdpi/
|   +-- icon_48dp.png
|-- drawable-xxxhpdi/
|   +-- icon_48dp.png
~

要基于状态更改可绘制对象的颜色，您将需要进一步抽象颜色并创建color state list。

res / color / button_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pressed_color" android:state_pressed="true"/>
    <item android:color="@color/focused_color" android:state_focused="true"/>
    <item android:color="@color/state_hovered" android:state_hovered="true"/>
    <item android:color="?attr/colorAccent"/>
</selector>

然后，您可以在可绘制图形中使用此颜色资源，而不用使用colorAccent。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/button_color_selector"/>
</shape>

您还可以通过defining custom attributes并在样式中引用这些属性，使颜色状态列表中的每种颜色成为可设置样式的属性。为了简洁起见，我不再赘述。

您可以通过创建state list drawable来类似地对可绘制对象进行此操作。

最后，您要养成使用dp而不是px的习惯，除非您 绝对确定 使用px。这样可以防止在不同的屏幕密度下出现奇怪的外观。

Answer 2

在4上，“有一种方法（可以在按下时恢复颜色）.png文件”。是的，有多种方法。

按部就班的选项是使用xml样式为不同的按钮状态指定不同的可绘制对象。考虑一下ImageButton，它的文档中有一个示例：https://developer.android.com/reference/android/widget/ImageButton.html

另一个选择是在按钮交互回调中，在您自己的代码中对可绘制对象应用着色或其他过滤器。与使用不同的可绘制对象相比，用这种方法可以添加自定义代码而不是利用内置资源，因此可以在不同的设备上进行更多的测试和调试，并且可以完全控制，因此可以执行自定义动画和其他可能无法完成的复杂工作非常适合Android资源工具。可以为初学者签出setColorFilter： https://developer.android.com/reference/android/widget/ImageView.html#setColorFilter(int,%20android.graphics.PorterDuff.Mode)

感谢您添加一些代码和图像或您的问题，有助于您理解它们。

Answer 3

大声呼唤布莱恩（Bryan）对这件事的见解。它使我找到了解决该问题所需遵循的道路。我发布此答案，以便其他情况类似的其他人知道这些步骤。尽管我有很多文件，但是此过程可以很好地完成技巧。

我有我的自定义按钮，如Bryan提供的link所述。

其余的我有以下内容：

更改文本颜色： button_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/redPrimary" android:state_pressed="true"/>
    <item android:color="@color/redDark"/>
</selector>

更改背景： button_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
            <solid android:color="@color/redDark" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
            <solid android:color="@color/redPrimary" />
        </shape>
    </item>
</selector>

更改可绘制对象： button_drawable.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_button_inverted" android:state_pressed="true" />
    <item android:drawable="@drawable/ic_button"/>
</selector>

button_style.xml

<style name="MyButtonStyle">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:drawableLeft">@drawable/button_drawable</item>
    <item name="android:text">@string/button_text</item>
    <item name="android:textColor">@color/button_text_color</item>
</style>

在 main_layout.xml

中实现

<packagename.MyCustomButton xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/myButton"
            style="@style/MyBUttonStyle"
            android:layout_marginBottom="8dp" />

Answer 4

只需使用官方组件。
使用以下属性添加MaterialButton组件：

app:icon添加图标
app:iconGravity来确定图标的位置
app:iconPadding以增加/减少图标和文本之间的空间
android:paddingLeft边缘和图标之间的填充

<com.google.android.material.button.MaterialButton
    android:paddingLeft="2dp"
    app:icon="@drawable/ic_add_24px"
    app:iconGravity="start"
    app:iconPadding="4dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.RoundedRight"
    .../>

使用 app:shapeAppearanceOverlay ，您可以customize the shape使用该组件。

  <style name="ShapeAppearanceOverlay.Button.RoundedRight" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeBottomRight">4dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomLeft">16dp</item>
  </style>

您可以使用样式获得相同的结果。

android：drawableLeft和png时添加圆角

4 个答案: