不同设备上的按钮布局更改

Posted 2023-04-19

技术标签:

【中文标题】不同设备上的按钮布局更改【英文标题】：Button Layout changes on different devices 【发布时间】：2020-06-13 07:17:09 【问题描述】：

我的应用的按钮位置在不同设备上会发生变化。有时按钮变大，有时变小，有时部分按钮不可见。我使用垂直线性布局。按钮位于可绘制文件夹中，按钮大小为 227x231 像素。

有一些示例截图。 Pixel 2 - Pixel 3a - Mi 9T Pro

我该如何解决？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_
android:layout_
android:background="@drawable/back4">

<LinearLayout
    android:layout_
    android:layout_
    android:background="@drawable/a"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/teamName"
        android:layout_
        android:layout_
        android:layout_marginLeft="20dp"
        android:layout_marginTop="15dp"
        android:layout_weight="1"
        android:fontFamily="@font/andika"
        android:paddingTop="20dp"
        android:text="Team 1"
        android:textAlignment="center"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/score"
        android:layout_
        android:layout_
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:layout_weight="1"
        android:paddingLeft="50dp"
        android:text="5"
        android:textColor="#303f9f"
        android:textSize="36sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/roundText"
        android:layout_
        android:layout_
        android:layout_marginLeft="20dp"
        android:layout_marginTop="15dp"
        android:layout_weight="1"
        android:fontFamily="@font/andika"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Round 1/5"
        android:textAlignment="viewStart"
        android:textColor="#000000"
        android:textSize="20sp" />
</LinearLayout>

<TextView
    android:id="@+id/timeText"
    android:layout_
    android:layout_
    android:layout_marginLeft="100dp"
    android:layout_marginTop="20dp"
    android:layout_marginRight="100dp"
    android:fontFamily="@font/arsenal_bold"
    android:text="60"
    android:textAlignment="center"
    android:textColor="#E2DADA"
    android:textSize="40sp"
    android:textStyle="bold" />

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_
    android:layout_
    android:progress="0"/>

<LinearLayout
    android:layout_
    android:layout_
    android:background="@drawable/game4"
    android:orientation="vertical">

    <TextView
        android:id="@+id/guessWord"
        android:layout_
        android:layout_
        android:layout_marginStart="80dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="80dp"
        android:text="Guess "
        android:textAlignment="center"
        android:textColor="#FFFFFF"
        android:textSize="38sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/translateWord"
        android:layout_
        android:layout_
        android:layout_marginStart="80dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="80dp"
        android:text="(Translate)"
        android:textAlignment="center"
        android:textColor="#D0FFFFFF"
        android:textSize="26sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tabuWord1"
        android:layout_
        android:layout_
        android:layout_marginStart="80dp"
        android:layout_marginTop="35dp"
        android:layout_marginEnd="80dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tabuWord2"
        android:layout_
        android:layout_
        android:layout_marginStart="80dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="80dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tabuWord3"
        android:layout_
        android:layout_
        android:layout_marginStart="80dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="80dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="30sp" />
</LinearLayout>

<LinearLayout
    android:layout_
    android:layout_
    android:orientation="horizontal">

    <Button
        android:id="@+id/tabuButton"
        android:layout_
        android:layout_
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="30dp"
        android:layout_weight="1"
        android:background="@drawable/tabubutton2" />

    <Button
        android:id="@+id/passButton"
        android:layout_
        android:layout_
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="30dp"
        android:layout_weight="1"
        android:background="@drawable/pasbutton2" />

    <Button
        android:id="@+id/trueButton"
        android:layout_
        android:layout_
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:layout_weight="1"
        android:background="@drawable/truebutton2" />
    </LinearLayout>

</LinearLayout>

【问题讨论】：

您是否尝试过不对您的 LinearLayouts 使用固定 layout_height 而是使用 wrap_content？在 Andoird 中，显示器的尺寸和密度变化很大，有时很难在所有设备上以绝对值实现相同的布局。我将布局高度从 (android:layout_) 更改为 (android:layout_)。但它不起作用。您也可以使用RelativeLayout，因为这样您就可以完全控制如何排列视图并将它们绑定在一起，这样它们就不会漏掉。 【参考方案1】：

你应该使用 ScrollView 但如果你不希望屏幕滚动你应该使用 ConstraintLayout 重建它

【讨论】：

我不喜欢使用约束布局。因为它有同样的问题没有约束布局可以解决它，因为它适用于屏幕使用指南中的百分比，它适用于您【参考方案2】：

你可以这样做：

   <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_
        android:layout_>


        <ScrollView
            style="@style/parent"
            tools:ignore="MissingConstraints">
                        .......
        </ScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

style.xml

  <style name="parent">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

我认为这应该适用于所有屏幕

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_
    android:layout_
    android:background="@drawable/back4">

    <ScrollView
        style="@style/parent"
        tools:ignore="MissingConstraints,ScrollViewCount">

        <LinearLayout
            android:orientation="vertical"
            android:layout_
            android:layout_>

            <LinearLayout
                android:layout_
                android:layout_
                android:background="@drawable/a"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/teamName"
                    android:layout_
                    android:layout_
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="15dp"
                    android:layout_weight="1"
                    android:fontFamily="@font/andika"
                    android:paddingTop="20dp"
                    android:text="Team 1"
                    android:textAlignment="center"
                    android:textColor="#000000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/score"
                    android:layout_
                    android:layout_
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="15dp"
                    android:layout_weight="1"
                    android:paddingLeft="50dp"
                    android:text="5"
                    android:textColor="#303f9f"
                    android:textSize="36sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/roundText"
                    android:layout_
                    android:layout_
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="15dp"
                    android:layout_weight="1"
                    android:fontFamily="@font/andika"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp"
                    android:text="Round 1/5"
                    android:textAlignment="viewStart"
                    android:textColor="#000000"
                    android:textSize="20sp" />
            </LinearLayout>

            <TextView
            android:gravity="center"
            android:layout_gravity="center"
            android:id="@+id/timeText"
            android:layout_
            android:layout_
            android:fontFamily="@font/arsenal_bold"
            android:text="60"
            android:textAlignment="center"
            android:textColor="#E2DADA"
            android:textSize="40sp"
            android:textStyle="bold" />

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_
                android:layout_
                android:progress="0"/>

            <LinearLayout
                android:layout_
                android:layout_
                android:background="@drawable/game4"
                android:orientation="vertical">

                <TextView
                    android:layout_margin="25dp"
                    android:id="@+id/guessWord"
                    android:layout_
                    android:layout_
                    android:text="Guess "
                    android:textAlignment="center"
                    android:textColor="#FFFFFF"
                    android:textSize="38sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_margin="15dp"
                    android:id="@+id/translateWord"
                    android:layout_
                    android:layout_
                    android:text="(Translate)"
                    android:textAlignment="center"
                    android:textColor="#D0FFFFFF"
                    android:textSize="26sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_margin="15dp"
                    android:id="@+id/tabuWord1"
                    android:layout_
                    android:layout_
                    android:text="TextView"
                    android:textAlignment="center"
                    android:textSize="30sp" />

                <TextView
                    android:layout_margin="15dp"
                    android:id="@+id/tabuWord2"
                    android:layout_
                    android:layout_
                    android:text="TextView"
                    android:textAlignment="center"
                    android:textSize="30sp" />

                <TextView
                    android:layout_margin="15dp"
                    android:id="@+id/tabuWord3"
                    android:layout_
                    android:layout_
                    android:text="TextView"
                    android:textAlignment="center"
                    android:textSize="30sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_marginTop="15dp"
                android:layout_
                android:layout_
                android:orientation="horizontal">

                <Button
                    android:layout_margin="25dp"
                    android:id="@+id/tabuButton"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:background="@drawable/tabubutton2" />

                <Button
                    android:layout_margin="25dp"
                    android:id="@+id/passButton"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:background="@drawable/pasbutton2" />

                <Button
                    android:layout_margin="25dp"
                    android:id="@+id/trueButton"
                    android:layout_
                    android:layout_
                    android:layout_weight="1"
                    android:background="@drawable/truebutton2" />
            </LinearLayout>
        </LinearLayout>




    </ScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

以上是关于不同设备上的按钮布局更改的主要内容，如果未能解决你的问题，请参考以下文章

不同设备上的不同页面

垂直布局的小型设备上的高度不正确？ [关闭]

基于尺寸元素的设备旋转期间的动画更改将在旋转完成后进行

使用自动布局更改按钮位置