为什么我在手机上正确地看到我的布局，但在 Android Studio 上却看错了？答案

【问题标题】：Why I see correctly my layout on my phone but on Android Studio I see it wrong?为什么我在手机上正确地看到我的布局，但在 Android Studio 上却看错了？
【发布时间】：2017-09-13 00:51:10
【问题描述】：

我有一个带有六个按钮的表格布局。我尝试了两种配置：

第一个配置：我在 Android Studio 上看到所有按钮的屏幕边框之间的距离相同，但在我的手机中，我看到所有按钮都转到左边框并且按钮与屏幕之间的所有距离都打开了右屏幕边框。

第二个配置：我在 TableLayout 属性上使用 paddingLeft，现在我看到距离几乎相同，但根本不一样。在Android Studio上我看错了，左边的距离要大很多。

我把我的代码和屏幕截图：

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.prodintec.am_motion.QuizActivity">

<TableLayout
    android:layout_width="368dp"
    android:layout_height="495dp"
    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:id="@+id/HeaderTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="FOUR OPTIONS QUESTION" />

    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/answer1"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 1" />

        <Button
            android:id="@+id/answer2"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 2" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/answer3"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 3" />

        <Button
            android:id="@+id/answer4"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 4" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:paddingTop="20dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:id="@+id/HeaderTextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TWO OPTIONS QUESTION" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/answer5"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 1" />

        <Button
            android:id="@+id/answer6"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 2" />
    </TableRow>
</TableLayout>

Android Studio 的屏幕截图：

模拟器画面：

我认为第二个配置是错误的，我无法正确使用“paddingLeft="20dp"，但我不知道如何将按钮与边框之间的距离与按钮之间的距离相同左右边框。谁能帮帮我？谢谢！

使用新布局进行编辑：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.prodintec.am_motion.QuizActivity">

<TableLayout
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:paddingTop="20dp"
    android:paddingEnd="10dp"
    android:paddingStart="10dp">

    <TableRow
        android:padding="2dp"
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/HeaderTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="FOUR OPTIONS QUESTION" />

    </TableRow>
    <TableRow
        android:padding="2dp"
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/answer1"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 1" />

        <Button
            android:id="@+id/answer2"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 2" />
    </TableRow>
    <TableRow
        android:padding="2dp"
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/answer3"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 3" />

        <Button
            android:id="@+id/answer4"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 4" />
    </TableRow>

    <TableRow
        android:padding="2dp"
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/HeaderTextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TWO OPTIONS QUESTION" />
    </TableRow>

    <TableRow
        android:padding="2dp"
        android:id="@+id/tableRow5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/answer5"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 1" />

        <Button
            android:id="@+id/answer6"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/primary"
            android:textColor="@color/accent"
            android:textSize="20dp"
            android:text="ANSWER 2" />
    </TableRow>
</TableLayout>

【问题讨论】：

标签： android android-studio layout screen

【解决方案1】：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TableLayout
        android:layout_width="368dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:paddingEnd="20dp"
        android:paddingStart="20dp"
        android:paddingTop="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:layout_constraintBottom_creator="1"
        tools:layout_constraintTop_creator="1">

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <TextView
                android:id="@+id/HeaderTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="FOUR OPTIONS QUESTION" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/answer1"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 1"
                android:textColor="@color/colorAccent"
                android:textSize="20dp" />

            <Button
                android:id="@+id/answer2"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 2"
                android:textColor="@color/colorAccent"
                android:textSize="20dp" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/answer3"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 3"
                android:textColor="@color/colorPrimary"
                android:textSize="20dp" />

            <Button
                android:id="@+id/answer4"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 4"
                android:textColor="@color/colorAccent"
                android:textSize="20dp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:paddingTop="20dp">

            <TextView
                android:id="@+id/HeaderTextView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TWO OPTIONS QUESTION" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/answer5"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 1"
                android:textColor="@color/colorAccent"
                android:textSize="20dp" />

            <Button
                android:id="@+id/answer6"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginBottom="2dp"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="ANSWER 2"
                android:textColor="@color/colorAccent"
                android:textSize="20dp" />
        </TableRow>
    </TableLayout>
</android.support.constraint.ConstraintLayout>

【讨论】：

我试了一下，我在 Android Studio 上看到它很完美，但在模拟器上我看错了，按钮在左边框上是正确的，但在右边框上它们太近了，与在左边框中。
在 tablelrow 中包含填充
现在我可以看得更清楚了，但按钮和边框之间的距离仍然不一样。有什么想法吗？
@imrik 你能得到答案吗
我在问题的编辑部分分享它

【解决方案2】：

现在检查更新屏幕共享我的工作

【讨论】：

【解决方案3】：

我修好了！

我将 TableLayout 放在 RelativeLayout 上，一切正常。

【讨论】：