Выровняйте кнопку-флажок по центру зрения - PullRequest
Новая
       47

Выровняйте кнопку-флажок по центру зрения

0 голосов
/ 15 марта 2019

Я пытаюсь создать пользовательские флажки, и мне нужно выровнять его по центру checbox, который будет иметь свой динамический размер в соответствии с доступной шириной.Может кто-нибудь сказать мне, как я могу это сделать?Чего-то не хватает, что я пропустил?

image

макет 

<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>

1 Ответ

1 голос
/ 15 марта 2019

Вы можете достичь желаемого эффекта, внеся следующие изменения в свой макет:

  1. Оберните каждый AppCompatCheckBox в RelativeLayout
  2. Переместите все определенные атрибуты ConstraintLayout из дочернего объекта в родительский, включая поляи ширина 0dp (вам также нужно будет назначить идентификаторы для ваших RelativeLayouts и использовать их)
  3. Убедитесь, что все значения ширины AppCompatCheckBox равны wrap_content
  4. Назначьте желаемый фон AppCompatCheckBox соответствующему RelativeLayout
  5. Убедитесь, что каждый AppCompatCheckBox имеет layout_centerInParent = "true"

Вот и все!

...