为什么 Android Studio 预览版中的 Activity 外观与设备上的不同？

Question

我创建了一个导航抽屉活动，发现它的内容页面在预览中看起来不同。

This is the preview.

And this is the AVD appearance (it looks like a real device too).

XML 代码是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.xy.xy.HomePage">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="5sp">

    <ImageView
        android:id="@+id/TestMenuImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/bg1"
        tools:scaleType="centerCrop" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        tools:background="@color/hbm_text_background">

    <TextView
        android:id="@+id/TestMenuName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:contentDescription="@string/app_name"
        android:text="@string/test"
        android:textColor="@color/white" />

    </RelativeLayout>

    <Button
        android:id="@+id/TestMenuButton"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

你认为问题出在哪里？

Answer 1

尝试像这样在 ImageView 中添加android:scaleType="fitXY"：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.xy.xy.HomePage">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="5sp">

    <ImageView
        android:id="@+id/TestMenuImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/bg1"
        android:scaleType="fitXY"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        tools:background="@color/hbm_text_background">

    <TextView
        android:id="@+id/TestMenuName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:contentDescription="@string/app_name"
        android:text="@string/test"
        android:textColor="@color/white" />

    </RelativeLayout>

    <Button
        android:id="@+id/TestMenuButton"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

这可能是 Android Studio 中 ImageViews 预览的一个小错误，

希望对你有帮助

Answer 2

编辑：我看到您已包含样式文件，并且您的应用运行的样式（AppTheme）确实与您的预览相同，因此我认为我们可以排除这是罪魁祸首。

我怀疑这会有所不同，但我注意到您的预览版正在运行 api 27，而您的设备正在运行 api 27。

尝试删除 tools:context="com.xy.xy.HomePage" 看看有没有什么不同。

---

预览只能显示当前视图。它不知道父视图。 子视图可能有一个限制子视图大小的父视图。假设您的图像设置为 width="match_parent"。在这种情况下，预览可能会扩展图像以填充整个宽度，但在运行时，您的图像可能会放置在宽度为“100dp”的父级中，这将导致图像的宽度仅为 100dp。父视图的内边距和边距也会导致问题。

如果这不是问题，则可能是样式问题。我必须查看更多您的主题和样式设置才能确定。您的预览可能会向您显示与您在运行时实际使用的样式/主题不同的样式/主题。