如何在Android中创建一个简洁的两栏输入表单?

2024-05-18

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

到目前为止我的 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 代码中,我们可以使用 % width size。但是在android xml布局中,layout_width没有%值。我想避免对列宽度进行硬编码 dp 值。在安卓上可以吗?

到目前为止,这是我能做的最好的事情。现在我想调整 ISBN 文本框的大小以使其变小(比当前大小小 50%)。但我无法调整文本框宽度的大小,因为layout_width 必须为“0dp”才能使layout_weight 工作。我还想对“提交”和“取消”按钮的大小执行相同的操作。

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

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


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

这是 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在Android中创建一个简洁的两栏输入表单? 的相关文章

随机推荐