Question

我正在尝试创建自定义复选框，我需要将其对齐到复选框的中心，该复选框的动态尺寸将根据可用宽度而定。有人可以告诉我该怎么做吗？我错过了什么吗？

布局

<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

可以通过对布局进行以下更改来达到预期的效果：

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

就是这样！

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

1 个答案: