如何正确组合滚动条和 ConstraintLayout

Question

我对应用程序开发完全陌生，最近 3 天只是尝试了一些东西，和往常一样，有几件事我不明白。

通过模拟器，我的垂直视图不一定需要滚动条，但通过水平视图，我的一些元素丢失了，我想需要一个滚动条。我尝试使用一个，虽然我已经在互联网和 stackoverflow 中搜索与我的问题相关的问题/答案，但我没有成功。

有谁知道为什么我不能做这样的事情？此外，如果有一些一般提示/实践可以优化代码，我会很高兴。

...这是我的 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="@drawable/bground"
    tools:context=".ChargeCalculatorActivity">

    <LinearLayout
        android:id="@+id/general_linear_vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingLeft="26dp"
        android:paddingRight="26dp"
        tools:layout_editor_absoluteX="-16dp"
        tools:layout_editor_absoluteY="-16dp">

        <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="60dp"
            android:text="@string/calculate_charge_success"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textSize="18sp" />
        <TextView
            android:id="@+id/switcher_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="80dp"
            android:text="@string/normal_swiftstride"
            android:textColor="@color/white"
            android:textSize="17sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.2" />

        <Switch
            android:id="@+id/switcher"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="153dp"
            android:onClick="onSwitchClicked"
            android:switchMinWidth="80dp"
            android:textColor="@color/white"
            android:textSize="22sp"

            app:layout_constraintBottom_toBottomOf="@+id/switcher_label" />

        <LinearLayout
            android:id="@+id/movement_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="@+id/switcher">

            <TextView
                android:id="@+id/movement_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginHorizontal="50dp"
                android:text="@string/unit_movement"
                android:textColor="@color/white"
                android:textSize="17sp"
                app:layout_constraintVertical_bias="0.2" />

            <EditText
                android:id="@+id/movement_input"
                android:layout_width="30dp"
                android:layout_height="40dp"
                android:layout_marginStart="-4dp"
                android:layout_marginTop="-2dp"
                android:backgroundTint="@color/white"
                android:inputType="number"
                android:maxLength="2"
                android:textAlignment="center"
                android:textColor="@color/white"

                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/movement_label"
                android:autofillHints=""
                tools:ignore="LabelFor" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/distance_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="@+id/movement_linear">

            <TextView
                android:id="@+id/distance_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginHorizontal="50dp"
                android:text="@string/target_distance"
                android:textColor="@color/white"
                android:textSize="17sp"
                app:layout_constraintTop_toBottomOf="@+id/movement_layout" />

            <EditText
                android:id="@+id/distance_input"
                android:layout_width="30dp"
                android:layout_height="40dp"
                android:layout_marginLeft="-2dp"
                android:layout_marginTop="-6dp"
                android:backgroundTint="@color/white"
                android:inputType="number"
                android:maxLength="2"
                android:textAlignment="center"
                android:textColor="@color/white"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/distance_label" />
        </LinearLayout>

        <Button
            android:id="@+id/calculate_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="60dp"
            android:backgroundTint="#2a9df4"
            android:minWidth="150dp"
            android:onClick="onClickCalculate"
            android:text="@string/calculate_button"
            android:textColor="@color/white"
            android:textSize="17sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/distance_linear" />

        <TextView
            android:id="@+id/result_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="40dp"
            android:text="@string/success_rate"
            android:textColor="@color/white"
            android:textSize="19sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/calculate_button" />

        <TextView
            android:id="@+id/result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:textColor="@color/white"
            android:textSize="58sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/result_label" />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

编辑： 好吧，我找到了解决方案。正如其他人已经提到的那样，我不得不使用“滚动条”。我已经尝试过了，但没有区别，因为我“使用”了错误的 .xml 文件。给未来上一课！ 谢谢你们，你们真的带来了一些思考。

Answer 1

由于屏幕尺寸不同，布局在不同设备上可能看起来不同。 如果您想水平滚动，您需要将 Horizo​​ntalScrollView 添加到您的布局中，如下所示：

<HorizontalScrollView
    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=".ChargeCalculatorActivity">
    
    <androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/bground">

并在</androidx.constraintlayout.widget.ConstraintLayout>之后添加结束标签</HorizontalScrollView>

这里要记住的一点是，Horizo​​ntalScrollView 只能有一个直接子级，因此它应该只包含一个视图组，如 ConstraintLayout 或 LinearLayout。

Answer 2

一般来说，屏幕分辨率和尺寸差异很大，因此请尽量在不同的虚拟设备上测试您的应用。如果您的布局适合您当前模拟器的屏幕，这不是其他用户将在他们的设备中看到的规则。

现在关于滚动功能，我建议您尝试将根布局嵌套在 scrollView