我可以使用的最佳布局是什么？

Question

我有一个依赖于约束布局的布局。 结果在一台设备上非常好，但是在更改屏幕尺寸以在多设备和多屏幕Obs中看到它时！布局被破坏了。

所以， 让布局支持所有屏幕尺寸而不被破坏的最佳方法是什么？

这是xml代码

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


    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="56dp"
        android:layout_marginEnd="196dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintTop_toBottomOf="@+id/imageView8"
        app:srcCompat="@drawable/ic_book5" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="68dp"
        android:layout_marginTop="132dp"
        app:layout_constraintStart_toEndOf="@+id/imageView8"
        app:layout_constraintTop_toBottomOf="@+id/imageView6"
        app:srcCompat="@drawable/ic_book1" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="104dp"
        android:layout_marginTop="28dp"
        app:layout_constraintStart_toEndOf="@+id/imageView1"
        app:layout_constraintTop_toBottomOf="@+id/imageView1"
        app:srcCompat="@drawable/ic_book3" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="132dp"
        android:layout_marginEnd="136dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView9"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/imageView7"
        app:layout_constraintTop_toBottomOf="@+id/winner"
        app:srcCompat="@drawable/ic_book4" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="104dp"
        android:layout_marginEnd="80dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/imageView7"
        app:srcCompat="@drawable/ic_book2" />

    <ImageView
        android:id="@+id/winner"
        android:layout_width="78dp"
        android:layout_height="117dp"
        android:layout_marginStart="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/imageView7"
        app:srcCompat="@drawable/ic_winner"
        tools:layout_editor_absoluteY="-34dp" />

    <ImageView
        android:id="@+id/start"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="128dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintTop_toBottomOf="@+id/imageView5"
        app:srcCompat="@drawable/ic_startt" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="104dp"
        android:layout_marginEnd="116dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView10"
        app:layout_constraintHorizontal_bias="0.954"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/imageView4"
        app:srcCompat="@drawable/ic_book6" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="61dp"
        android:layout_marginTop="24dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/winner"
        app:srcCompat="@drawable/ic_book7" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="32dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView6"
        app:layout_constraintTop_toBottomOf="@+id/imageView6"
        app:srcCompat="@drawable/ic_book8" />

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="228dp"
        android:layout_marginTop="12dp"
        app:layout_constraintStart_toEndOf="@+id/imageView7"
        app:layout_constraintTop_toBottomOf="@+id/winner"
        app:srcCompat="@drawable/ic_book9" />

    <ImageView
        android:id="@+id/imageView10"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="116dp"
        android:layout_marginTop="120dp"
        app:layout_constraintStart_toEndOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/imageView9"
        app:srcCompat="@drawable/ic_book10" />

</androidx.constraintlayout.widget.ConstraintLayout>

This is the layout which I want to be

and this is the result

Answer 1

使用约束布局指南来解决不同的屏幕尺寸问题。

您在下面发现您的 xml 文件已更新，以使用指南解决不同的屏幕尺寸问题。

<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="@color/colorPrimary"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline4"
        app:layout_constraintLeft_toRightOf="@id/guideline3"
        app:srcCompat="@drawable/ic_book5" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline4"
        app:layout_constraintLeft_toRightOf="@id/guideline7"
        app:srcCompat="@drawable/ic_book1" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline17"
        app:layout_constraintLeft_toRightOf="@id/guideline9"
        app:srcCompat="@drawable/ic_book3" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline13"
        app:layout_constraintLeft_toRightOf="@id/guideline6"
        app:srcCompat="@drawable/ic_book4" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline14"
        app:layout_constraintRight_toLeftOf="@id/guideline1"
        app:srcCompat="@drawable/ic_book2" />

    <ImageView
        android:id="@+id/winner"
        android:layout_width="78dp"
        android:layout_height="117dp"
        app:layout_constraintBottom_toTopOf="@id/guideline16"
        app:layout_constraintLeft_toRightOf="@id/guideline3"
        app:srcCompat="@drawable/ic_launcher_foreground" />

    <ImageView
        android:id="@+id/start"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline5"
        app:layout_constraintLeft_toRightOf="@id/guideline6"
        app:srcCompat="@drawable/ic_startt" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline12"
        app:layout_constraintLeft_toRightOf="@id/guideline6"
        app:srcCompat="@drawable/ic_book6" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline15"
        app:layout_constraintLeft_toRightOf="@id/guideline1"
        app:srcCompat="@drawable/ic_book7" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline11"
        app:layout_constraintLeft_toRightOf="@id/guideline1"
        app:srcCompat="@drawable/ic_book8" />
    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline15"
        app:layout_constraintLeft_toRightOf="@id/guideline9"
        app:srcCompat="@drawable/ic_book9" />

    <ImageView
        android:id="@+id/imageView10"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toTopOf="@id/guideline18"
        app:layout_constraintLeft_toRightOf="@id/guideline8"
        app:srcCompat="@drawable/ic_book10" />

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

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

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

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

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

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

    <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.78" />

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

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

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

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

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

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

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

    <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.86" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

您可以从这里详细了解指南

https://constraintlayout.com/basics/guidelines.html

至于处理不同屏幕的图像尺寸，您可以为不同尺寸创建不同的图像文件。

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

Answer 2

所以在看到您的图像后，背景中似乎有一条路径。基本上，您需要将所有小 ic_book 图像相对于该路径图像（由于某种原因我无法在视图列表中找到），而不是像您正在做的那样彼此相对。您可能想使用ConstraintLayout，但尝试复制已弃用的RelativePercentLayout 的行为，以便您可以将位置表示为路径图像的百分比。 here 是一个示例，说明如何使用指南（也如上所述）来做到这一点。