在彼此之上的多个布局

Question

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

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

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> 

我已经把一个元素在三种布局，你应该根据你的形象增添更多..希望这有助于