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无法正确调整大小（实际上）

1 个答案: