我可以使用哪种最佳布局？

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是如何使用准则（如上所述）的一个示例。