ConstraintLayout 不会正确调整大小（实际上）

Question

我对使用约束布局还很陌生，我在调整布局大小方面遇到了问题，我希望它能够响应，这样我就不必再为不同的屏幕尺寸制作 10 个布局。在布局编辑器中，一切在不同尺寸下看起来都很完美，但实际上并非如此。

我做了一些研究并尝试使用指南、链和非硬编码大小，layout_weight，我还为每个元素附加了至少 3 个约束，但仍然无济于事.

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnPlay"
        style="@android:style/Widget.DeviceDefault.Button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="32dp"
        android:layout_weight="1"
        android:background="@color/colorPrimary"
        android:fontFamily="@font/bubble3d"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:text="@string/BUTTON_PLAY"
        android:textColor="#FAFAFA"
        android:textSize="36sp"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/dispName"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/btnSettings"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="32dp"
        android:background="@color/colorPrimary"
        android:fontFamily="@font/bubble3d"
        android:paddingTop="4dp"
        android:layout_weight="1"
        android:paddingBottom="4dp"
        android:text="@string/BUTTON_SETTINGS"
        android:textColor="#FAFAFA"
        android:textSize="36sp"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/btnStats" />

    <Button
        android:id="@+id/btnStats"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="32dp"
        android:background="@color/colorPrimary"
        android:fontFamily="@font/bubble3d"
        android:paddingTop="4dp"
        android:layout_weight="1"
        android:paddingBottom="4dp"
        android:text="@string/BUTTON_STATS"
        android:textColor="#FAFAFA"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/btnSettings"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/btnPlay" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/guideline5"
        app:srcCompat="@drawable/worddart" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circleImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="8dp"
        android:scaleX="0.7"
        android:scaleY="0.7"
        android:layout_weight="1"
        android:src="@drawable/proficon_crab"
        app:civ_border_color="#03A9F4"
        app:civ_border_width="12dp"
        app:civ_fill_color="#03A9F4"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.493"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/dispName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="AnonCrab_c343d"
        android:textSize="24sp"
        android:layout_weight="1"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/circleImageView" />


    <com.google.android.gms.common.SignInButton
        android:id="@+id/sign_in_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="24dp"
        android:visibility="visible"
        android:layout_weight="1"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/btnSettings"
        app:layout_constraintVertical_bias="0.815" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.95" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.05" />

</androidx.constraintlayout.widget.ConstraintLayout>

并将此添加到 styles.xml：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:fitsSystemWindows">true</item>
</style>

This is how it's supposed to look on Pixel2 screen

and this is how it looks on my Nexus 5 (almost the same size as pixel2)

正如您在水平方向上看到的那样，一切正常，但在垂直方向上，并非如此，google 登录按钮滑出并且间距不同。任何帮助将不胜感激:)

Answer 1

您确实没有为视图使用硬编码尺寸，但请注意您将它们用作边距。

尝试这样使用：

<?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"
  tools:context=".MainActivity">

<Button
    android:id="@+id/btnPlay"
    style="@android:style/Widget.DeviceDefault.Button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    android:text="BUTTON_PLAY"
    android:textColor="#FAFAFA"
    app:layout_constraintBottom_toTopOf="@+id/btnStats"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/dispName" />

<Button
    android:id="@+id/btnSettings"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    android:text="BUTTON_SETTINGS"
    android:textColor="#FAFAFA"
    app:layout_constraintBottom_toTopOf="@+id/sign_in_button"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/btnPlay"
    app:layout_constraintTop_toBottomOf="@+id/btnStats" />

<Button
    android:id="@+id/btnStats"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    android:text="BUTTON_STATS"
    android:textColor="#FAFAFA"
    app:layout_constraintBottom_toTopOf="@+id/btnSettings"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/btnPlay"
    app:layout_constraintTop_toBottomOf="@+id/btnPlay" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="313dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_weight="1"
    android:adjustViewBounds="true"
    app:layout_constraintBottom_toTopOf="@+id/dispName"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView"
    app:srcCompat="@drawable/ic_launcher_background" />

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/circleImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_weight="1"
    android:scaleX="0.7"
    android:scaleY="0.7"
    android:src="@drawable/proficon_crab"
    app:civ_border_color="#03A9F4"
    app:civ_border_width="12dp"
    app:civ_fill_color="#03A9F4"
    app:layout_constraintBottom_toTopOf="@+id/imageView"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/dispName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_weight="1"
    android:text="AnonCrab_c343d"

    app:layout_constraintBottom_toTopOf="@+id/btnPlay"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />


<com.google.android.gms.common.SignInButton
    android:id="@+id/sign_in_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/btnSettings" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.1" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.9" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.95" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.05" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

这是来自布局编辑器的图片，因为这只是一个示例，您可以根据需要随意调整样式。

ConstraintLayout 不会正确调整大小（实际上）

ConstraintLayout won't size correctly (in practice)

android

android-layout

android-xml