时间戳

首页 > 解决方案 > 为什么实际设备上的设计视图布局如此不同？

android - 为什么实际设备上的设计视图布局如此不同？

问题描述

我正在使用相对布局，并且很困惑为什么布局如此不同：EditText 非常靠近第二个微调器，第二个微调器向左一点，没有与它上面的那个对齐，即使它们都有相同的marginStart；此外，按钮应水平居中。

我已经读到实际的手机屏幕可能与我在 Android Studio 中看到的视图不同，但这对这两个微调器相同的 marginStart 有何影响？！是我做错了什么吗？（我是使用 Android Studio 开发的初学者）。这是我的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"
    tools:context=".QuizzesFragment">


    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="225dp"
        android:entries="@array/courses_array" />

    <Spinner
        android:id="@+id/fragquizzes_spn_departments"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="123dp"
        android:entries="@array/depts_array" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="-90dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="137dp"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="250dp"
        android:layout_height="64dp"
        android:layout_alignBottom="@+id/fragquizzes_spn_courses"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="162dp"
        android:ems="10"
        android:inputType="text"
        android:hint="quiz name"/>

</RelativeLayout>

我想在手机上获得相同的视图或至少类似的视图？这些是屏幕截图：

![设计视图] https://imgur.com/a/bGBm4YW

![实际设备] https://imgur.com/a/9KaghT4

标签： androidxmlandroid-layout

解决方案

您的布局没有响应的原因是您在视图（android:layout_width="286dp"和 android:layout_height="85dp" for example）上使用了固定大小。

dp因为如果您在布局中使用固定尺寸，不同的手机会有不同的屏幕尺寸，可能在一台设备上看起来不错，但在具有不同屏幕尺寸的其他设备上看起来不太好。

“这对这两个微调器相同的 marginStart 有何影响” -再次-您使用固定尺寸，因此它不会响应所有屏幕尺寸。

如果您希望您的布局能够响应所有屏幕，要么不使用固定大小/使用固定大小，而是为每个屏幕大小创建 1 个布局，或者我认为最简单的解决方案 - 使用ConstraintLayout，它非常易于使用，超级快速地创建您的布局，它将响应所有屏幕尺寸。

这是一个使用 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">

    <Spinner
        android:id="@+id/some"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="@+id/spinner2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/spinner2"
        app:layout_constraintTop_toBottomOf="@+id/spinner2" />

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/some"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        tools:text="button" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        app:layout_constraintVertical_chainStyle="spread" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />


</androidx.constraintlayout.widget.ConstraintLayout>

推荐阅读