ConstraintLayout - как не дать кругу отодвинуть другие виды со страницы? проверить минимальный размер?

Question

Я пытаюсь настроить макет для приложения для подсчета, которое имеет большую круглую кнопку чуть выше центра экрана и отображение счетчика под ним. У меня проблемы с удержанием круга по кругу, целиком на экране, и не перекрывая другой вид во всех ситуациях.

Установкой, которую я сейчас использую, является ConstraintLayout с двумя TextViews. Кнопка TextView использует овал xml в качестве фона и имеет круглую форму с атрибутом layout_constraintDimensionRatio, установленным в единицу. В портретном режиме ширина устанавливается на 80% доступного пространства, и все хорошо, когда экран достаточно стандартный при обычном использовании.

Проблема возникает, если доступные размеры экрана для приложения более квадратные, так что вертикальный размер меньше горизонтального. В этом случае ширина по-прежнему устанавливается первой, поэтому мой круг закрывает другой вид или частично смещается с экрана.

В настоящее время в альбомной раскладке таймер отключен в одну сторону. В идеале в альбомной компоновке я бы держал кнопку по центру, а счетчик вправо, но чтобы прекратить увеличивать размер кнопки, если для таймера недостаточно места.

Я думаю, что в идеале я бы установил макет вверх, чтобы проверить, является ли горизонтальное или вертикальное пространство изначально короче, затем сначала установите меньший размер. Это возможно? Или, возможно, есть лучший подход к достижению желаемого макета?

Любая помощь будет очень признательна, Спасибо, Кэт ie

Это макет по умолчанию xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@android:color/white"
    tools:context=".ui.CounterFragment">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="@string/content_description_background_image"
        android:scaleType="fitStart"
        android:src="@drawable/dog_image_jpg_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        tools:visibility="visible" />

    <TextView
        android:id="@+id/timer_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/timer_display"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guidelineHorizontal" />

    <TextView
        android:id="@+id/counter_button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/circle_selector"
        android:contentDescription="@string/counter_button_content_description"
        android:text="@string/counter_text"
        app:layout_constraintBottom_toTopOf="@+id/timer_display"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.375"
        app:layout_constraintWidth_percent=".8" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineVertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.75" />

</androidx.constraintlayout.widget.ConstraintLayout>

Это ландшафтный макет:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@android:color/white"
    tools:context=".ui.CounterFragment">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="@string/content_description_background_image"
        android:scaleType="fitStart"
        android:src="@drawable/dog_image_jpg_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        tools:visibility="visible" />

    <TextView
        android:id="@+id/timer_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/timer_display"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/counter_button"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/counter_button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/circle_selector"
        android:contentDescription="@string/counter_button_content_description"
        android:text="@string/counter_text"
        app:layout_constraintBottom_toBottomOf="@id/guidelineHorizontal"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@id/guidelineVertical87"
        app:layout_constraintHeight_percent="0.8"
        app:layout_constraintStart_toEndOf="@id/guidelineVertical12"
        app:layout_constraintTop_toTopOf="@id/guidelineHorizontal" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineVertical75"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineVertical12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.125" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineVertical87"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.875" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Как вы предполагаете, основной проблемой макета является процентная ширина / высота, заданная на уровне 80% и определяющая остальную часть макета. Вы теряете контроль над высотой круга, и ничто не мешает ему расти и покрывать другие виды.

Взгляните на ConstraintLayout цепочки . Они являются мощным инструментом и позволят вам объединить ваши взгляды, чтобы они не мешали друг другу. Они помогут вам решить проблему с наложением.

Вы все равно захотите установить ширину круга равной 80% ширины или высоты в зависимости от ориентации устройства. Я предполагаю, что вы хотите, чтобы боковые поля были такими, чтобы круг мог составлять 80% обзора, но при этом размер круга будет меньше, если он должен соответствовать экрану и не перекрывать другие виды. Один из способов сделать это - определить два Space виджета, которые имеют 10% ширины макета и 10% высоты. Поместите один в верхнем левом углу макета, а другой в правом нижнем углу. Ограничьте круг этими виджетами Space слева, сверху и справа. Поместите круг в вертикальную цепочку с TextView ниже.

Вот макет того, как он будет выглядеть. Вам нужно будет поработать с макетом, чтобы понять его правильно, но вот некоторые концепции, которые должны помочь. (Мне кажется, что это также может быть сделано без виджетов Space , но это решение не приходит ко мне прямо сейчас. Я отправлю ответное письмо, если оно до меня доходит.)

XML следует за GIF.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/timer_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/timer_display"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/counter_button" />

    <TextView
        android:id="@+id/counter_button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/circle"
        android:text="@string/counter_text"
        app:layout_constraintBottom_toTopOf="@+id/timer_display"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@+id/spaceBottomRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/spaceStart"
        app:layout_constraintTop_toBottomOf="@+id/spaceStart"
        app:layout_constraintVertical_bias="0.375"
        app:layout_constraintVertical_chainStyle="packed" />

    <Space
        android:id="@+id/spaceBottomRight"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.10"
        app:layout_constraintWidth_percent="0.10" />

    <Space
        android:id="@+id/spaceStart"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.10" />


</androidx.constraintlayout.widget.ConstraintLayout>