如何在Android中的复选框内居中放置图标答案

【问题标题】：How to have icon in center inside a Checkbox in Android如何在Android中的复选框内居中放置图标
【发布时间】：2022-08-19 22:59:56
【问题描述】：

我怎样才能在复选框的中心有一个图标。复选框的宽度和高度为48x48，图标的宽度和高度为24x24

供参考的图像（图标附在复选框的左侧，但我希望它位于中心）

我已经检查了answers here，它们似乎不适合我。有没有人有更好的方法可以在这里应用

XML 代码：

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<LinearLayout android:id=\"@+id/tags_dialog_tag_item\"
    xmlns:android=\"http://schemas.android.com/apk/res/android\"
    xmlns:tools=\"http://schemas.android.com/tools\"
    xmlns:app=\"http://schemas.android.com/apk/res-auto\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    android:background=\"?attr/selectableItemBackground\"
    android:clickable=\"true\"
    android:focusable=\"true\"
    android:gravity=\"center_vertical\"
    android:minHeight=\"?android:attr/listPreferredItemHeight\"
    android:orientation=\"horizontal\"
    android:paddingBottom=\"5dp\"
    android:paddingStart=\"8dp\"
    android:paddingEnd=\"8dp\">

    <ImageButton
        android:id=\"@+id/id_expand_button\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:background=\"@drawable/ic_chevron_right_black\"
        android:clickable=\"false\" />

    <TextView
        android:id=\"@+id/tags_dialog_tag_item_text\"
        android:layout_width=\"0dp\"
        android:layout_height=\"wrap_content\"
        android:layout_weight=\"1\"
        android:paddingStart=\"6dp\"
        android:textSize=\"16sp\"
        tools:text=\"Items Text\" />

    <com.myapp.ui.CheckBoxStates
        android:id=\"@+id/tags_dialog_tag_item_checkbox\"
        android:layout_width=\"48dp\"
        android:layout_height=\"48dp\"
        android:clickable=\"false\"
        app:cycle_checked_to_indeterminate=\"false\"
        app:cycle_indeterminate_to_checked=\"false\"/>
</LinearLayout>

标签： android xml checkbox android-linearlayout center

【解决方案1】：

第一个解决方案

使用新的 LinearLayout 并将 CheckBox 放入其中但使用（48dp 高度和宽度）和重力 =“中心”制作 LinearLayout 并使用 (wrap_content 高度和宽度) 制作 CheckBox

您的代码应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/tags_dialog_tag_item"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingStart="8dp"
    android:paddingEnd="8dp">

    <ImageButton
        android:id="@+id/id_expand_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_chevron_right_black"
        android:clickable="false" />

    <TextView
        android:id="@+id/tags_dialog_tag_item_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingStart="6dp"
        android:textSize="16sp"
        tools:text="Items Text" />


    <LinearLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center">

        <com.myapp.ui.CheckBoxStates
            android:id="@+id/tags_dialog_tag_item_checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            app:cycle_checked_to_indeterminate="false"
            app:cycle_indeterminate_to_checked="false"/>


    </LinearLayout>

    
</LinearLayout>

第二种解决方案

1-在你的 gradle.build 文件中实现

implementation 'com.google.android.material:material:1.6.1'

2- 在您的 XML 文件中使用 MaterialCheckBox

通过添加

com.google.android.material.checkbox.MaterialCheckBox

代替

com.myapp.ui.CheckBoxStates

或者

您可以从 MaterialCheckBox 类继承来制作自己的自定义复选框视图

【讨论】：

这会将线性布局的宽度和高度增加到 48x48，但复选框仍然是 24x24，可点击区域也是如此，因为在 <com.myapp.ui.CheckBoxStates 内部，我们正在设置布局宽度以包装内容。图像的内容是24dp。所以图像是 24x24dp 并且做包装内容使可点击区域 24x24dp 所以线性布局到 48x48 据我所知没有任何影响。如果我遗漏了什么，请纠正我。