如何创建正确的布局，在不同的屏幕上正确显示？

Question

我正在开发Android应用程序。在我的应用程序中，我有用于创建键盘模仿的表格布局。每个字母都有自己的图像，用于显示它。对于将图像行包装到当前屏幕大小，我使用“android：layout_height =”wrap_content“”参数，但它不会调整图像以适应屏幕。

以下是我的布局剪裁：

<TableLayout android:id="@+id/keyBoard"
    android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:layout_gravity="center"
        android:stretchColumns="*">
    <TableRow android:id="@+id/action_buttons"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:gravity="center_horizontal"
        android:paddingBottom="5px">
        <ImageView android:id="@+id/let_q" android:src="@drawable/q"
            android:padding="1px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_w" android:src="@drawable/w"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_e" android:src="@drawable/e"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_r" android:src="@drawable/r"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_t" android:src="@drawable/t"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_y" android:src="@drawable/y"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_u" android:src="@drawable/u"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_i" android:src="@drawable/i"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_o" android:src="@drawable/o"
            android:padding="3px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_p" android:src="@drawable/p"
            android:padding="1px" android:layout_gravity="center" />
    </TableRow>
    <TableRow android:id="@+id/action_buttons"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:gravity="center_horizontal" android:paddingBottom="5px">
        <ImageView android:id="@+id/let_a" android:src="@drawable/a"
            android:padding="5px" />
        <ImageView android:id="@+id/let_s" android:src="@drawable/s"
            android:padding="5px" />
        <ImageView android:id="@+id/let_d" android:src="@drawable/d"
            android:padding="5px" />
        <ImageView android:id="@+id/let_f" android:src="@drawable/f"
            android:padding="5px" />
        <ImageView android:id="@+id/let_g" android:src="@drawable/g"
            android:padding="5px" />
        <ImageView android:id="@+id/let_h" android:src="@drawable/h"
            android:padding="5px" />
        <ImageView android:id="@+id/let_j" android:src="@drawable/j"
            android:padding="5px" />
        <ImageView android:id="@+id/let_k" android:src="@drawable/k"
            android:padding="5px" />
        <ImageView android:id="@+id/let_l" android:src="@drawable/l"
            android:padding="5px" />
    </TableRow>
    <TableRow android:id="@+id/action_buttons"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:gravity="center_horizontal" android:paddingBottom="5px">
        <ImageView android:id="@+id/let_z" android:src="@drawable/z"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_x" android:src="@drawable/x"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_c" android:src="@drawable/c"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_v" android:src="@drawable/v"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_b" android:src="@drawable/b"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_n" android:src="@drawable/n"
            android:padding="5px" android:layout_gravity="center" />
        <ImageView android:id="@+id/let_m" android:src="@drawable/m"
            android:padding="5px" android:layout_gravity="center" />
    </TableRow>
</TableLayout>

我做错了什么？因为我得到了一些手机的结果： 端口视图：

对于Land视图：

Answer 1

您使用的图像看起来很大。因此， wrap_content 不会为您提供预期的结果。

您需要调整Alphabets图片的大小， 防爆。如果Letter Q的当前图像是180 X 130 px，则将其调整为较小的尺寸。让我们说140 X 80 px。

尝试使用您的代码。如果您调整图像大小并应用wrap_content，那么它将起作用！如果存在任何问题，请告诉我。感谢。

Answer 2

我创建布局的方法是在'dip'中提供宽度和高度，而不是在'px'中。

而且您可能还必须使用相对布局，这将是方便的