时间戳

首页 > 解决方案 > 我的布局适用于一种屏幕尺寸，如何使其适用于 Android Studio 3.4.2 中的所有屏幕尺寸

android - 我的布局适用于一种屏幕尺寸，如何使其适用于 Android Studio 3.4.2 中的所有屏幕尺寸

问题描述

在此处输入图像描述我已经为数学测验创建了一个布局，其中在第一个屏幕上的网格布局具有加法、减法等选项作为按钮提供。下面是“赚取的硬币”TextView。在应用程序名称中的网格布局上方。

在选择测验类型时，会生成问题。在此屏幕上，应用程序名称位于顶部。在其下方，同一行中有“计时器”“级别”“分数”。在它们下方，有一个 2*2 的答案网格，有 4 个选项。

在答案网格下方，有一个 resultTextView 显示 qn 是对还是错。在其下方有显示该测验的点的文本视图（runTimeTextView）。

计时器结束后，有一个 endResultTextView 提供有关测验的信息，并伴有 playAgainButton。

布局通过我手机上的 USB 调试工作正常，但在较小的屏幕尺寸上失败。我在 Android Studio 上选择了最小的手机。需要有关此版本的 Android Studio 3.4.2 的帮助。

我尝试了三个选项：

  1. 硬编码布局的大小并手动更改其位置

  2. 将约束与附加到视图底部的视图顶部和视图底部连接到父级。

  3. 将视图顶部的约束放置在其上方的视图底部，并将视图的底部约束到其下方的视图顶部。

    <TextView
    android:id="@+id/nameTextView"
    android:layout_width="341dp"
    android:layout_height="70dp"
    android:layout_marginStart="35dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="35dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/allerta_stencil"
    android:text="MathGames[enter image description here][1]"
    android:textAlignment="center"
    android:textColor="#FF6D00"
    android:textSize="40sp"
    app:layout_constraintBottom_toTopOf="@+id/levelTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/levelTextView"
    android:layout_width="85dp"
    android:layout_height="31dp"
    android:layout_marginStart="30dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="30dp"
    android:layout_marginBottom="10dp"
    android:fontFamily="@font/aref_ruqaa_bold"
    android:text="Level 25"
    android:textAllCaps="true"
    android:textColor="#FF5252"
    android:textSize="20sp"
    android:textStyle="bold"
    android:visibility="invisible"
    app:layout_constraintBottom_toTopOf="@+id/questionTextView"
    app:layout_constraintEnd_toStartOf="@+id/scoreTextView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/timerTextView"
    app:layout_constraintTop_toBottomOf="@+id/nameTextView"
    app:layout_constraintVertical_bias="0.5" />

<TextView
    android:id="@+id/timerTextView"
    android:layout_width="85dp"
    android:layout_height="35dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="20dp"
    android:layout_marginRight="30dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/alegreya_sans_sc_medium"
    android:textColor="#FF9100"
    android:textSize="20sp"
    app:layout_constraintBottom_toTopOf="@+id/questionTextView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/levelTextView"
    app:layout_constraintTop_toBottomOf="@id/nameTextView"
    app:layout_constraintVertical_bias="0.5" />

<TextView
    android:id="@+id/questionTextView"
    android:layout_width="354dp"
    android:layout_height="56dp"
    android:layout_marginStart="30dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="30dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/alegreya_sans_sc_medium"
    android:textColor="#00E9FF"
    android:textSize="25sp"
    app:layout_constraintBottom_toTopOf="@+id/answerGrid"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/levelTextView" />

<TextView
    android:id="@+id/scoreTextView"
    android:layout_width="104dp"
    android:layout_height="35dp"
    android:layout_marginStart="30dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/alegreya_sans_sc_medium"
    android:textColor="#FF9100"
    android:textSize="25sp"
    app:layout_constraintBottom_toTopOf="@+id/questionTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/levelTextView"
    app:layout_constraintTop_toBottomOf="@id/nameTextView" />

<androidx.gridlayout.widget.GridLayout 
    android:id="@+id/answerGrid"
    android:layout_width="369dp"
    android:layout_height="234dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="28dp"
    android:layout_marginBottom="20dp"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/resultTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/questionTextView">


    <Button
        android:id="@+id/optionA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#86CC4B"
        android:fontFamily="@font/aldrich"
        android:includeFontPadding="true"
        android:onClick="checkAnswer"
        android:tag="0"
        android:text="Button"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:visibility="invisible"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_row="0"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/optionB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D52A2A"
        android:fontFamily="@font/aldrich"
        android:includeFontPadding="true"
        android:onClick="checkAnswer"
        android:tag="1"
        android:text="Button"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:visibility="invisible"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_row="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/optionC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#26B8B8"
        android:fontFamily="@font/aldrich"
        android:includeFontPadding="true"
        android:onClick="checkAnswer"
        android:tag="2"
        android:text="Button"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:visibility="invisible"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_row="0"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/optionD"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D6D606"
        android:fontFamily="@font/aldrich"
        android:includeFontPadding="true"
        android:onClick="checkAnswer"
        android:tag="3"
        android:text="Button"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        android:visibility="invisible"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_row="1"
        app:layout_rowWeight="1" />


</androidx.gridlayout.widget.GridLayout>

<androidx.gridlayout.widget.GridLayout      /* I am facing biggest problem
    android:id="@+id/gridLayout"                with this layout when not 
    android:layout_width="369dp"                 hardcoding the sizes*/ 
    android:layout_height="445dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="20dp"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/coinTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/nameTextView">

    <Button
        android:id="@+id/startAddition"
        android:layout_width="359dp"
        android:layout_height="80dp"
        android:background="#5719E0"
        android:fadingEdge="horizontal"
        android:fontFamily="@font/bubblegum_sans"
        android:onClick="startQuiz"
        android:tag="0"
        android:text="Addition "
        android:textAllCaps="false"
        android:textColor="#FCF6F6"
        android:textSize="25sp"
        android:textStyle="italic"
        android:visibility="visible"
        app:layout_column="0"
        app:layout_gravity="fill"
        app:layout_row="0"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/startSubtraction"
        android:layout_width="359dp"
        android:layout_height="80dp"
        android:background="#B80909"
        android:fontFamily="@font/bubblegum_sans"
        android:onClick="startQuiz"
        android:tag="1"
        android:text="Subtraction"
        android:textAllCaps="false"
        android:textColor="#FCF6F6"
        android:textSize="25sp"
        android:textStyle="italic"
        android:visibility="visible"
        app:layout_column="0"
        app:layout_gravity="fill"
        app:layout_row="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/startMultiplication"
        android:layout_width="359dp"
        android:layout_height="80dp"
        android:background="#60A80B"
        android:fontFamily="@font/bubblegum_sans"
        android:onClick="startQuiz"
        android:tag="2"
        android:text="Multiplication"
        android:textAllCaps="false"
        android:textColor="#FCF6F6"
        android:textSize="25sp"
        android:textStyle="italic"
        android:visibility="visible"
        app:layout_column="0"
        app:layout_gravity="fill"
        app:layout_row="2"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/startDivision"
        android:layout_width="359dp"
        android:layout_height="80dp"
        android:background="#E75222"
        android:fontFamily="@font/bubblegum_sans"
        android:onClick="startQuiz"
        android:tag="3"
        android:text="Division"
        android:textAllCaps="false"
        android:textColor="#FCF6F6"
        android:textSize="25sp"
        android:textStyle="italic"
        android:visibility="visible"
        app:layout_column="0"
        app:layout_gravity="fill"
        app:layout_row="3"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/startSquare"
        android:layout_width="359dp"
        android:layout_height="80dp"
        android:background="#776120"
        android:fontFamily="@font/bubblegum_sans"
        android:onClick="startQuiz"
        android:tag="4"
        android:text="Square"
        android:textAllCaps="false"
        android:textColor="#FCF6F6"
        android:textSize="25sp"
        android:textStyle="italic"
        android:visibility="visible"
        app:layout_column="0"
        app:layout_gravity="fill"
        app:layout_row="4"
        app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>

<TextView
    android:id="@+id/resultTextView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="100dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="100dp"
    android:layout_marginBottom="10dp"
    android:textAlignment="center"
    android:textColor="#0BFFC2"
    android:textDirection="ltr"
    android:textSize="25sp"
    android:visibility="invisible"
    app:layout_constraintBottom_toTopOf="@+id/runTimeTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/answerGrid"
    app:layout_constraintVertical_bias="0.5" />

<TextView
    android:id="@+id/endResultTextView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="20dp"
    android:layout_marginBottom="20dp"
    android:background="#EED382"
    android:fontFamily="@font/walter_turncoat"
    android:padding="10dp"
    android:paddingStart="10dp"
    android:paddingLeft="10dp"
    android:textAppearance="@style/TextAppearance.AppCompat.Display4"
    android:textColor="#0A0A0A"
    android:textSize="20sp"
    android:textStyle="bold|italic"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/nameTextView" />

<Button
    android:id="@+id/playAgainButton"
    android:layout_width="216dp"
    android:layout_height="50dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:layout_marginBottom="20dp"
    android:background="#E65100"
    android:fontFamily="@font/atomic_age"
    android:onClick="getMenu"
    android:text="Play Again"
    android:textColor="#FFD600"
    android:textSize="20sp"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="@id/endResultTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.65"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/runTimeTextView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="100dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="100dp"
    android:layout_marginBottom="20dp"
    android:fontFamily="@font/kite_one"
    android:textAlignment="center"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    android:textColor="#F3D25E"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/resultTextView"
    app:layout_constraintVertical_bias="0.5" />

<TextView
    android:id="@+id/coinTextView"
    android:layout_width="286dp"
    android:layout_height="62dp"
    android:layout_marginStart="60dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="60dp"
    android:layout_marginBottom="30dp"
    android:background="#000000"
    android:fontFamily="@font/playball"
    android:textColor="#FFEA00"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/gridLayout"
    app:layout_constraintVertical_bias="0.5" />

我希望根据设备的大小进行布局匹配。

已经发图了。在顶部有带有游戏名称的 TextView。已将文本替换为 MathGames，因为该应用程序的实际名称尚未披露。

标签： androidandroid-layoutandroid-constraintlayoutscreen-sizeandroid-screen-support

解决方案

您的主要问题是您的视图尺寸使用固定大小。

为什么？

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

怎么修：

您可以在视图中使用这些属性：

  app:layout_constraintWidth_percent="0.x"
  app:layout_constraintHeight_percent="0.x"

这将使它们的大小相对于屏幕大小的百分比。

使用这些工具和一些指南，您可以创建您想要的响应式布局。

例如，这个布局：

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

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="36"
    android:background="#29C540"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView4"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="33"
    android:background="#D5CB14"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintBottom_toBottomOf="@+id/button4"
    app:layout_constraintEnd_toEndOf="@+id/textView4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button4" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="37"
    android:background="#276EA7"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toEndOf="@+id/textView4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="38"
    android:background="#f31"
    app:layout_constraintHeight_percent=".2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView4"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Level 1"
    app:layout_constraintEnd_toEndOf="@+id/textView3"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView3"
    app:layout_constraintWidth_percent=".9" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Math games"
    android:background="#81000000"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent=".9" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Add those numbers 28 + 10"
    android:gravity="center"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="@+id/textView6"
    app:layout_constraintStart_toStartOf="@+id/textView5"
    app:layout_constraintTop_toBottomOf="@+id/textView5" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="28 s"
    android:background="#81000000"
    android:textSize="32sp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintStart_toStartOf="@+id/textView7"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="0/0"
    android:background="#81000000"
    android:textSize="32sp"
    app:layout_constraintEnd_toEndOf="@+id/textView7"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alpha=".45"
    app:layout_constraintGuide_percent=".5"
    android:orientation="horizontal"
    />
</android.support.constraint.ConstraintLayout>

看起来像这样：

在此处输入图像描述

这只是一个示例，但这是您构建布局的一般方式 - 一种可以响应所有屏幕尺寸的布局。

推荐阅读