Android Studio 中的预览与硬件中的预览不同

Question

我有一个 ImageView 作为背景，想在背景前面放置一些小部件。

我尝试了相对布局和线性布局，但仍然发现 AndroidStudio 中的布局预览与我在设备中部署的不一样。设备和背景图片均为 16:9, 1920x1080

• 背景分辨率：1080x1920
• 设备分辨率：1080x1920
• 活动主题：Theme.NoTitleBar.Fullscreen

这是布局 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chihangc.imaginecup_prel.MainActivity"
    android:layout_margin="0dp"
    android:padding="0dp"

    >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/r01_main"
    />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="500dp">

            <Button
                android:layout_width="210dp"
                android:layout_height="80dp"
                android:text="New Buttonr"
                android:id="@+id/button"
                android:layout_marginBottom="127dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <Button
                android:layout_width="210dp"
                android:layout_height="80dp"
                android:text="New Buttonr"
                android:id="@+id/button2"
                android:layout_alignTop="@+id/button"
                android:layout_toRightOf="@+id/button"
                android:layout_toEndOf="@+id/button" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

硬件截图

Android Studio 布局预览

Answer 1

如我所见，显示的布局非常混乱。几个问题 - 当按钮被线性布局包裹时，按钮中有一些相对布局参数的混合。 - 有嵌套的线性布局层，这是不必要的。 - 以及各种硬编码值（例如按钮宽度。

我对代码进行了一些改进。您可以使用此代码，并根据需要重新调整上边距（我现在设置为 400dp），希望这将在预览和实际设备之间提供一致。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/r01_main"
        />
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="2"
        android:layout_marginTop="400dp">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="80dp"
            android:text="New Buttonr"
            android:id="@+id/button"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="80dp"
            android:text="New Buttonr"
            android:id="@+id/button2"/>
    </LinearLayout>

</RelativeLayout>

理想情况下，我们也不应该依赖 marginTop。而是将图像分成多个图像。并将主要作为顶部视图放在底部上方。这样就可以更好地控制跨设备（具有不同高度）的视图布局。

Answer 2

由于您为 marginBottom 提供了明确的值，因此您将在不同的屏幕尺寸下获得不同的输出。您的模拟器屏幕尺寸可能与您的硬件屏幕尺寸不同。为防止这种情况发生，请使用 RelativeLayout 并相应地对齐按钮。

Answer 3

试试这个代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0dp"
    android:background="@drawable/bg"
    android:padding="0dp"
    tools:context="com.chihangc.imaginecup_prel.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.5"
            android:text="New Buttonr" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.5"
            android:text="New Buttonr" />
    </LinearLayout>
    
</RelativeLayout>

Answer 4

也许两个屏幕的尺寸不同。

android:layout_marginTop="500dp" 保证不同密度下边距大小相同，但不保证不同分辨率下的位置。

您可以删除marginTop的线并对齐到LinearLayout的底部。

编辑 垂直居中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/r01_main" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_centerVertical="true">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button2" />
</LinearLayout>
</RelativeLayout>

Answer 5

为您的 XML 布局使用以下代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:layout_margin="0dp"
    android:padding="0dp"
    android:background="@drawable/r01_main">



<LinearLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="New Buttonr"
                android:id="@+id/button"
                android:layout_weight=".5"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="New Buttonr"
                android:id="@+id/button2"
                android:layout_weight=".5"/>

</LinearLayout>
</RelativeLayout>

如果您想将按钮放置在中心，您可以这样做。 将 android:layout_alignParentBottom="true" 替换为 android:layout_gravity="center_vertical 在按钮的父布局中（线性布局）。