java - 为什么我的 ImageView 上的前景没有在背景上正确居中？

Question

我目前正在创建音乐应用程序，并且在 Activity 中绘制五线谱时遇到了问题。这是没有五线谱的 Activity 的样子:

以下是其中一项 Activity 的代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout      xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@color/colorBackground"
tools:context="aphitech.musicappproject.MainActivity">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:clickable="false">
            <ImageView
                android:id="@+id/LowAb"
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:src="@drawable/rectangle"
                />

        </RelativeLayout>
        <ImageView
            android:id="@+id/spacer"
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <ImageView
            android:id="@+id/LowA"
            android:foreground="@drawable/stavelines"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/rectangle"
            android:paddingBottom="20dp"
            android:foregroundGravity="top" />
        <ImageView
            android:id="@+id/spacer1"
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <ImageView
            android:id="@+id/RegAb"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/rectangle"
            android:paddingBottom="20dp"/>
        <ImageView
            android:id="@+id/spacer2"
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <ImageView
            android:id="@+id/RegA"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/rectangle"
            android:paddingBottom="20dp"/>
        <ImageView
            android:id="@+id/spacer3"
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <ImageView
            android:id="@+id/HighAb"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/rectangle"
            android:paddingBottom="20dp"/>
        <ImageView
            android:id="@+id/spacer4"
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <ImageView
            android:id="@+id/HighA"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/rectangle"
            android:paddingBottom="20dp"/>



    </LinearLayout>

</ScrollView>


</RelativeLayout>

我制作了一个可绘制的五线谱，我试图将其放在每个 ImageView 的顶部，因为我想在其上动态绘制每个音符。这是一张图片:

这也是代码:

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="2dp" android:color="#000000"/>
        <size android:height="20dp" />
        <padding android:bottom="20dp"/>
    </shape>
</item>

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="2dp" android:color="#000000"/>
        <size android:height="20dp" />
        <padding android:bottom="20dp"/>
    </shape>
</item>

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="2dp" android:color="#000000"/>
        <size android:height="20dp" />
        <padding android:bottom="20dp"/>
    </shape>
</item>

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="2dp" android:color="#000000"/>
        <size android:height="20dp" />
        <padding android:bottom="20dp"/>
    </shape>
</item>

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="2dp" android:color="#000000"/>
        <size android:height="20dp" />
    </shape>
</item>

这是所有东西组合在一起的样子:

我想让五线谱直接位于每个矩形的中心，但它总是太高或太低，具体取决于我在其上放置的填充。我假设问题出在五线谱本身的创建上。

Answer 1

我个人会选择表格布局，将根布局背景设置为黑色，进行表格布局，然后添加边距和背景为白色的行。使用权重总和，将所有行设置为相等，并根据屏幕调整大小。考虑到您将动态添加注释，我会将每一行作为一个单独的元素引入，这样您就可以调用每个行 ID。我添加了我刚刚快速编写的代码。

表格布局

<TableLayout
    android:weightSum="5"
    android:stretchColumns="*"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

行示例

    <TableRow
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:background="@color/lightCream"
        android:layout_margin="10dp"
        android:weightSum="5">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blackline"
            android:id="@+id/line1"
            android:contentDescription="@string/line" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blackline"
            android:id="@+id/line2"
            android:contentDescription="@string/line" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blackline"
            android:contentDescription="@string/line"
            android:id="@+id/line3" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:contentDescription="@string/line"
            android:background="@drawable/blackline"
            android:id="@+id/line4" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:contentDescription="@string/line"
            android:background="@drawable/blackline"
            android:id="@+id/line5" />
        </LinearLayout>
    </TableRow>

screen shot music.png

我用顶部和底部填充的油漆绘制了每条线，并且背景与该行的背景(白色)相匹配。左侧或右侧没有填充 Example

进行权重求和将平均分割行大小，具有垂直方向的线性布局允许您对每行应用权重总和，因此它们也被平均分割，并且应该适应屏幕尺寸的变化。

但我强烈建议以编程方式对布局进行编程，而不是使用 xml，因为行数单一，应用 Java 编程技术将使其使用起来更加灵活，并为您提供更清晰的代码。