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

【问题标题】：My layout works good for one screensize, how to make it suitable for all screen sizes in Android Studio 3.4.2我的布局适用于一种屏幕尺寸，如何使其适用于 Android Studio 3.4.2 中的所有屏幕尺寸
【发布时间】：2019-09-11 10:57:45
【问题描述】：

enter image description here我已经为数学测验创建了一个布局，在第一个屏幕上，一个带有加法、减法等选项的网格布局作为按钮提供。下面是“赚取的硬币”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，因为该应用的实际名称尚未披露。

【问题讨论】：

  • 避免为视图设置宽度和高度的绝对值，并尽量使用匹配父级和包装内容来设置值。
  • medium.com/oceanize-geeks/…
  • 我尝试使用匹配约束参数。但是我应该对所有视图使用所有 4 个约束吗？如果是的话，我应该把它们放在哪里。将它们与相邻视图或父视图匹配？就我而言，两者都不起作用。
  • medium.com 链接不适用于最新版本
  • 这是完全理解的正确来源developer.android.com/training/multiscreen/screensizes

标签： android android-layout android-constraintlayout screen-size android-screen-support


【解决方案1】：

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

为什么？

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

如何解决：

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

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

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

使用这些工具，也许还有一些 Guidelines，您可以创建您想要的响应式布局。

例如这个布局：

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

看起来像这样：

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

【讨论】：

    【解决方案2】：

    不同的手机有不同的屏幕尺寸。

    您的问题是您使用的绝对宽度/高度因设备而异一个绝对数。有很多方法，您可以通过编程方式获取屏幕宽度/高度并调整视图的大小，以便它们采用比例（使用代码）。

    例如 如果您希望您的视图占据视口的一半，并在右侧/左侧留下四分之一，您需要获取屏幕宽度，将您的项目居中并将其宽度设置为屏幕宽度/2。

    只要遵循这个并使用比率（除法运算符是你的朋友），你就可以实现你想要的。

    【讨论】：

    • 您可以通过编程方式获取屏幕宽度/高度，为什么不使用app:layout_constraintWidth_percent 和app:layout_constraintHeight_percent。你有什么理由要在运行时计算所有这些吗？
    • 完全没有理由，我只是在强调百分比的概念，我说有很多方法，你当然是对的
    猜你喜欢
    • 2017-12-11
    • 2021-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-21
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode