如何将文本视图对齐在两个 NumberPicker 的中心（垂直）？答案

【问题标题】：How do I align text view to be in center (vertically) of two NumberPickers?如何将文本视图对齐在两个 NumberPicker 的中心（垂直）？
【发布时间】：2014-05-14 14:51:44
【问题描述】：

我想在两个 NumberPickers 之间对齐包含“：”的 TextView，我还希望它位于 NumberPickers 的顶部，这样它就不会将 NumberPickers '推'到一边。目前这是我的包含 NumberPickers 和 TextView 的 LinearLayout 的 XML：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/timer">
    <NumberPicker
        android:id="@+id/numberPicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignCenter="@id/numberPicker1"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView"
        android:text=":" />

    <NumberPicker
        android:id="@+id/numberPicker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

这就是它在我的 IDE 预览中的样子：

我真的希望冒号垂直居中并“超过” NumberPickers，因此它们之间没有空格。任何帮助是极大的赞赏！

编辑：我现在在那里的“layout_alignCenter”不起作用，似乎没有做任何事情（是的，我凭空取出它）。

【问题讨论】：

标签： android xml layout center numberpicker

【解决方案1】：

为了让冒号 (:) 出现在选择器上方 (z-index) 并且不占用空间，布局需要分层。有几种方法可以做到这一点，但最简单的可能是

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/timer">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <NumberPicker
            android:id="@+id/numberPicker1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <NumberPicker
            android:id="@+id/numberPicker2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView"
        android:text=":" />
</FrameLayout>

这里值得注意的是，这假设两个拾取器的绝对中心将是两个拾取器的视觉中心。我这样说是因为如果有一个数字选择器的设计（平台或自定义）使垂直中心偏离布局中心，你就会对它的外观有问题。

【讨论】：

太棒了，谢谢！这会照顾到这一点。知道如何让它“高于” NumberPickers，以免将它们分开吗？
@Dallas 在他的问题中，他询问如何垂直对齐并删除其间的空白。你只回答了他问题的一半。
修改了我的帖子以回答这两个问题。

【解决方案2】：

试试下面的代码。

<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"
tools:context=".Launcher" >

<NumberPicker
    android:id="@+id/numberPicker2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/numberPicker1"
    android:layout_marginBottom="48dp"
    android:layout_toLeftOf="@+id/numberPicker2"
    android:text=":"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<NumberPicker
    android:id="@+id/numberPicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/numberPicker2"
    android:layout_toLeftOf="@+id/textView1" /></RelativeLayout>

【讨论】：

【解决方案3】：

TextView 上的android:layout_centerVertical="true" 会将“:”放在numberPicker 之间的中心。

【讨论】：