基于 Android 表单的布局答案

【问题标题】：Android form based layout基于 Android 表单的布局
【发布时间】：2014-01-17 16:08:48
【问题描述】：

我正在尝试在 Android 上实现以下布局（目标 API 18，最小 API 8）

我对 Android 比较陌生，并提出了以下布局文件 (activity_main.xml)。我对 Linear 与 Relative 布局有所了解，如果有人能在这个方向上提供一些意见，我将不胜感激。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/task_name"
    android:textSize="14sp" />

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/textView1"
    android:ems="10"
    android:hint="@string/task_name_hint"
    android:inputType="text" />

<DatePicker
    android:id="@+id/dpResult"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/textView1"
    android:layout_marginTop="8dp" />

<RadioGroup
    android:id="@+id/priority_radios"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/dpResult"
    android:inputType="text"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_radio" />

    <RadioButton
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/second_radio"/>


    <RadioButton
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/third_radio" />

<RadioButton
    android:id="@+id/none"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/none_radio" 
    android:checked="true" />

</RadioGroup>


<RadioGroup
    android:id="@+id/category_radios"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/priority_radios"
    android:inputType="text"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/long_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_radio" />

    <RadioButton
        android:id="@+id/short_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/second_radio"/>


    <RadioButton
        android:id="@+id/new_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/third_radio" />


</RadioGroup>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/tag_name"
    android:textSize="14sp" />

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:entries="@array/tag_arrays"
    android:prompt="@string/tag_prompt" 
    android:layout_below="@id/category_radios" 
    android:layout_toRightOf="@id/textView2" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/spinner1"
    android:text="@string/create_task" />

</RelativeLayout>

【问题讨论】：

标签： java android eclipse layout ui-design

【解决方案1】：

这似乎是一个相当容易的布局。您可以使用垂直父线性布局，然后为每行使用多个水平线性布局。

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

<LinearLayout
    android:id="@+id/line1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Task name"/>

    <EditText android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter task name"/>
</LinearLayout>

<LinearLayout android:id="@+id/line2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <!-- SECOND LINE -->

</LinearLayout>

<LinearLayout android:id="@+id/line3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <!-- THIRD LINE -->
</LinearLayout>

【讨论】：

感谢您对此的回复 +1，您能否发布一个示例来说明这一点。
完美运行，谢谢！

【解决方案2】：

我会像你一样使用RelativeLayout，用于容器，然后是一些LinearLayouts和RadioGroups（继承自LinearLayout）

现在这是我得到的结果（请注意，我将中心部分留空） - 无论我是否使用了看起来像 textview 组合的图片（它只是我方便的 9 补丁）并且图像与您的不匹配......

通过使用这种布局

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ccc"
    android:orientation="vertical"
    >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5"
        android:layout_margin="4dp"
        >
        <ImageButton
            android:id="@+id/imgBack"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
        <ImageButton
            android:id="@+id/imgFore"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_toRightOf="@id/imgBack"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
        <ImageButton
            android:id="@+id/imgExit"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_toRightOf="@id/imgFore"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
        <ImageButton
            android:id="@+id/imgHome"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_toRightOf="@id/imgExit"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
        <ImageButton
            android:id="@+id/imgFind"
            android:layout_width="32dp"
            android:layout_height="24dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
        <TextView
            android:id="@+id/txtAddress"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/imgHome"
            android:layout_toLeftOf="@id/imgFind"
            android:layout_centerVertical="true"
            android:background="@drawable/combo_opt_m"
            android:layout_margin="4dp"
        />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="7.5"
        android:background="#fff"
        >

    </LinearLayout>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
        <ImageButton
            android:id="@+id/imgFoot"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:layout_margin="4dp"
        />
    </RelativeLayout>
</LinearLayout>

请注意，在我的 onCreate 方法中，我使用了：

@Override
protected void onCreate(
    final Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    // Make this activity, full screen
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

    // Hide the Title bar of this activity screen
    getWindow().requestFeature(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.form);
}

为了让应用全屏

【讨论】：

感谢您对此的回复 +1，您能否发布一个示例来说明这一点。
基本的粗略布局就可以了，不需要添加每个控件的属性。
好的，让我看看我能做什么
感谢整理，帮了大忙！！