Question

在用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预览中显示的内容

VS

布局设计在智能手机设备上显示的内容。

Answer 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中。）

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

“让我们去吧，条款及条件”链接在水平链中，但是您可以使用它的位置；目前尚不清楚按钮是否应该固定在右边距或位置。

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

为什么我的Android版式设计无法在智能手机上正常运行

1 个答案: