如何使我的 xml 代码适合所有设备答案

【问题标题】：How to make my xml code fit on all devices如何使我的 xml 代码适合所有设备
【发布时间】：2022-01-23 23:21:28
【问题描述】：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@drawable/bgpic"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".LonelyMoviePageActivity">

    <ImageView
        android:id="@+id/movieImgView"
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="10dp"
        tools:src="@drawable/gmp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="10dp">

        <TextView
            android:id="@+id/movieName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:gravity="center"
            android:textColor="@color/white"
            tools:text="Gravity"
            android:textSize="30sp"/>

        <TextView
            android:id="@+id/movieYear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="(2016)"
            android:textSize="30sp"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="In a Series:"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_marginEnd="10dp"
            />

        <TextView
            android:id="@+id/seriesOrNoText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="No"
            android:textSize="20sp"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="70dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Rating:"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_marginEnd="10dp"
            />

        <TextView
            android:id="@+id/movieRatingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="R"
            android:textSize="20sp"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="10dp">

        <Button
            android:id="@+id/btnPrevious"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"
            android:text="Previous"
            android:background="@drawable/buttonbg"
            />

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="Next"
            android:background="@drawable/buttonbg"
            />

    </LinearLayout>

</LinearLayout>

我在我的手机上尝试了该代码，它运行良好，但是，我在我妈妈的手机上尝试过，非常糟糕，知道如何让它适合所有设备在线网站说最好使用约束布局，但是，这会搞砸我所做的一切，任何帮助。我没有在 android studio 上安装模拟器，因为有些答案涉及它。

【问题讨论】：

Online sites say that it's better to use a constraint layout, however, that would mess up all I've done 总体而言，使用约束布局可能会更好，假设您知道如何使用它。使用像 70dp 这样的值太大了，无法假设它适用于所有设备

标签： android

【解决方案1】：

删除所有LinearLayouts 并在顶层添加一个ConstraintLayout，这将Views 相互约束，包括屏幕边缘。这意味着它将压缩 （在合理范围内） 并扩展以适应屏幕尺寸，因为无需硬编码 dp 尺寸 https://developer.android.com/training/constraint-layout

中间的按钮示例。

两条垂直线guideline1 @ 10% 和guideline2 @ 90%

btnNext 和 btnPrevious 两个按钮

两个按钮相互约束，从而将它们推到一起。

btnNext 被限制为guideline1，因此将其推离屏幕左侧 10% (@ 10%)。

btnPrevious 被限制为 guideline2，因此将其推离屏幕右侧 10% (@ 90%)。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.10" <-- Make an invisible line at 10% mark on the screen.
    />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.90" <-- Make an invisible line at 90% mark on the screen.
    />

    <Button
        android:layout_marginEnd="5dp"
        android:id="@+id/btnNext"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Next"
        app:layout_constraintEnd_toStartOf="@id/btnPrevious" <-- Push to btnNext 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/guideline1" <-- Push to 10% mark of the screen.
        />
    <Button
        android:layout_marginStart="5dp"
        android:id="@+id/btnPrevious"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/btnNext" <-- Push to btnPrevious 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/guideline2" <-- Push to 90% mark of the screen.
        android:text="Previous"/>

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

如果我在同一行上有两个项目，例如下一个按钮和上一个按钮，则在使用约束布局时，我永远无法将它们放在中心
当然可以，为什么你认为你不能？
@MarkGeorge 只是从您的页边距猜测您在两个按钮上。您可以使用垂直指南。假设 1 为 10%，另一个为 90%。然后，您可以将两个按钮相互约束，将 1 个按钮约束到 10% 指导线，将另一个约束到 90% 指导线。
你能解释一下你刚才说的话吗
我已添加到我的答案中。

【解决方案2】：

可扩展性的诀窍是永远不要在视图上硬编码 dp 值。而是使用 ConstraintLayout 并约束您的视图。我建议查看“指南”视图，它在尝试制作可扩展的应用程序时非常有用。

【讨论】：