为什么Android Studio中的设计预览与Android模拟器中呈现的UI之间存在布局差异？

Question

我有几个与布局相关的问题，涉及下面的截图。

我的Android Studio版本在OS X Yosemite上运行。以下是版本详细信息：

以下是Android Studio设计标签中布局的屏幕截图：

以下是Android模拟器中呈现的UI的屏幕截图：

以下是活动布局的实际XML文件：

  

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginTop="15sp"
    android:layout_marginLeft="5sp"
    android:layout_marginRight="5sp">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginRight="5sp">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/company"
            android:gravity="center"
            android:textSize="@dimen/label_font_size" />
        <EditText
            android:id="@+id/company"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginLeft="5sp">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/team"
            android:gravity="center"
            android:textSize="@dimen/label_font_size" />
        <EditText
            android:id="@+id/team"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginTop="20sp"
    android:layout_marginLeft="5sp"
    android:layout_marginRight="5sp">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/web_service"
        android:gravity="center"
        android:textSize="@dimen/label_font_size" />
    <EditText
        android:id="@+id/web_service"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:textStyle="bold"
        android:textSize="@dimen/entry_font_size"
        android:gravity="center"/>
</LinearLayout>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginTop="20sp"
    android:layout_marginLeft="5sp"
    android:layout_marginRight="5sp">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginRight="5sp">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/service_start"
            android:textSize="@dimen/label_font_size"
            android:gravity="center"
            />
        <TimePicker
            android:id="@+id/service_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:timePickerMode="spinner"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginLeft="5sp">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/service_end"
            android:textSize="@dimen/label_font_size"
            android:gravity="center"
            />
        <TimePicker
            android:id="@+id/service_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:timePickerMode="spinner"/>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginTop="20sp"
    android:layout_marginLeft="5sp"
    android:layout_marginRight="5sp">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="@string/subscriber_id"
        android:gravity="center"
        android:textSize="@dimen/label_font_size" />
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:weightSum="100">
        <EditText
            android:id="@+id/subscriber_id_1of4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="45"
            android:inputType="text"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="10"
            android:text="-"
            android:gravity="center"
            android:textSize="@dimen/label_font_size" />
        <EditText
            android:id="@+id/subscriber_id_2of4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="45"
            android:inputType="text"
            android:maxLength="8"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:weightSum="100">
        <EditText
            android:id="@+id/subscriber_id_3of4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="45"
            android:inputType="text"
            android:maxLength="8"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="10"
            android:text="-"
            android:gravity="center"
            android:textSize="@dimen/label_font_size" />
        <EditText
            android:id="@+id/subscriber_id_4of4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_weight="45"
            android:inputType="text"
            android:maxLength="8"
            android:textStyle="bold"
            android:textSize="@dimen/entry_font_size"
            android:gravity="center"/>
    </LinearLayout>
</LinearLayout>

     

问题：

1. 为什么AM / PM微调器出现在TimePicker的模拟器中？
2. 为什么模拟器中的布局比Studio中的“设计”选项卡中的布局更长？
3. 如何在Studio中制作对不同设备的不同屏幕尺寸（即外形尺寸）具有鲁棒性的布局？

Answer 1

两个TimePickers对于我的手机屏幕来说太宽了。看起来设计渲染器（在Studio中）和UI渲染器（在模拟器中）以不同的方式应对超越 - 即，设计选项卡只是截断AM / PM微调器（请参阅我之前的屏幕截图），而模拟器离开完全退出AM / PM微调器，并将剩余内容进一步降低。这种差异解释了渲染输出中出现的差异。

要解决这个问题，我只需将TimePickers替换为激活后面向TimePickerDialog的按钮。现在，渲染的UI在Studio的“模拟器”和“设计”视图中都相同。这是模拟器截图，例如：