在不同设备的情况下布局行为不符合预期
layout behavior not as expected in case of different device
这是我的输出形式不同的设备配置Layout Picture
我需要静态布局。
我的布局未按预期运行。它在不同的设备上显示不同。没有滚动修复到屏幕。
使用约束布局
这是我的布局代码。
layout.xml
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "1.0"
android:scaleType="fitCenter"
android:background="@drawable/onboarding_pantry"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:contentDescription="@string/title_splash" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_20sdp"
android:textSize="@dimen/_20ssp"
android:textStyle="bold"
android:textColor="@color/main_text_color"
android:text="@string/text_start_cooking"
app:layout_constraintTop_toBottomOf="@+id/imageViewOnboarding"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="@dimen/_50sdp"
android:paddingEnd="@dimen/_50sdp"
android:layout_marginTop="@dimen/_12sdp"
android:textSize="@dimen/_15ssp"
android:gravity="center"
android:lines="2"
android:textColor="@color/main_text_color_light"
android:text="@string/text_start_cooking_detail"
app:layout_constraintTop_toBottomOf="@+id/headerText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="@dimen/_50sdp"
android:layout_marginTop="@dimen/_40sdp"
android:layout_marginStart="@dimen/_15sdp"
android:layout_marginEnd="@dimen/_15sdp"
android:layout_marginBottom="@dimen/_30sdp"
android:textSize="@dimen/_17ssp"
android:gravity="center"
android:background="@drawable/default_round_button"
android:text="@string/action_text_getStarted"
android:textColor="@color/white"
app:layout_constraintTop_toBottomOf="@+id/headerTextDetail"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
我也不想在布局中添加滚动条。
谢谢
发生这种情况是因为图像视图没有底部约束。要解决此问题，请仅将底部约束添加到 getStartedText 和 app:layout_constraintBottom_toTopOf 以用于所有上述项目，以便它们从底部开始垂直约束。对于图像视图，添加 app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/headerText" 以便图像视图使用 headerText 和父级顶部上方的所有空闲 space。
在以下限制条件下，它可以在所有屏幕尺寸上正常工作。
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "1.0"
android:scaleType="fitCenter"
android:background="@drawable/ic_launcher_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/headerText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@color/colorPrimary"
android:text="text_start_cooking"
app:layout_constraintBottom_toTopOf="@id/headerTextDetail"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:layout_marginTop="12dp"
android:textSize="15dp"
android:gravity="center"
android:lines="2"
android:textColor="@color/colorPrimary"
android:text="text_start_cooking_detail"
app:layout_constraintBottom_toTopOf="@id/getStartedText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="40dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="30dp"
android:textSize="17sp"
android:gravity="center"
android:text="action_text_getStarted"
android:textColor="@color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
您的观点不在底部约束中。此代码在不同的设备上得到验证。
添加 app:layout_constraintBottom_toBottomOf 约束到您的每个视图。
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:background="@mipmap/ic_launcher"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="@+id/headerText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Start Cooking"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/headerTextDetail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageViewOnboarding" />
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:lines="2"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:text="let's join our community to cook better food!"
android:textColor="#FF000000"
android:textSize="15dp"
app:layout_constraintBottom_toTopOf="@+id/getStartedText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/headerText" />
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="15dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="30dp"
android:background="#4CAF50"
android:gravity="center"
android:text="Get Started"
android:textColor="@color/white"
android:textSize="17sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/headerTextDetail" />
这是我的输出形式不同的设备配置Layout Picture
我需要静态布局。
我的布局未按预期运行。它在不同的设备上显示不同。没有滚动修复到屏幕。 使用约束布局 这是我的布局代码。
layout.xml
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "1.0"
android:scaleType="fitCenter"
android:background="@drawable/onboarding_pantry"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:contentDescription="@string/title_splash" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_20sdp"
android:textSize="@dimen/_20ssp"
android:textStyle="bold"
android:textColor="@color/main_text_color"
android:text="@string/text_start_cooking"
app:layout_constraintTop_toBottomOf="@+id/imageViewOnboarding"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="@dimen/_50sdp"
android:paddingEnd="@dimen/_50sdp"
android:layout_marginTop="@dimen/_12sdp"
android:textSize="@dimen/_15ssp"
android:gravity="center"
android:lines="2"
android:textColor="@color/main_text_color_light"
android:text="@string/text_start_cooking_detail"
app:layout_constraintTop_toBottomOf="@+id/headerText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="@dimen/_50sdp"
android:layout_marginTop="@dimen/_40sdp"
android:layout_marginStart="@dimen/_15sdp"
android:layout_marginEnd="@dimen/_15sdp"
android:layout_marginBottom="@dimen/_30sdp"
android:textSize="@dimen/_17ssp"
android:gravity="center"
android:background="@drawable/default_round_button"
android:text="@string/action_text_getStarted"
android:textColor="@color/white"
app:layout_constraintTop_toBottomOf="@+id/headerTextDetail"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
我也不想在布局中添加滚动条。 谢谢
发生这种情况是因为图像视图没有底部约束。要解决此问题，请仅将底部约束添加到 getStartedText 和 app:layout_constraintBottom_toTopOf 以用于所有上述项目，以便它们从底部开始垂直约束。对于图像视图，添加 app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/headerText" 以便图像视图使用 headerText 和父级顶部上方的所有空闲 space。
在以下限制条件下，它可以在所有屏幕尺寸上正常工作。
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "1.0"
android:scaleType="fitCenter"
android:background="@drawable/ic_launcher_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/headerText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@color/colorPrimary"
android:text="text_start_cooking"
app:layout_constraintBottom_toTopOf="@id/headerTextDetail"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:layout_marginTop="12dp"
android:textSize="15dp"
android:gravity="center"
android:lines="2"
android:textColor="@color/colorPrimary"
android:text="text_start_cooking_detail"
app:layout_constraintBottom_toTopOf="@id/getStartedText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="40dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="30dp"
android:textSize="17sp"
android:gravity="center"
android:text="action_text_getStarted"
android:textColor="@color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
您的观点不在底部约束中。此代码在不同的设备上得到验证。 添加 app:layout_constraintBottom_toBottomOf 约束到您的每个视图。
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/imageViewOnboarding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:background="@mipmap/ic_launcher"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="@+id/headerText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Start Cooking"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/headerTextDetail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageViewOnboarding" />
<TextView
android:id="@+id/headerTextDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:lines="2"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:text="let's join our community to cook better food!"
android:textColor="#FF000000"
android:textSize="15dp"
app:layout_constraintBottom_toTopOf="@+id/getStartedText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/headerText" />
<TextView
android:id="@+id/getStartedText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="15dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="30dp"
android:background="#4CAF50"
android:gravity="center"
android:text="Get Started"
android:textColor="@color/white"
android:textSize="17sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/headerTextDetail" />