模拟器预览与实际设备不同

Question

我做了一个简单的布局，有一个ImageView 和两个Buttons。

预览中显示的布局如下：

Layout as shown in android studio preview

在运行我为 Lg3（5.5"，1440x2560）创建的模拟器时，我得到了以下结果（就像我设计的一样好）

Emulator result

但是，当我实际将apk下载到真正的Lg3设备时，结果如下：

Actual result

我尝试使用 layout-normal、layout-small、layout-large，但没有任何效果。

.xml 如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/White"
    tools:context=".MainActivity">

<ImageView
    android:id="@+id/main_background"
    android:layout_width="230dp"
    android:layout_height="230dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="115dp"
    android:src="@drawable/main_background" />

<Button
    android:id="@+id/Sign_In"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="160dp"
    android:layout_below="@+id/main_background"
    android:layout_centerInParent="true"
    android:background="@drawable/white_buttons"
    android:fontFamily="@font/assistant"
    android:text="Sign In"
    android:textAllCaps="false"
    android:textColor="@color/Fonts"
    android:textSize="20dp" />

<Button
    android:id="@+id/Sign_Up"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_below="@+id/Sign_In"
    android:layout_centerInParent="true"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:background="@drawable/colored_buttons"
    android:fontFamily="@font/assistant"
    android:text="Sign Up"
    android:textAllCaps="false"
    android:textColor="@color/White"
    android:textSize="20dp" />

</RelativeLayout>

我想知道是不是我做错了什么会在模拟器和真实设备之间产生不相等的结果。

非常感谢

Answer 1

正如 CommonsWare 提到的 - 这可能是因为屏幕密度不同。

我的建议是使用ConstraintLayout 为所有屏幕尺寸开发一种布局。

来自文档：

ConstraintLayout 允许您创建具有平面视图层次结构（无嵌套视图组）的大型复杂布局。它与RelativeLayout 类似，所有视图都根据兄弟视图和父布局之间的关系进行布局，但它比RelativeLayout 更灵活，更易于与Android Studio 的布局编辑器一起使用。

下面是一个使用 ConstraintLayout 的示例，但未在视图中使用固定大小的值：

<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="@null"
  tools:context=".MainActivity">


<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="@+id/button2"
    app:layout_constraintStart_toStartOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintWidth_percent="0.5"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars[14]" />
</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

更多关于ConstraintLayout的信息你也可以guidelines和Chains支持不同的屏幕尺寸。