Как разместить ImageView поверх другого ImageView?

Question

У меня очень простая проблема. Я хотел бы разместить ImageViews поверх этого изображения ладовой доски гитары, чтобы я мог сделать простую программу табулатур, не похожую на songsterr, но очень простую.

Вот как выглядит текущее представление.

Гитарный гриф

и вот код для этого

<?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=".ui.home.HomeFragment">

<RelativeLayout
    android:orientation="vertical"
    android:gravity="top"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:ignore="MissingConstraints">

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <HorizontalScrollView
            android:id="@+id/horizontalScrollView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >


            <LinearLayout
                android:gravity="top"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/fretboardView"
                    android:layout_width="fill_parent"
                    android:layout_height="777dp"
                    android:layout_gravity="center"
                    android:src="@drawable/fretboard" />


            </LinearLayout>
        </HorizontalScrollView>
    </ScrollView>

</RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Вот пример того, как я бы хотел, чтобы он выглядел.

С ладами

Я пытался сделать свой макет root относительным макетом и просто разместить их там, где я хочу, но когда я перетаскиваю другой ImageView в свой вид, он просто помещает его за пределы экрана. Спасибо тем, кто нашел время ответить.

Answer 1

Прежде всего, вы не должны требовать вложения RelativeLayout внутри ConstraintLayout. Вы также, вероятно, захотите, чтобы ваш ScrollView был макетом верхнего уровня, а макет root находился внутри ScrollView. Кроме того, каковы ваши намерения, чтобы HorizontalScrollView был вложен в ScrollView? Вам нужно, чтобы представление прокручивалось как по вертикали, так и по горизонтали?

Внутри ConstraintLayout вы можете размещать любые виды относительно друг друга или родительского вида ConstraintLayout. Это включает наличие некоторых дочерних представлений поверх других дочерних представлений.

Другой вариант - использовать FrameLayout, который обертывает содержимое фона ImageView. Затем используйте LinearLayout, чтобы поместить меньшие виды сверху. Например:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/fretboardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fretboard" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/dot1"
            android:layout_width="wrap_content"
            android:layout_weight="wrap_content"
            android:src="@drawable/dot" />

        <ImageView
            android:id="@+id/dot2"
            android:layout_width="wrap_content"
            android:layout_weight="wrap_content"
            android:src="@drawable/dot" />

    </LinearLayout>

</FrameLayout>

Возможно, вам также понадобится использовать другую вертикальную ориентацию LinearLayout, чтобы расположить точки вдоль струн на ладу. Например:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/fretboardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fretboard" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

Вам также нужно будет добавить пробелы там, где вам не нужны точки. Например:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/fretboardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fretboard" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

            <Space
                android:layout_width="match_parent"
                android:layout_height="@dimen/dot_size" />

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

            <Space
                android:layout_width="match_parent"
                android:layout_height="@dimen/dot_size" />

            <Space
                android:layout_width="match_parent"
                android:layout_height="@dimen/dot_size" />

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_weight="wrap_content"
                android:src="@drawable/dot" />

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

Где @dimen/dot_size определяется как размер одной из точек.

Существует несколько вариантов с использованием различных типов макета, которые вы можете использовать. ConstraintLayout имеет то преимущество, что требуется только один root ViewGroup. Но было бы проще осмыслить и построить макет, используя LinearLayout, аналогичные моим примерам.