如何正确组合滚动条和 ConstraintLayout

How to combine properly a scrollbar and a ConstraintLayout

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

通过模拟器,我的垂直视图不一定需要滚动条,但是通过水平视图,我缺少一些元素,我想我需要一个滚动条。我试过使用一个,虽然我已经在互联网和 Whosebug 中搜索了与我的问题相关的 questions/answers,但我没有成功。

有谁知道为什么我不能做这样的事情?另外,如果有一些一般tips/practices优化代码,我会很高兴。

...这是我的 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 文件。给未来的教训! 谢谢大家,你们真的带来了一些思考。

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

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

由于屏幕尺寸不同,布局在不同设备上可能看起来不同。 如果您想水平滚动,您需要将 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。