Android Studio:预览和模拟器模式之间的布局差异 [英] Android Studio: Difference in the layout between Preview and Simulator mode

问题描述

我只是进入Android应用程序开发领域的新手，最近创建了我的第一个计算器应用程序.当我在模拟器上运行该应用程序时，我看到一个问题，即预览模式下的布局与模拟器模式下的布局之间存在差异，如下所示:

I am just new diving into Android app development world and created recently my first calculator app. When I run the app on the simulator, I saw a problem that there is a difference between the layout in the Preview mode and the one in the Simulator mode, as you can see below:

这是我的 content_main.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context="com.example.sonduong.calculator.MainActivity">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="of"
        android:textSize="24sp"
        tools:layout_editor_absoluteX="181dp"
        tools:layout_editor_absoluteY="255dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="%"
        android:textSize="24sp"
        tools:layout_editor_absoluteX="300dp"
        tools:layout_editor_absoluteY="207dp" />

    <EditText
        android:id="@+id/numberTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter Number"
        android:inputType="numberDecimal"
        android:textAlignment="center"
        tools:layout_editor_absoluteX="85dp"
        tools:layout_editor_absoluteY="296dp" />

    <TextView
        android:id="@+id/totalTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="0"
        android:textAlignment="center"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.101" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="What is"
        android:textSize="24sp"
        tools:layout_editor_absoluteX="152dp"
        tools:layout_editor_absoluteY="129dp" />

    <EditText
        android:id="@+id/percentageTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter Percentage"
        android:inputType="numberDecimal"
        android:textAlignment="center"
        tools:layout_editor_absoluteX="85dp"
        tools:layout_editor_absoluteY="193dp" />

    <Button
        android:id="@+id/calcBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CALCULATE"
        tools:layout_editor_absoluteX="147dp"
        tools:layout_editor_absoluteY="374dp" />

</android.support.constraint.ConstraintLayout>

但是在这个xml文件中，我也遇到了一些错误，它们看起来像:

However in this xml file I also got some errors and they look like:

任何人都可以帮助我如何调整预览和模拟器之间的视图.谢谢！

Can anyone help me how can I adjust to have the same view between Preview and Simulator. Thank you!

推荐答案

根据您的需要进行调整.

Adjust According to your needs.

用此 XML

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

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="of"
    android:textSize="24sp"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.501"
    android:layout_marginBottom="92dp"
    app:layout_constraintBottom_toTopOf="@+id/numberTxt" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="%"
    android:textSize="24sp"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBaseline_toBaselineOf="@+id/percentageTxt"
    android:id="@+id/textView2" />

<EditText
    android:id="@+id/numberTxt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Enter Number"
    android:inputType="numberDecimal"
    android:textAlignment="center"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.505"
    android:layout_marginBottom="0dp"
    app:layout_constraintBottom_toTopOf="@+id/calcBtn" />

<TextView
    android:id="@+id/totalTextView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="0"
    android:textAlignment="center"
    android:textSize="36sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    android:layout_marginTop="8dp" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="What is"
    android:textSize="24sp"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/totalTextView"
    app:layout_constraintHorizontal_bias="0.502" />

<EditText
    android:id="@+id/percentageTxt"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Enter Percentage"
    android:inputType="numberDecimal"
    android:textAlignment="center"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/textView2"
    android:layout_marginRight="8dp"
    app:layout_constraintHorizontal_bias="0.0"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/textView3"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/calcBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="CALCULATE"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="9dp"
    app:layout_constraintHorizontal_bias="0.502" />

这篇关于Android Studio:预览和模拟器模式之间的布局差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！