Question

我试图绘制如下图所示的图表。然而，我目前遇到的主要问题是尝试将数字和红色方块放在顶部。仅在XML中实现此目的的最有效方法是什么？下面是我的XML，我已经成功创建了除数字和红色方块之外的所有内容。此外，代码下面的图像是我现在看起来的样子。

diagram

我的XML

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <View
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
    <View
        android:id="@+id/c1"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator0"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c2"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator1"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c3"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator2"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c4"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/end_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
</LinearLayout>

my diagram

Answer 1

您可以制作多个布局而不仅仅是视图，并在那里插入数字。像这样：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <RelativeLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="number1"
           android:centerInParent="true"/>
    </RelativeLayout>
    <LinearLayout>
    <LinearLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central"
        android:alignParentTop="true" />
        <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="R.drawable.red_square"
           />
  <LinearLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central"
        android:alignParentBottom="true" />
        <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="R.drawable.red_square"
           />
    </LinearLayout>

</RelativeLayout>

我在三个布局中只放了一个元素，你应该根据你的图像添加更多元素。希望这有帮助

多个布局相互叠加

1 个答案: