将复选框按钮对齐到视图中心

Question

我正在尝试创建自定义复选框，我需要将其对齐到checbox的中心，该中心将根据可用宽度具有动态大小。谁能告诉我怎么做到这一点？我错过了什么遗失的东西？

布局

<androidx.constraintlayout.widget.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"
tools:context="">

<TextView
    android:id="@+id/tv_amount_tickets"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="16dp"
    android:text="Test"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/til_amount_tickets"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:hint="test"
    android:imeOptions="actionDone"
    android:inputType="number"
    android:maxLines="1"
    app:layout_constraintEnd_toEndOf="@+id/tv_amount_tickets"
    app:layout_constraintStart_toStartOf="@+id/tv_amount_tickets"
    app:layout_constraintTop_toBottomOf="@+id/tv_amount_tickets" />

<TextView
    android:id="@+id/tv_ticket"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="test"
    android:textSize="16sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@+id/til_amount_tickets"
    app:layout_constraintStart_toStartOf="@+id/til_amount_tickets"
    app:layout_constraintTop_toBottomOf="@+id/til_amount_tickets" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox3"
    app:layout_constraintStart_toEndOf="@+id/checkBox"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toStartOf="@+id/checkBox4"
    app:layout_constraintStart_toEndOf="@+id/checkBox2"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

<androidx.appcompat.widget.AppCompatCheckBox
    android:id="@+id/checkBox4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:background="@drawable/bg_checkbox_selector"
    android:button="@drawable/checkbox_star_outline_selector"
    android:foregroundGravity="center"
    android:gravity="center"
    android:minHeight="48dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/checkBox3"
    app:layout_constraintTop_toBottomOf="@+id/tv_ticket" />

图标按钮选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@drawable/ic_star_outline"
    android:state_checked="false" />
  <item android:drawable="@drawable/ic_star_outline_white"
    android:state_checked="true"/>
  <item android:drawable="@drawable/ic_star_outline"/>
</selector>

背景选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/bg_checkbox"
    android:state_checked="false"/>
  <item android:drawable="@drawable/bg_checkbox_selected"
    android:state_checked="true"/>
  <item android:drawable="@drawable/bg_checkbox"/>
</selector>

背景

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="3dp"/>
  <solid android:color="#FFFFFFFF"/>
  <stroke android:width="0.5dp" android:color="#FF8492A6"/>
</shape>

背景选择

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="3dp"/>
  <solid android:color="@color/colorPrimary"/>
  <stroke android:width="0.5dp" android:color="#FF8492A6"/>
</shape>

Answer 1

您可以通过对布局进行以下更改来实现所需的效果：

1. 将每个AppCompatCheckBox包装到RelativeLayout中
2. 将所有ConstraintLayout特定属性从子节点移动到父节点，包括边距和0dp宽度（您还必须为RelativeLayouts分配ID并使用它们）
3. 确保所有AppCompatCheckBox宽度都是wrap_content
4. 将所需的AppCompatCheckBox背景分配给相应的RelativeLayout
5. 确保每个AppCompatCheckBox都是layout_centerInParent =“true”

就是这样！