约束布局在不同设备上表现不同

Question

我试图将我的相对布局转换为约束布局以适合每个设备，但我遇到了一些问题。在 Android Studio 的编辑器中，它看起来像这样： 

我使用 Pixel C 作为模拟器来制作它。现在，我在 Samsung Galaxy 选项卡上尝试了该应用程序，结果如下：

为什么按钮不像第一张图片那样位于屏幕中央？这是 xml 的代码，如您所见，我什至锚定了元素以保持它们之间的距离：

<android.support.constraint.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:id="@+id/relativeLayout"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/background_main"

android:scaleType="centerCrop"

tools:context=".MainActivity">

<TextView

    android:id="@+id/textView2"

    android:layout_width="708dp"

    android:layout_height="231dp"

    android:layout_marginTop="152dp"

    android:layout_marginEnd="8dp"

    android:layout_marginBottom="8dp"

    android:fontFamily="@font/kotta_one"

    android:text="Test del pensiero\n       divergente"

    android:textColor="#000000"

    android:textSize="86dp"

    android:textStyle="bold"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintHorizontal_bias="0.57"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent"

    app:layout_constraintVertical_bias="0.195" />

<Button

    android:id="@+id/button_1"

    android:layout_width="180dp"

    android:layout_height="60dp"

    android:layout_marginStart="8dp"

    android:layout_marginEnd="76dp"

    android:layout_marginBottom="8dp"

    android:background="@drawable/button_bg"

    android:text="@string/invioA"

    android:textAllCaps="false"

    android:textColor="#FFFFFF"

    android:textSize="18dp"

</android.support.constraint.ConstraintLayout>

Answer 1

您为按钮和文本视图提供了错误的宽度和高度。此外，对于水平按钮和相同的宽度和高度，您可以使用如下我使用的链条。在这里，我给你大概的设计，你也可以使用你的 ConstraintLayout 因为我有 androidx 迁移的项目。<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"&nbsp; &nbsp; xmlns:app="http://schemas.android.com/apk/res-auto"&nbsp; &nbsp; android:id="@+id/relativeLayout"&nbsp; &nbsp; android:layout_width="match_parent"&nbsp; &nbsp; android:layout_height="match_parent"&nbsp; &nbsp; android:background="@color/add_news_feed_bg"&nbsp; &nbsp; android:scaleType="centerCrop">&nbsp; &nbsp; <TextView&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/textView2"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="0dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_marginStart="8dp"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_marginEnd="8dp"&nbsp; &nbsp; &nbsp; &nbsp; android:text="Test del pensiero\n&nbsp; &nbsp; &nbsp; &nbsp;divergente"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#000000"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="86dp"&nbsp; &nbsp; &nbsp; &nbsp; android:textStyle="bold"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintBottom_toBottomOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintEnd_toEndOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintStart_toStartOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintTop_toTopOf="parent" />&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/button_1"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:background="@color/bg_toolbar"&nbsp; &nbsp; &nbsp; &nbsp; android:text="invioA"&nbsp; &nbsp; &nbsp; &nbsp; android:textAllCaps="false"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#FFFFFF"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="18dp"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintBottom_toBottomOf="@+id/button_2"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintEnd_toStartOf="@+id/button_2"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintStart_toStartOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintTop_toTopOf="@+id/button_2" />&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/button_2"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_marginBottom="8dp"&nbsp; &nbsp; &nbsp; &nbsp; android:background="@color/bg_toolbar"&nbsp; &nbsp; &nbsp; &nbsp; android:text="invioB"&nbsp; &nbsp; &nbsp; &nbsp; android:textAllCaps="false"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#FFFFFF"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="18dp"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintBottom_toBottomOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintEnd_toEndOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintStart_toEndOf="@+id/button_1"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintTop_toBottomOf="@+id/textView2" />&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; android:id="@+id/button_3"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_width="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_height="wrap_content"&nbsp; &nbsp; &nbsp; &nbsp; android:layout_marginEnd="8dp"&nbsp; &nbsp; &nbsp; &nbsp; android:background="@android:color/transparent"&nbsp; &nbsp; &nbsp; &nbsp; android:text="Area\nDocenti"&nbsp; &nbsp; &nbsp; &nbsp; android:textAllCaps="false"&nbsp; &nbsp; &nbsp; &nbsp; android:textColor="#030000"&nbsp; &nbsp; &nbsp; &nbsp; android:textSize="26dp"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintBottom_toTopOf="@+id/textView2"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintEnd_toEndOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintStart_toStartOf="parent"&nbsp; &nbsp; &nbsp; &nbsp; app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>