為什么 Activity 在 Android Studio 預覽中的外觀與設備上的不同？

Question

我創建了一個導航抽屜活動，發現它的內容頁面在預覽中看起來不同。

這是預覽。

這是 AVD 的外觀（它看起來也像一個真正的設備）。

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" ，看看它是否tools:context="com.xy.xy.HomePage" 。

---

預覽只能向您顯示當前視圖。 它不知道父視圖。 子視圖可能具有限制子視圖大小的父視圖 。 假設您的圖片設置為width =“ match_parent”。 在這種情況下，預覽可以擴展圖像以填滿整個寬度，但是在運行時，您可以將圖像放置在寬度為“ 100dp”的父級內部，這將導致圖像的寬度僅為100dp。 父視圖的填充和邊距也會引起問題。

如果這不是問題，那么可能是樣式問題。 為了確定，我必須查看更多的主題和樣式設置。 您的預覽可能會向您顯示與您在運行時實際使用的樣式/主題不同的樣式/主題。

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預覽的一個小錯誤，

希望能幫助到你

Answer 3

“ styles.xml”文件：

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">@android:color/background_light</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

“ AndroidManifest.xml”文件：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.xy.xy">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".HomePage"
        android:label="@string/title_activity_home_page"
        android:parentActivityName=".MainActivity"
        android:theme="@style/AppTheme">
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.wordwave.wordwave.MainActivity" />
    </activity>
</application>

</manifest>

“ MainActivity.kt”文件：

package com.xy.xy

import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.content_home_page)

}