Android Studio 按钮在运行时向下滑动并且 ImageView 不显示

Question

我认为我对布局内的每个元素都有正确的约束，我希望应用程序在运行时查看预览。骰子图像的资源在另一个活动中正常工作，但由于某种原因没有显示在主要/第一个活动中。

这是在 Android Studio 中显示的预览：

运行时的应用程序：

<?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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:contentDescription="@string/dice_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.513"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.202"
        tools:srcCompat="@drawable/dice_1" />

    <Button
        android:id="@+id/roll_d6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/roll_d6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/roll_d4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d4"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d6" />

    <Button
        android:id="@+id/roll_d8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d8"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d4" />

    <Button
        android:id="@+id/roll_d10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d10"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d8" />

    <Button
        android:id="@+id/roll_d12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d12"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d10" />

    <Button
        android:id="@+id/roll_d20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/roll_d20"
        app:layout_constraintEnd_toEndOf="@+id/roll_d6"
        app:layout_constraintStart_toStartOf="@+id/roll_d6"
        app:layout_constraintTop_toBottomOf="@+id/roll_d12" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

它按程序工作，你只是在一个小尺寸的显示器上检查它，骰子图像下方没有空间来容纳 6 个按钮。

您需要做的是make it responsive，以适应不同的屏幕尺寸。

1. 删除所有按钮的边距或将其设置为最小边距，以便在屏幕尺寸太小且最后一个按钮可以容纳时不会占用太多空间。
2. 通过将按钮的底部连接到下一个按钮的顶部作为Bottom_ToTop 就像Top_toBottom 一样，将按钮相互连接起来，使其成为一个链，对于第 4 点和最后一个按钮的底部到父级的底部很有用，这样它就不会不要超过这一点。
3. 在按钮中设置vertical constraint style（通常，只在第一个按钮中设置就足够了）为spread_inside。这将使所有 6 个按钮之间的可用空间相等。最小空间将是您设置的边距。
4. 对于小尺寸，请考虑将其设置为 2xN 的按钮网格而不是列表，以利用可用的水平空间。

Answer 2

使用

android:src="@drawable/dice_1"

而不是

tools:srcCompat="@drawable/dice_1"

如果您在运行时在 xml 中使用 android:src 这将显示 在应用程序上，而如果您在 xml 中使用 tools:src 它只会显示在 Android Studio 的预览版，而不是应用的运行时。

Reference