适用于正常屏幕尺寸的 Android 布局设计

Question

我是一个最业余的应用程序开发人员，我觉得我对 Android 基础知识掌握得很好，但我最擅长的事情是应用程序设计。我了解如何针对不同的屏幕尺寸和密度进行开发。但我最挣扎的是，每个正常尺寸和其他尺寸都涵盖了它们各自类别中的这么大范围的尺寸。我一直在寻找和寻找，但无法找到解决方案。

我遇到的主要问题是在使用 Eclipse 进行设计时，我使用 nexus one 进行设计，当我切换到像 3.2 HVGA 甚至是正常的 nexus 星系这样的较小屏幕时，该设计看起来非常适合我想要的东西大小的图像，我的图像的位置已经移动。因此，在其他一些正常的屏幕尺寸上，看起来非常适合 nexus 的东西看起来很糟糕。

可以做些什么来确保一个图像是否直接紧挨另一个图像在不同的屏幕上保持这种方式。我将举一个我正在做的当前设计的例子，我希望有人能解释我做错了什么/如何改进。

Nexus One 设计：

3.2 HVGA：

  the xml generated:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:orientation="vertical" >

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/i2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Button1"
        android:layout_alignTop="@+id/Button1"
        android:layout_marginLeft="106dp"
        android:layout_marginTop="160dp"
        android:background="@drawable/i3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignRight="@+id/Button1"
        android:layout_marginRight="112dp"
        android:background="@drawable/i4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignLeft="@+id/button3"
        android:background="@drawable/i5" />

</RelativeLayout>

Answer 1

尝试为侧边按钮添加另一个布局以将它们组合在一起，然后将该布局居中：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/RelativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:columnCount="4"
                android:orientation="vertical"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true">

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/RelativeLayout2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="false"
            android:layout_alignParentTop="true"
            android:background="@drawable/i2"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i3"
            android:layout_below="@+id/button1"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i4"
            android:layout_below="@+id/button4"
            android:layout_toRightOf="@+id/button2"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i5"
            android:layout_toRightOf="@+id/button2"
            android:layout_alignParentTop="true"/>
    </RelativeLayout>
</RelativeLayout>

Answer 2

您需要为每种屏幕分辨率创建不同的图像，并将它们放入各自的drawable 文件夹drawable--hdpi、drawable-mdpi、drawable-xhdpi 等。另外请确保您在使用dp你的xml 文件，看起来就是你。只要确保你总是这样做。

为不同的屏幕设计可能会很棘手，因为您必须基本上创建 4 或 5 次相同的图像。

此外，请确保您在实际手机上进行测试，因为模拟器并不总是为您提供准确的布局。