android - 拥有android :drawableLeft with png时添加圆角

Question

简而言之，这就是我想要添加的自定义按钮，如下所示:

IMG 是我的 mipmap 文件夹中的一个 .png 文件，SOME TEXT 只是一个字符串值。添加的虚线只是作为图像中的分隔符，而不是按钮中的。问题是圆形边缘不会出现在添加图像的位置。它看起来像这样:

我的问题如下:

1. 这可以实现吗？
2. 有没有办法覆盖 <solid /> <shape /> 中的属性？我将不得不创建 10 个这样的按钮，每个按钮都有不同的颜色，如果我添加 android:color不同的值，颜色不变
3. 添加图像时，它让我只能选择一个(例如 mdpi 之一)。如果这将在更大的屏幕上显示，是否会根据尺寸采用不同的 .png 图像？
4. 我应该使用特定类型的按钮吗？我想在按下按钮时恢复颜色并保持按下状态。我对如何实现这一点有一个模糊的想法，但是有没有一种方法可以对 .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

1. 当然。正如我在评论中提到的，要么确保您的可绘制对象具有透明背景，要么 create a custom button屏蔽可绘制对象。
2. 您需要使用 style attribute对每个按钮应用不同的样式。我的意思是，在您的 custom_button.xml 中定义的颜色应该引用颜色属性(类似 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"/>

1. 看起来您的可绘制对象没有使用 resource qualifiers .您需要确保每个替代资源都具有与原始资源完全相同的名称(即您的 icon_48mdpi.png 对于所有配置都应该被称为 icon_48dp.png )和根据其密度放置在相应的可绘制文件夹中。您的可绘制资源应如下所示(在 Project view structure 中，而不是 Android View 结构)。

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
~

1. 要根据状态更改可绘制对象的颜色，您需要进一步抽象颜色并创建一个 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 的习惯，除非您绝对确定/strong> 你想使用 px。这将防止在不同的屏幕密度下出现奇怪的外观。