为什么设计视图中的布局在实际设备上如此不同?

问题描述 投票:1回答:3

我正在使用相对布局,我很困惑为什么布局如此不同: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

android xml android-layout
3个回答
2
投票

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

由于不同的手机屏幕尺寸不同,如果你在dp中使用固定尺寸,你的布局在一台设备上可能看起来不错,但在不同屏幕尺寸的其他设备上看起来不太好。

“这对于这两个微调器的marginStart是如何影响的” - 再次 - 你使用固定大小,因此它不会响应所有屏幕尺寸。

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

下面是使用constraintLayout和一些guidelines来实现所需布局的示例:

<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>

0
投票

请尝试下面的布局文件。让我知道它是否有用。如果您需要有关布局的任何进一步帮助,请随时提出。

<?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">

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

    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:layout_below="@+id/fragquizzes_spn_departments"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="70dp"
        android:entries="@array/courses_array" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_above="@+id/fragquizzes_btn_createQuiz"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="70dp"
        android:layout_marginBottom="30dp"
        android:ems="10"
        android:hint="quiz name"
        android:inputType="text" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

</RelativeLayout>

-2
投票

Plz试试这段代码。在此代码中,我们使用微调器高度和宽度不固定,因此在所有框架中它都适合填充。我们在修复布局上使用LinearLayout设置微调器,编辑文本和按钮。我们使用android:orientation="vertical",因此这个布局中的所有字段都显示在垂直方向上。根据您的选择设置的上部旋转器边距。我在linearlayout中设置左边距和右边距,以便所有字段根据此布局自动调整。我希望根据你的设计布局布局非常有帮助。感谢你..

© www.soinside.com 2019 - 2024. All rights reserved.