【问题标题】:How to create a neat two-columns input form in Android?如何在 Android 中创建一个整洁的两列输入表单?
【发布时间】:2012-05-25 08:32:01
【问题描述】:

我想创建一个整洁的两列输入表单,如下所示:

到目前为止我的 xml 布局代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblTitle" />

        <EditText
            android:id="@+id/txtTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblAuthor" />

        <EditText
            android:id="@+id/txtAuthor"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblPublisher" />

        <EditText
            android:id="@+id/txtPublisher"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblIsbn" />

        <EditText
            android:id="@+id/txtIsbn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25" />

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.375"
            android:text="@string/submit" />

        <Button
            android:id="@+id/btnCancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.375"
            android:text="@string/cancel" />
    </LinearLayout>

</LinearLayout>

你可以看到我使用了 LinearLayout,利用 layout_weight & layout_width="0dp" 技巧使两列划分看起来整洁。在 HTML 代码中,我们可以使用 with % width size。但在 android xml 布局中,layout_width 没有 %-value。我想避免列宽的硬编码 dp 值。安卓可以吗?

到目前为止,这是我能做的最好的。现在我想调整 ISBN 文本框的大小以变得更小(从当前大小减小 50%)。但我无法调整文本框宽度,因为 layout_width 必须为“0dp”才能使 layout_weight 起作用。我也想对提交和取消按钮大小做同样的事情。

我想知道使用 LinearLayout 是否是在 android 中整齐地创建输入表单的正确方法。 TableLayout 可以更好地解决这个问题吗?听说不能在 TableLayout 中更改子视图的 layout_width。

这里有人推荐我使用RelativeLayout,我试过了,但它不支持layout_weight。

【问题讨论】:

  • 由于这个原因,我使用相对布局,它提供了最大的灵活性,您可以根据需要更改单个视图....
  • 我建议使用相对布局,因为它提供了更大的灵活性。
  • @以上两位:愿意举个例子吗?

标签: android android-layout


【解决方案1】:

好的,我找到了 LinearLayout 的方法。诀窍是通过使用 LinearLayout 包装要调整大小的视图。然后可以通过使用:android:layout_width 或 android:ems 属性来调整 View 本身的宽度。

这里是xml代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblTitle" />

        <EditText
            android:id="@+id/txtTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblAuthor" />

        <EditText
            android:id="@+id/txtAuthor"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblPublisher" />

        <EditText
            android:id="@+id/txtPublisher"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.25"
            android:text="@string/lblIsbn" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/txtIsbn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btnSubmit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5"
                android:text="@string/submit" />

            <Button
                android:id="@+id/btnCancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5"
                android:text="@string/cancel" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

【讨论】:

    【解决方案2】:

    您还应该考虑 gridLayout ,它可以在 API7+ 上使用(通过使用 android 库)。

    这是一个链接: http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html

    【讨论】:

    • 我不认为我可以使用它。我的目标是最低限度的 android v2.2 (API 8+)。
    • 你确定吗?当我单击您提供的网格布局链接时,我收到警告消息“API 级别 8 不提供此类。要使用此类,您的应用程序必须指定 API 级别“14”或更高级别'
    • 请阅读我的完整答案:“可以在 API7+ 上使用(通过使用 android 库)”。您可以使用 google 为您提供的 android 库之一,使其在旧设备上运行,就像您可以在 API 4+ 上使用片段和操作栏一样(但对于网格布局,您出于某种原因需要 API7+)。你可以在 sdk manager 上看到它,在 android 支持下。安装后在文件夹“...\extras\android\support\v7\gridlayout”
    • 但该消息来自官方 android 网站。您提供的博客链接还说:“冰淇淋三明治(ICS)具有两个新的小部件,这些小部件旨在支持更大的显示器带来的更丰富的用户界面:Space 和 GridLayout。” ICS 是 Android v4 (API 14) 对吧?
    • 我明白了。我没有安装它,因为我的额外文件夹没有它。但我想我会坚持核心库atm。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-01
    • 1970-01-01
    • 2011-02-11
    • 1970-01-01
    • 2022-11-23
    • 1970-01-01
    相关资源
    最近更新 更多