Question

我制作了一个简单的布局，其中包含一个ImageView和两个Buttons。

预览中显示的布局如下：

Layout as shown in android studio preview

在运行为Lg3（5.5“，1440x2560）创建的仿真器的地方，得到以下结果（与我设计的一样好）

Emulator result

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

Actual result

我尝试使用常规布局，小型布局，大型布局，但均无济于事。

.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

如 CommonWare 所述-可能是因为屏幕密度不同。

我建议您使用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支持不同的屏幕尺寸。

Answer 2

我也只想在OP中添加一个随机事实，以补充Tamir Abutbul和CommonsWare所说的内容：通常，在android中，作为一般设计实践（并非总是，但在大多数情况下），间距布局和组件中的像素以8的倍数（如果很小的话，则为4）完成。

因此，在设计布局时，请考虑以下因素：https://material.io/design/layout/spacing-methods.html#touch-targets基于间距的值是多少，以及它们是否是8（或4）的倍数：，这可以很好地说明您根据设计准则应在不同的组件和设计中使用的一些值

Answer 3

当您错误地或从现有样式创建样式时，通常会出现此问题。因此，选择“图形布局” ，然后选择“ AppTheme”-> 具有蓝星的标签。并选择任何预定义的样式。就我而言，“ Light”应该可以解决问题。我认为您使用的是约束布局，这是android studio中新的默认布局。您必须在每个项目上设置约束，并且仅将项目放在屏幕上就行不通了。 您应该替换

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> </style>

作者：

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar"> </style>

在文件 base/src/main/res/values/styles.xml

中

在Android Studio默认生成的文件中，可能存在错误。较早

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

3 个答案: