为什么我的 Android Layout Design 在我的智能手机上无法正常工作答案

【问题标题】：Why my Android Layout Design is not working properly on my smartphone为什么我的 Android Layout Design 在我的智能手机上无法正常工作
【发布时间】：2019-12-30 14:44:01
【问题描述】：

在 Adobe XD 中制作完所有艺术作品后，我在 Android Studio 中设计了一个布局。主要问题是它在我的 Android Studio 预览菜单中看起来很完美，但是一旦我在智能手机甚至虚拟设备上运行我的项目，原始设计就会变形或无法完全显示在屏幕上。为什么会这样？

我已经按照文档中的说明使用了所有内容。我的意思是，我使用“sp”作为文本。适当的边距和对齐等。

我的 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:background="@android:color/white">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="365dp"
        android:layout_height="225dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="36dp"
        android:layout_marginEnd="8dp"
        android:src="@drawable/pics"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="325dp"
        android:layout_height="152dp"
        android:layout_marginStart="33dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="34dp"
        android:fontFamily="@font/ebrima"
        android:text="Investigate comedy scenes for clues,
        bring the suspects in for questioning
        and analyze evidence to catch the
        killers. Are you ready to prove your
        detective skills?"
        android:textColor="#000000"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="34dp"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="162dp"
        android:fontFamily="@font/stencil"
        android:text="CARTOON CRATE"
        android:textColor="#000000"
        android:textSize="25sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.526"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/button"
        android:layout_width="108dp"
        android:layout_height="43dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/btnshape"
        android:text="Let's Go!"
        android:textColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.878"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.153" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="36dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:fontFamily="@font/typo_round"
        android:text="Terms and Conditions"
        android:textColor="#EBC500"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.106" /></android.support.constraint.ConstraintLayout>

你可以看到

Android Studio Preview 中的实际设计呈现什么

布局设计在我的智能手机设备上的显示效果。

【问题讨论】：

您好 Haseeb，欢迎来到 SO。关于您的布局的一些信息；您正在硬编码大量数字并将所有这些边距和大小添加到小部件；乍一看，这并不总是一个坏主意，但在这种情况下，基于非常少的可见信息，您真正的智能手机的屏幕和密度与模拟器/预览不同。这意味着布局很可能不适合您要求的空间。是的，您使用的是 DP 而不是 PX（很好！），但这并不意味着在不同密度下，可用空间将是相同的（纵横比也不相同）。

标签： android-studio android-layout user-interface

【解决方案1】：

为了帮助您更好地掌握约束布局，我继续以一种更好、更少硬编码的方式进行了相同（相似）的布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp">

    <ImageView
            android:id="@+id/header_image"
            android:layout_width="0dp"
            android:layout_height="225dp"
            android:background="@android:color/holo_red_dark"
            android:contentDescription="@null"
            app:layout_constraintBottom_toTopOf="@+id/title_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="cartoon crate"
            android:textAllCaps="true"
            android:textSize="25sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/header_image" />

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/body_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/title_text" />

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/terms_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Terms and Conditions"
            android:textColor="#FFC107"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/go_button"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/body_text" />

    <com.google.android.material.button.MaterialButton
            android:id="@+id/go_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@android:color/black"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Let\'s go!"
            android:textColor="@android:color/white"
            app:layout_constraintBaseline_toBaselineOf="@id/terms_button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/terms_button" />

</androidx.constraintlayout.widget.ConstraintLayout>

当然，这只是一个示例，您还需要考虑很多其他事情。请注意，唯一的硬编码值实际上是图像高度（如果我有您的原始图像则不需要，您应该使用 aspectRatio ），然后是填充/边距以使其看起来更好。（无论如何，这些都可能在 dimens.xml 中）。

希望这能给你一个更好的主意。

Let's go 和条款与条件链接位于水平链中，但您可以使用它的位置；从你的镜头中不清楚，如果按钮应该固定在右边距或哪里。

最后，如果有足够的像素，东西应该适合大多数设备。

【讨论】：