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

Question

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

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

编辑：我看到您已经包含了样式文件，而且您的应用确实运行与预览的样式 (AppTheme) 相同，所以我认为我们可以排除它是罪魁祸首.

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

尝试删除 tools:context="com.xy.xy.HomePage" 看看是否有所不同。

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

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

Answer 2

尝试像这样在 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 预览的一个小错误，

希望对您有所帮助

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

Why is the look of the activity different in the Android Studio preview than on the device?

xml

android

device

preview

android-activity