Question

当我在android studio中设计应用程序时，所有内容都归其所有。为什么当我在手机上查看时，一切都混乱了？

我使用约束布局。我尝试将API版本更改为较旧的版本，但没有任何反应。它与分辨率有关吗？我无法在手机上使用需要的模拟器。

活动XML代码：

<?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=".MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="393dp"
    android:layout_height="76dp"
    android:layout_marginEnd="16dp"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


<Button
    android:id="@+id/button8"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="348dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button9"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="412dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view9"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="184dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view8"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="480dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view4"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="408dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view6"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="260dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view7"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="336dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view5"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="104dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView30"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="448dp"
    android:layout_marginEnd="244dp"
    android:layout_marginRight="244dp"
    android:text="@string/inbox_text6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView29"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="156dp"
    android:layout_marginEnd="188dp"
    android:layout_marginRight="188dp"
    android:text="@string/inbox_text2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView28"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="376dp"
    android:layout_marginEnd="244dp"
    android:layout_marginRight="244dp"
    android:text="@string/inbox_text5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView22"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="352dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title5"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView23"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="416dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title6"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />


<TextView
    android:id="@+id/textView18"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="272dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title4"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView19"
    android:layout_width="173dp"
    android:layout_height="34dp"
    android:layout_marginTop="120dp"
    android:layout_marginEnd="228dp"
    android:layout_marginRight="228dp"
    android:text="@string/inbox_title2"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView20"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="208dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title3"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView21"
    android:layout_width="137dp"
    android:layout_height="30dp"
    android:layout_marginTop="48dp"
    android:layout_marginEnd="264dp"
    android:layout_marginRight="264dp"
    android:text="@string/inbox_title1"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView24"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="300dp"
    android:layout_marginEnd="256dp"
    android:layout_marginRight="256dp"
    android:text="@string/inbox_text4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView27"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="232dp"
    android:layout_marginEnd="260dp"
    android:layout_marginRight="260dp"
    android:text="@string/inbox_text3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView26"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="80dp"
    android:layout_marginEnd="216dp"
    android:layout_marginRight="216dp"
    android:text="@string/inbox_text1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button5"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="196dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button6"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="268dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:weightSum="4">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Search" />

        <Button
            android:layout_width="52dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Refresh" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="goToAnActivity"
            android:text="Send" />
    </LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Answer 1

在Android中，开发Android应用程序时需要考虑不同屏幕尺寸的数量。

不同的手机具有不同的屏幕尺寸，在您的布局中，您使用的是固定尺寸的视图（例如，固定尺寸为50dp），结果是看起来效果不错一个屏幕（您的android studio预览屏幕），但在另一个屏幕（您的实际手机）上看起来效果不佳。

那您该怎么做才能支持不同的屏幕尺寸？

您可以通过为每种屏幕尺寸创建一个布局来解决此问题，但这需要大量工作。
您还可以使用android:weightSum和layout_weight

Relative Layout

但是还有一个更好的选择：

使用ConstraintLayout和guidelines和Chains支持不同的屏幕尺寸。

来自documentation：

为不同屏幕尺寸创建响应式布局的最佳方法是使用ConstraintLayout作为UI中的基本布局。 ConstraintLayout允许您根据与布局中其他视图的空间关系为每个视图指定位置和大小。这样，所有视图都可以随着屏幕尺寸的变化而一起移动和伸展。

这是您想要实现的类似布局的示例：

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

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="62dp"
    android:layout_height="19dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView9"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView10"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView11"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView9" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView12"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

<TextView
    android:id="@+id/textView12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView11" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView14"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView12" />

<TextView
    android:id="@+id/textView14"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView15"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView13" />

<TextView
    android:id="@+id/textView15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView16"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView14" />

<TextView
    android:id="@+id/textView16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView18"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView15" />

<TextView
    android:id="@+id/textView17"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView18" />

<TextView
    android:id="@+id/textView18"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView17"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView16" />

<android.support.constraint.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.1" />

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="search"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button10"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline6" />

<Button
    android:id="@+id/button10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="rfreshe"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button11"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button9"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="send"
    app:layout_constraintBottom_toBottomOf="@+id/button10"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button10"
    app:layout_constraintTop_toTopOf="@+id/button10" />

<Button
    android:id="@+id/button12"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView17"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textView18" />

<Button
    android:id="@+id/button13"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView16"
    app:layout_constraintEnd_toEndOf="@+id/button12"
    app:layout_constraintTop_toTopOf="@+id/textView15" />

<Button
    android:id="@+id/button14"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView14"
    app:layout_constraintEnd_toEndOf="@+id/button12"
    app:layout_constraintTop_toTopOf="@+id/textView13" />

<Button
    android:id="@+id/button15"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView12"
    app:layout_constraintEnd_toEndOf="@+id/button14"
    app:layout_constraintTop_toBottomOf="@+id/textView11" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView18"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView16" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView11"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView12" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginTop="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView15"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView14" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

<Button
    android:id="@+id/button8"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

<Button
    android:id="@+id/button16"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

</android.support.constraint.ConstraintLayout>

结果将在预览中和实际设备上如下所示：

如果您幸免于难地读了很长的答案（我知道，答案很长，谁会读完所有这些内容？）

这是多余的东西

现在，我知道乍一看可能看起来很像大量工作，有些人可能想知道这是否真的值得努力，但这就是为什么我相信ConstraintLayout是构建的正确方法您的用户界面：

这真的很用户友好。
ConstraintLayout非常简单易学。
一旦您了解了它，就会发现您节省了大量的开发时间，因为使您的UI变得非常快。
约束布局旨在支持不同的屏幕尺寸，因此无需为每个屏幕尺寸都构建一个布局（这也与以前的优势节省了开发时间）。

编码愉快，我希望我能为我的答案提供帮助。

Answer 2

您需要使用ConstraintLayout，也可以为每种屏幕尺寸创建xml文件

否则，请在Android Studio中>“预览”选择设备屏幕尺寸，然后再次重新设计xml以适合屏幕

当我在手机上运行应用程序时，我的物品都被弄乱了

2 个答案:

这是多余的东西