android - 针对多种尺寸因素的 Android UI 设计

Question

我正在构建一个应用程序，它从类似于股票 PIN 输入屏幕的 PIN 屏幕开始，问题是我无法让设计适用于所有类型的手机，为了简单起见，我们只讨论纵向模式（我会链接下面的布局xml）：

• 在小屏幕设备上，我需要减小按钮的 dp 大小，这样它们就不会挂在屏幕边缘
• 在大型设备上，按钮更大，因此它们不会在屏幕中间聚集在一起
• 我需要支持一些旧的（2.3）设备，其中一个是 5 英寸的平板电脑，按钮挂在上面（因为尺寸因素属于大类），但它应该是正常尺寸类别。我知道最小宽度尺寸组，但这仅适用于 >3.2 设备。

我想在所有设备上都有一个一致的外观，（很大程度上）独立于它的形式或大小。我想过元素的动态大小，但没有支持它，我不想靠近 AbsoluteLayout 类。

有没有人分享我的挫败感，或者已经开发了一个好的解决方案？

我正在使用的布局文件：

<?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="fill_parent" >

    <TextView android:id="@+id/enter_pin"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="@string/DIALOG_ENTERPIN" />

    <EditText android:id="@+id/pin_box"
              android:layout_below="@id/enter_pin"
              android:layout_centerHorizontal="true"
              android:layout_width="fill_parent" />


    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_below="@id/pin_box"
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content" >

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_1"
                    style="@style/pinbutton"
                    android:text="1" />

            <Button android:id="@+id/pin_2"
                    style="@style/pinbutton"
                    android:text="2" />

            <Button android:id="@+id/pin_3"
                    style="@style/pinbutton"
                    android:text="3" />    
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_4"
                    style="@style/pinbutton"
                    android:text="4" />

            <Button android:id="@+id/pin_5"
                    style="@style/pinbutton"
                    android:text="5" />

            <Button android:id="@+id/pin_6"
                    style="@style/pinbutton"
                    android:text="6" />
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_7"
                    style="@style/pinbutton"
                    android:text="7" />

            <Button android:id="@+id/pin_8"
                    style="@style/pinbutton"
                    android:text="8" />

            <Button android:id="@+id/pin_9"
                    style="@style/pinbutton"
                    android:text="9" />
        </TableRow>

        <TableRow android:gravity="center" >
            <Button android:id="@+id/pin_back"
                    style="@style/pinbutton"
                    android:text="‹" />

            <Button android:id="@+id/pin_0"
                    style="@style/pinbutton"
                    android:text="0" />

            <Button android:id="@+id/pin_ok"
                    style="@style/pinbutton"
                    android:text="OK" />
          </TableRow>
     </TableLayout>
</RelativeLayout>

更新：

我已经在为不同的大小组使用不同的布局，并且专门使用 dp & sp，仅供参考，所以请不要写泛泛而谈。问题仍然在于更精细的细节，IMO 的尺寸箱选择得不好。

Answer 1

我考虑过元素的动态大小，但不支持它

这是什么意思？动态大小或多或少是 Android 布局的基础。您可以使用前面提到的 DP 进行基于密度的相对大小调整，您可以使用layout_weightLinearLayouts 来处理显示的小数部分，您可以使用wrap_contentandmatch_parent根据显示的大小制作图形大小，或者里面的内容。我的建议是给按钮一个min_width/min_height属性，这样在较大的设备上按钮不会变得太大而荒谬，但也不要太小而无法在较小的设备上按下。

如果您不介意有几个不同版本的布局文件，另一种方法是拥有更多资源限定的布局文件夹（例如layout-large,layout-small等），根据显示的一般大小，布局略有不同。

编辑：好的，快速的想法，只是为了密码键盘，我什至没有在布局编辑器中查看它，但这是我可能如何做到这一点的基本想法。没有 maxWidth 或 maxHeight 属性LinearLayout，所以我可能会创建一个资源文件夹，layout_sw600dp并layout_sw720dp为该尺寸的屏幕的 PIN 键盘硬编码一个较小的尺寸。

<LinearLayout
    android:id="@+id/pin_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:max_width="480dp"
    android:max_height
    android:layout_margin="20dp"
    android:orientation="vertical"
    >
    <LinearLayout
        android:id="@+id/pin_row1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="1"
            />
        <Button
            android:id="@+id/num2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="2"
            />
        <Button
            android:id="@+id/num3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="3"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/pin_row2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="4"
            />
        <Button
            android:id="@+id/num5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="5"
            />
        <Button
            android:id="@+id/num6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="6"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/pin_row3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/num7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="7"
            />
        <Button
            android:id="@+id/num8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="8"
            />
        <Button
            android:id="@+id/num9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="9"
            />
    </LinearLayout>
</LinearLayout>

Answer 2

是的，Android 的 UI 设计是应用程序开发中最乏味和最令人沮丧的方面之一。

有几种方法可以处理这个问题（没有一种方法本身是快速和简单的）。要么在代码中进行布局，然后处理不同的密度/分辨率。

否则，复制您的布局，但调整值，并将它们存储在单独的布局文件夹中，操作系统将根据制造商指定的屏幕尺寸自动从中选择。

利用layout, layout-small, layout-large, layout-xlarge, layout-xlarge, layout-land等。这样，您基本上可以将您的布局 c&p 到每个目录中，并以这种方式修改特定尺寸。此外，如果您发现重用了许多不同的维度，请指定 dimensions.xml 或 styles.xml，这样您就可以避免重复键入它们。

http://developer.android.com/guide/practices/screens_support.html

是一个相当不错的资源，但总的来说，答案是多种尺寸的 ui 设计只需要大量的工作。

Answer 3

一般来说，使用 dip 或 dp 定义 Button 或其他 View 的大小，使用 sp 定义文本的大小，如果这样做，那么您的应用程序可以适合大多数屏幕。