gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 10:06:08 25 4
gpt4 key购买 nike

enter image description here我为数学测验创建了一个布局,其中第一个屏幕上有一个网格布局,其中包含加法、减法等选项作为按钮提供。下面是“赚取的硬币” TextView 。网格布局上方有应用程序的名称。

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

在答案网格下方,有一个 resultTextView 显示 qn 是对还是错。下面有显示该测验分数的 TextView (runTimeTextView)。

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

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

我尝试了三种选择:

  1. 对布局尺寸进行硬编码并手动更改其位置

  2. 将 View 顶部附加到 View 底部的约束放置在 View 之上,并将 View 底部附加到父 View 。

  3. 将 View 顶部附加到该 View 之上的 View 底部,并将 View 底部约束到该 View 之下的 View 顶部。

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

最佳答案

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

为什么?

不同的手机有不同的屏幕尺寸,在您的布局中,您在 View 上使用固定尺寸(例如固定尺寸为 50dp),结果可能是在一个屏幕(您的 Android Studio 预览屏幕)上看起来不错,但在另一屏幕(您的实际手机)上看起来不太好。

<小时/>

如何修复:

您可以在 View 中使用这些属性:

  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>

看起来像这样:

enter image description here

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

关于android - 我的布局适用于一种屏幕尺寸,如何使其适用于 Android Studio 3.4.2 中的所有屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57887618/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com