Каков наилучший макет, я могу использовать его?

Question

У меня есть макет, который зависит от макета ограничения. Результат был очень хорошим на одном устройстве, но при изменении размера экрана, чтобы увидеть его на нескольких устройствах и на нескольких экранах! Разметка была разрушена.

Итак, каков наилучший способ получить разметку для поддержка всех размеров экрана без разрушения?

Это 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>

Это макет, которым я хочу быть

и это результат

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 относительно этого пути image (который по некоторым причинам я не могу найти в списке представлений), а не относительно друг друга, как вы делаете. Возможно, вы хотите использовать ConstraintLayout, но попытайтесь повторить поведение устаревшей RelativePercentLayout, чтобы вы могли express позиций в процентах от вашего пути. здесь - пример того, как это сделать, используя рекомендации (как также предлагалось выше).