Question

我目前正在创建音乐应用程序，并且在活动中绘制音乐壁时遇到了问题。这就是没有五线谱的活动：

以下是其中一项活动的代码：

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

我制作了一个可绘制的音乐五线谱，我试图将其放在每个图像视图的顶部，因为我想要动态地绘制每个音符。这是一张照片：

以下是代码：

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

屏幕截图music.png

我在油漆中绘制了每条线条，顶部和底部填充，背面与行的颜色相匹配（白色）。左边或右边没有填充物 Example

执行权重将平均分割行大小，使用垂直轨道的线性布局允许您对每一行应用权重和，以便它们也可以平均分割，并且应该适应屏幕大小的变化。

但是我强烈建议以编程方式编程你的布局，而不是xml，由于奇异的线条，应用java编程技术将使它更灵活，并且会给你更清晰的代码。

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

1 个答案: