应用在模拟器和预览中的外观不同

问题描述

我是android开发的新手，并且已经在Android Studio上创建了一个应用程序。当我在设备上使用ADB运行该应用程序时，该应用程序未如我在Android Studio预览中看到的那样显示。

这是我的XMLcode：

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
    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:background="@drawable/bg">

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:background="@layout/radius_for_text"
    android:padding="10dp"
    android:text="@string/app_name"
    android:textColor="#ffff"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintEnd_toStartOf="@+id/imageButton2"
    app:layout_constraintTop_toTopOf="@+id/imageButton2"
    app:srcCompat="@drawable/hello_world" />

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="41dp"
    android:layout_marginEnd="68dp"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView3"
    app:srcCompat="@drawable/pass_gen" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="12dp"
    android:text="@string/password_generator"
    android:textColor="#000"
    android:textSize="12dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/imageButton2"
    app:layout_constraintStart_toStartOf="@+id/imageButton2" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintStart_toStartOf="@+id/imageButton"
    app:layout_constraintTop_toTopOf="@+id/imageButton4"
    app:srcCompat="@drawable/blog" />

<ImageButton
    android:id="@+id/imageButton4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="21dp"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintStart_toStartOf="@+id/imageButton2"
    app:layout_constraintTop_toBottomOf="@+id/imageButton2"
    app:srcCompat="@drawable/website" />

<ImageButton
    android:id="@+id/imageButton5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintStart_toStartOf="@+id/imageButton3"
    app:layout_constraintTop_toTopOf="@+id/imageButton6"
    app:srcCompat="@drawable/creators" />

<ImageButton
    android:id="@+id/imageButton6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="22dp"
    android:background="@layout/first_btn"
    android:padding="30dp"
    app:layout_constraintStart_toStartOf="@+id/imageButton4"
    app:layout_constraintTop_toBottomOf="@+id/imageButton4"
    app:srcCompat="@drawable/ic_email_black_24dp" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="9dp"
    android:layout_marginBottom="9dp"
    android:text="@string/hello_t"
    android:textColor="#000000"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/imageButton"
    app:layout_constraintEnd_toEndOf="@+id/imageButton" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="17dp"
    android:layout_marginBottom="10dp"
    android:text="Blog - News"
    android:textColor="#000"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/imageButton3"
    app:layout_constraintEnd_toEndOf="@+id/imageButton3" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="10dp"
    android:text="Visit Website"
    android:textColor="#000"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/imageButton4"
    app:layout_constraintEnd_toEndOf="@+id/imageButton4" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="11dp"
    android:layout_marginBottom="11dp"
    android:text="Creators Team"
    android:textColor="#000"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/imageButton5"
    app:layout_constraintStart_toStartOf="@+id/imageButton5" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginBottom="11dp"
        android:text="Contact Us"
        android:textColor="#000"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/imageButton6"
        app:layout_constraintStart_toStartOf="@+id/imageButton6" />
    </androidx.constraintlayout.widget.ConstraintLayout>

我的设备的照片：

the photo of my device

android studio设计预览照片：

android studio image

编辑：谢谢您的回答，我已解决??

解决方法

在仿真器上，渐变通常看起来很糟糕，因此它不会打扰您。
您的布局“未居中”，因为您对边距等进行了硬编码。要使其居中，可以使用例如链条。这是一个简单的示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="30dp"
        app:layout_constraintEnd_toStartOf="@+id/imageButton2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_background" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageButton"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_background" />

</androidx.constraintlayout.widget.ConstraintLayout>

非常短的视频How to create chains

结果（仿真器|预览）：

每个设备都有不同的DPI。在您的预览上看起来可能不错，但是如果您的AVD的分辨率为320dpi（xhdpi）960dp x 600dp，则看起来也会很恐怖。 P.s.分辨率和屏幕密度不同。如果您有物理设备，请在游戏商店中下载DevCheck，以了解您的屏幕密度。

android android android-layout java java preview preview