在RelativeLayout中将一个View的顶部与另一个View的底部对齐

Question

如何将一个View的顶部对齐到另一个View的底部呢？我需要将两个视图堆叠在一起。通过简单的android:layout_below="id_of_the_top_view"，我可以实现正确的垂直位置，但我无法使View水平对齐。我想要类似于android:layout_alignTopToBottomOf="id_of_the_top_view"这样的东西，或者总的来说，让我将一个View的中心（水平或垂直）与另一个View的中心对齐。

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<!-- center picker @ minutes -->
<NumberPicker
    android:id="@+id/npicker_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

<!-- left picker @ hours -->
<NumberPicker
    android:id="@+id/npicker_hours"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@id/npicker_minutes" />

<!-- right picker @ seconds -->
<NumberPicker
    android:id="@+id/npicker_seconds"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/npicker_minutes" />

<TextView
    android:id="@+id/tv_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/npicker_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/minutes_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/npicker_hours"
    android:layout_toLeftOf="@id/tv_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/hours_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/npicker_seconds"
    android:layout_toRightOf="@id/tv_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/seconds_short" />

</RelativeLayout>

我所得到的是这个： 我需要实现的是三个 TextView（“hh”，“mm”和“ss”）每个都放在一个数字选择器下面，TextView 的水平中心与 NumberPicker 的水平中心对齐。

- whatyouhide

---

请发布您的XML并使用它详细说明您想要实现什么。 - Karan_Rana

很抱歉，我编辑了我的问题并提供了尽可能多的信息。谢谢。 - whatyouhide

Answer 1

您需要将这些行添加到您的TextView中：

android:layout_alignLeft="@id/npicker_minutes"
android:layout_alignRight="@id/npicker_minutes"
android:gravity="center_horizontal"

您的完整代码示例：

<!-- center picker @ minutes -->

<NumberPicker
    android:id="@+id/npicker_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" />

<!-- left picker @ hours -->

<NumberPicker
    android:id="@+id/npicker_hours"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@id/npicker_minutes" />

<!-- right picker @ seconds -->

<NumberPicker
    android:id="@+id/npicker_seconds"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/npicker_minutes" />

<TextView
    android:id="@+id/tv_minutes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/npicker_minutes"
    android:layout_alignRight="@id/npicker_minutes"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_minutes"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/minutes_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/npicker_hours"
    android:layout_alignRight="@+id/npicker_hours"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_hours"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/hours_short" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/npicker_seconds"
    android:layout_alignRight="@id/npicker_seconds"
    android:gravity="center_horizontal"
    android:layout_below="@id/npicker_seconds"
    android:layout_marginTop="20dp"
    android:paddingBottom="15dp"
    android:text="@string/seconds_short" />

另一种方法是使用三个LinearLayout，每个里面都有一个NumberPicker和一个TextView。

- gingo

---

完美，这正是我正在寻找的。 - whatyouhide

Answer 2

在我的情况下，我使用android:layout_above。

 <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/layout_bottom"
        >

- gandalivs

Answer 3

你可以使用以下属性来对齐第一个和第三个文本视图：

      android:layout_alignLeft="@+id/your_first_number_picker" //your first text view

 android:layout_alignRight="@+id/your_third_number_picker" //your third text view

- Karan_Rana

---

我尝试过这种方式，但是TextView的水平中心与数字选择器的水平中心不对齐。它们与数字选择器的左右两侧对齐。我知道我可以使用填充和边距，但我想尽可能保持它的可移植性。 - whatyouhide