如何使用可绘制和填充的位图创建圆形Button或ImageButton或ImageView

编程问答 2022-06-09

问题描述

我不知道如何创建 Button 或 ImageButton 或 ImageView 或具有以下功能的任何东西：

  • 可绘制带有图标的位图
  • 填充

我现在尝试的是：

<ImageButton
            android:id="@+id/ShowInstructionsImageButton"
            android:contentDescription="@string/Common_informationIconContentDescription"
            android:layout_alignParentRight="true"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="14dp"
            android:backgroundTint="@color/normalTextColorPrimaryDark"
            android:background="@drawable/ic_info_bitmap"
            android:layout_centerVertical="true" />

哪个可以工作，但是ImageButton的可点击区域为20dp，我如何使可点击区域为48dp？

我在这里Padding not working on ImageButton进行了讨论，但是如果我使用android：src而不是android：background，则会在图标的位置出现一个黑框

图标是这样的：

enter image description here

解决方法

首先，尝试使用androidx.appcompat.widget.AppCompatImageButton或androidx.appcompat.widget.AppCompatImageView而不是ImageButton以获得向后兼容性的优势。

之后，要显示使用它的可绘制对象，应使用app:srcCompat，而不是android:background。现在，如果您在视图中添加一些填充，它将被应用于显示的可绘制对象。

<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/ShowInstructionsImageButton"
    android:contentDescription="@string/Common_InformationIconContentDescription"
    android:layout_alignParentRight="true"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:padding="14dp"
    android:layout_centerVertical="true"
    app:tint="@color/normalTextColorPrimaryDark"
    app:srcCompat="@drawable/ic_info_bitmap" />
,

您可以使用MaterialButton：

    <com.google.android.material.button.MaterialButton
        android:layout_width="48dp"
        android:layout_height="48dp"
        style="@style/Widget.App.Button.IconOnly"
        app:icon="@drawable/ic_add_24px"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
        />

具有：

<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton" >
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">12dp</item>
    <item name="android:minHeight">12dp</item>
    <item name="iconGravity">textStart</item>
    <item name="strokeWidth">3dp</item>
    <item name="strokeColor">@color/...</item>
</style>

和圆形：

<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

enter image description here

,

我找到了适合我的解决方案：

<ImageButton
            android:id="@+id/ShowInstructionsImageButton"
            android:contentDescription="@string/Common_InformationIconContentDescription"
            android:layout_alignParentRight="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="14dp"
            android:backgroundTint="@color/normalTextColorPrimaryDark"
            android:background="@drawable/ic_info_layer"
            android:layout_centerVertical="true" />

使用 ic_info_layer.xml： 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item
      android:drawable="@drawable/ic_info_bitmap"
      android:width="@dimen/IconSize"
      android:height="@dimen/IconSize"
      android:right="@dimen/ButtonIconPadding"
      android:left="@dimen/ButtonIconPadding"
      android:top="@dimen/ButtonIconPadding"
      android:bottom="@dimen/ButtonIconPadding"
      />

</layer-list >

在API

androidandroidandroid-layoutimagebuttonlayoutxamarin.android