我有一个非常简单的问题。我想将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>
这里是我想要的样子的一个例子。
我试图做的是将我的根布局设置为相对布局,然后将它们放置在我想要的位置,但是当我将另一个ImageView拖动到视图中时,它只是将其放置在屏幕之外。谢谢那些花时间回答的人。
首先,您不需要将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
。但是使用类似于我的示例的LinearLayout
可能更容易概念化和构建布局。