java - 当我在手机上运行该应用程序时，我的元素全乱了

Question

当我在 android studio 中设计应用程序时，一切都在它所属的地方。为什么我在手机上看的时候一切都是乱七八糟的？

Studio

On phone

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

Activity 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应用程序时需要考虑不同屏幕尺寸的数量。

不同的手机有不同的屏幕尺寸，在您的布局中，您在 View 上使用固定尺寸(例如固定尺寸为 50dp)，结果可能是在一个屏幕(您的 Android Studio 预览屏幕)上看起来不错，但在另一屏幕(您的实际手机)上看起来不太好。

<小时/>

那么如何才能支持不同的屏幕尺寸呢？

• 您可以通过为每种屏幕尺寸创建单一布局来解决此问题，但这需要大量工作。

• 您还可以定义Relative Layout与 android:weightSum 和 layout_weight

<小时/>

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

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

来自documentation :

The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.

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

<?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 非常快。

• 约束布局旨在支持不同的屏幕尺寸，因此无需为每个屏幕尺寸构建布局(这也与之前的优势相关——节省开发时间)。

很高兴编码，我希望我能帮助回答。