android - ConstraintLayout - 如何防止圈子将其他视图推离页面？检查最小尺寸？
问题描述
我正在尝试为计数应用程序设置布局，该应用程序在屏幕中心略上方有一个大圆形按钮，在其下方有一个计数器显示。我无法将圆圈完全保持在屏幕上，并且在所有情况下都不会覆盖其他视图。
我目前使用的设置是带有两个 TextView 的 ConstraintLayout。按钮 TextView 使用 xml 椭圆作为其背景，并设置为圆形，“layout_constraintDimensionRatio”属性设置为 1。在纵向模式下，宽度设置为可用空间的 80%，当屏幕在正常使用中相当标准时，一切都很好。
如果应用程序的可用屏幕尺寸更方形，从而垂直尺寸小于水平尺寸，则会出现此问题。在这种情况下，宽度仍然是首先设置的，所以我的圆圈会覆盖另一个视图或部分滑出屏幕。
目前在横向布局中，我将计时器关闭到一侧。理想情况下，在横向布局中，我会保持按钮居中，计数器向右，但如果没有足够的空间放置计时器，则停止增加按钮的大小。
我认为理想情况下我会设置布局以检查水平或垂直空间最初是否更短，然后先设置较小的尺寸。这可能吗？或者也许有更好的方法来实现我想要的布局？
任何帮助将不胜感激，谢谢你，凯蒂
这是默认的 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>
解决方案
正如您所建议的，您的布局的主要问题是将宽度/高度百分比设置为 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>
推荐阅读
- unit-testing - junit 测试返回类型为 int 且参数为 arraylist 的方法
- javascript - Javascript 承诺永远不会解决
- python - 为什么弹出关闭方法会导致错误？（蟒蛇kivymd）
- html - 图像溢出容器
- winforms - 使用 PowerShell，如何使用 CMD.exe 调用 CURL.exe 并在 WinForm 中显示结果
- google-apps-script - Google 应用程序脚本 onChange 无法将触发器对象传递给变量
- java - 使用活动之间的先前数据重新加载 recyclerView
- javascript - 我该如何解决这个问题？未捕获的类型错误：无法读取 HTMLButtonElement.botonContinuar.onclick 处未定义的属性“textContent”
- java - 在 Java 中的 Scanner 中包含空格
- php - 按钮使一行处于活动状态，其他行处于非活动状态