Question

我想在两个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

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

编辑：我现在在那里的'layout_alignCenter'不起作用，似乎没有做任何事情（是的，我凭空掏空了）。

Answer 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>

值得注意的是，这假设两个拣选者的绝对中心将成为两个拣选者的视觉中心。我这样说是因为如果有数字选择器（平台或自定义）的设计使垂直中心偏离布局中心，那么你看起来会有问题。

Answer 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>

Answer 3

TextView上的

android：layout_centerVertical =“true”会将“：”放在numberPickers之间的中间位置。

如何将文本视图对齐到两个NumberPickers的中心（垂直）？

3 个答案: