如何正确组合滚动条和 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
由于屏幕尺寸不同,布局在不同设备上可能看起来不同。
如果您想水平滚动,您需要将 HorizontalScrollView 添加到您的布局中,如下所示:
<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>
这里要记住的一点是 HorizontalScrollView 只能有一个直接子视图,因此它应该只包含一个视图组,如 ConstraintLayout 或 LinearLayout。
我对应用程序开发完全陌生,最近 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
由于屏幕尺寸不同,布局在不同设备上可能看起来不同。 如果您想水平滚动,您需要将 HorizontalScrollView 添加到您的布局中,如下所示:
<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>
这里要记住的一点是 HorizontalScrollView 只能有一个直接子视图,因此它应该只包含一个视图组,如 ConstraintLayout 或 LinearLayout。