时间戳

首页 > 解决方案 > 为什么我的 Android Layout Design 在我的智能手机上无法正常工作

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

问题描述

在 Adob​​e 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 中的实际设计

在此处输入图像描述

VS

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

在此处输入图像描述

标签： android-studioandroid-layoutuser-interface

解决方案

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

<?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 和条款和条件链接在水平链中，但您可以使用它的位置；从你的镜头中不清楚，如果按钮应该固定在右边距或哪里。

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

推荐阅读