在彼此之上的多個佈局

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> 

我已經把一個元素在三種佈局，你應該根據你的形象增添更多..希望這有助於