问题
I'm trying to create custom checkboxes and I need to align it to the center of the checbox that will have its dynamic size according to the available width. Can someone tell me how I can do this? Is there something missing that I missed?
layout
<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" />
icon button selector
<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>
background 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>
background
<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>
background selected
<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>
回答1:
You can achieve desired effect by making the following changes to your layout:
- Wrap each AppCompatCheckBox into RelativeLayout
- Move all the ConstraintLayout specific attributes from child to parent, including margins and 0dp width (you will also have to assign IDs to your RelativeLayouts and use them)
- Make sure all AppCompatCheckBox width is wrap_content
- Assign desired background of AppCompatCheckBox to corresponding RelativeLayout
- Make sure each AppCompatCheckBox is layout_centerInParent = "true"
That's about it!
来源：https://stackoverflow.com/questions/55187932/align-checkbox-button-to-center-of-view