如何将 ImageViews 放在另一个 ImageView 之上？答案

【问题标题】：How to place ImageViews on top of another ImageView?如何将 ImageViews 放在另一个 ImageView 之上？
【发布时间】：2020-08-23 05:06:12
【问题描述】：

我有一个非常简单的问题。我想将 ImageViews 放在这张吉他指板图像的顶部，这样我就可以制作一个简单的指法谱程序，与 songsterr 不同，但非常简单。

这是当前视图的样子。

Guitar Fretboard

这是代码

<?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>

这是我希望它看起来的示例。

With frets

我试图做的是让我的根布局成为相对布局，然后将它们放置在我想要的位置，但是当我将另一个 ImageView 拖到我的视图中时，它只是将其放置在屏幕之外。感谢那些花时间回答的人。

【问题讨论】：

标签： android xml android-studio android-layout imageview

【解决方案1】：

首先，您不应该要求将RelativeLayout 嵌套在ConstraintLayout 中。您可能还希望您的ScrollView 作为顶级布局，而您的根布局在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 的优点是只需要一个根 ViewGroup。但是使用类似于我的示例的LinearLayouts 来概念化和构建布局可能更容易。

【讨论】：

非常感谢您的回复。我只需要水平滚动指板而不是垂直滚动，但我无法禁用垂直。当我尝试你的代码时，我非常接近，但我似乎无法准确定位点 gyazo.com/dbf106c8d381f6b2ed630dba55b67e76 这是一个屏幕截图。
您可能想要在指板图像和外部LinearLayout 上设置重力，可能是android:layout_gravity="center_vertical"。您还可以使用android:paddingTop="50dp" 将顶部填充添加到第一个LinearLayout，但需要使其与指板图像对齐。但填充解决方案可能不适用于不同的屏幕尺寸。
嘿，谢谢！现在与重力属性更接近了。 gyazo.com/2aa3d00323d3483910c753957f176e88 我会将其标记为解决方案，但我可能会另外提出一个问题，询问如何针对不同的屏幕尺寸执行此操作。谢谢。