如何将ImageView放置在另一个ImageView之上



我有一个非常简单的问题。我想把ImageViews放在这张吉他音板的图片上,这样我就可以制作一个简单的制表程序,与Songster没有什么不同,但非常简单。

以下是当前视图的样子。

吉他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>

下面是一个我希望它看起来像什么的例子。

带格纹

我试图做的是使我的根布局成为相对布局,并将它们放在我想要的地方,但当我将另一个ImageView拖动到我的视图中时,它只是将其放在屏幕外。感谢那些花时间回答问题的人。

首先,不应该要求在ConstraintLayout中嵌套RelativeLayout。您还可能希望您的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被定义为其中一个点的大小。

有几种使用不同布局类型的变体可以使用。CCD_ 14具有仅需要单个根CCD_。但是,使用类似于我的示例的LinearLayout可能更容易概念化和构建布局。

相关内容

  • 没有找到相关文章

最新更新