ConstraintLayout - 如何防止圆圈将其他视图推离页面？检查最小尺寸？
ConstraintLayout - how to keep circle from pushing other views off the page? check minimum dimension?
我正在尝试为一个计数应用程序设置布局，它有一个大的圆形按钮，略高于屏幕中心，下方有一个计数器显示。我无法将圆圈完全保持在屏幕上，并且在所有情况下都不会覆盖其他视图。
我目前使用的设置是带有两个 TextView 的 ConstraintLayout。按钮 TextView 使用 xml 椭圆作为其背景，并设置为圆形，"layout_constraintDimensionRatio" 属性设置为 1。在纵向模式下，宽度设置为可用宽度的 80% space，当屏幕在正常使用中相当标准时，一切都很好。
如果应用的可用屏幕尺寸更方形，导致垂直尺寸小于水平尺寸，则会出现此问题。在这种情况下，宽度仍然首先设置，所以我的圆圈覆盖了另一个视图或部分滑出屏幕。
目前在横向布局中，我将计时器关闭到一侧。理想情况下，在横向布局中，我会保持按钮居中，计数器在右侧，但如果没有足够的 space 用于计时器，则停止增加按钮的大小。
我认为理想情况下，我会设置布局以检查水平或垂直 space 最初是否较短，然后先设置较小的尺寸。这可能吗？或者是否有更好的方法来实现我想要的布局？
非常感谢任何帮助，
谢谢，
凯蒂
这是默认的 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>
正如您所建议的，布局的主要问题是百分比 width/height 设置为 80% 并驱动布局的其余部分。您正在失去对圆圈高度的控制，并且没有什么可以阻止它增长以覆盖其他视图。
看看 ConstraintLayout chains。它们是一种强大的工具，可以让您将您的观点联系在一起，这样它们就不会互相打败。他们会帮你解决覆盖问题。
您仍需要将圆的宽度设置为宽度或高度的 80%，具体取决于设备的方向。我假设您希望边距使圆可以占视图的 80%，但如果需要适合屏幕并且不与其他视图重叠，则允许圆更小。一种方法是定义两个 Space 小部件，它们分别占布局宽度的 10% 和高度的 10%。将一个放在布局的左上角，另一个放在右下角。将圆限制为左侧、顶部和右侧的这些 Space 小部件。将圆形与下面的 TextView 垂直链放置。
这是它的外观模型。您将不得不使用您的布局来使其正确，但这些概念应该有所帮助。 （在我看来，这也可以在没有 Space 小部件的情况下完成，但我现在没有想到这个解决方案。我会 post 回来如果我突然想到。）
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>
我正在尝试为一个计数应用程序设置布局，它有一个大的圆形按钮，略高于屏幕中心，下方有一个计数器显示。我无法将圆圈完全保持在屏幕上，并且在所有情况下都不会覆盖其他视图。
我目前使用的设置是带有两个 TextView 的 ConstraintLayout。按钮 TextView 使用 xml 椭圆作为其背景，并设置为圆形，"layout_constraintDimensionRatio" 属性设置为 1。在纵向模式下，宽度设置为可用宽度的 80% space，当屏幕在正常使用中相当标准时，一切都很好。
如果应用的可用屏幕尺寸更方形，导致垂直尺寸小于水平尺寸，则会出现此问题。在这种情况下，宽度仍然首先设置，所以我的圆圈覆盖了另一个视图或部分滑出屏幕。
目前在横向布局中，我将计时器关闭到一侧。理想情况下，在横向布局中，我会保持按钮居中，计数器在右侧，但如果没有足够的 space 用于计时器，则停止增加按钮的大小。
我认为理想情况下，我会设置布局以检查水平或垂直 space 最初是否较短，然后先设置较小的尺寸。这可能吗？或者是否有更好的方法来实现我想要的布局？
非常感谢任何帮助， 谢谢， 凯蒂
这是默认的 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>
正如您所建议的，布局的主要问题是百分比 width/height 设置为 80% 并驱动布局的其余部分。您正在失去对圆圈高度的控制，并且没有什么可以阻止它增长以覆盖其他视图。
看看 ConstraintLayout chains。它们是一种强大的工具，可以让您将您的观点联系在一起，这样它们就不会互相打败。他们会帮你解决覆盖问题。
您仍需要将圆的宽度设置为宽度或高度的 80%，具体取决于设备的方向。我假设您希望边距使圆可以占视图的 80%，但如果需要适合屏幕并且不与其他视图重叠，则允许圆更小。一种方法是定义两个 Space 小部件，它们分别占布局宽度的 10% 和高度的 10%。将一个放在布局的左上角，另一个放在右下角。将圆限制为左侧、顶部和右侧的这些 Space 小部件。将圆形与下面的 TextView 垂直链放置。
这是它的外观模型。您将不得不使用您的布局来使其正确，但这些概念应该有所帮助。 （在我看来，这也可以在没有 Space 小部件的情况下完成，但我现在没有想到这个解决方案。我会 post 回来如果我突然想到。）
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>