在Android中创建全宽表单的正确方法是什么

时间:2015-08-09 22:40:53

标签: android

我无法弄清楚如何以正常的撰写窗口的方式创建一个全宽的表单,例如电子邮件或论坛主题。以下来自material design guidelines的屏幕截图应该让我知道我想要实现的目标。如果你需要关于布局的更多细节让我知道,但它基本上就在这一刻,只是在LinearLayout中的两个EditText视图。

Full width form

[编辑]

我应该澄清一下,我确实理解布局是如何工作的。我可以获得全宽EditText字段,但示例的实际外观却完全不同。我不确定这是否是EditText的自定义样式,或者EditText是否包装在特定的布局中,使它们看起来好像在表或列表中。

[使用我的解决方案编辑]

抽拉/ full_width_edit_text

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#FFE0E0E0" />
        </shape>
    </item>
</layer-list>

值/样式

<resources>
    <style name="EditTextLightFullWidth" parent="AppTheme">
        <item name="android:textColorHint">#FF989898</item>
        <item name="android:textSize">16sp</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="android:paddingTop">20dp</item>
        <item name="android:paddingBottom">20dp</item>
        <item name="android:background">@drawable/full_width_edit_text_bg</item>
    </style>

    <style name="EditTextLightFullWidth.NoBorder" parent="EditTextLightFullWidth">
        <item name="android:background">@null</item>
    </style>
</resources>

布局/ compose_activity

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <EditText
        android:id="@+id/titleText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Title"
        android:theme="@style/EditTextLightFullWidth"
        style="@style/EditTextLightFullWidth"
        />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <EditText
            android:id="@+id/bodyText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine"
            android:gravity="top|left"
            android:hint="Body"
            android:theme="@style/EditTextLightFullWidth.NoBorder"
            style="@style/EditTextLightFullWidth.NoBorder"
            />
    </ScrollView>
</LinearLayout>

2 个答案:

答案 0 :(得分:1)

这实际上是EditText的自定义样式。他们只是将EditText背景设置为透明或null

How to change style of a default EditText

android : how to change the style of edit text?

答案 1 :(得分:0)

在layout.xml中为每个editText项添加一个宽度属性,其值为“match_parent”或“fill_parent”,并且它们应该扩展为与其父容器一样宽。只要你的父母也填充了屏幕的宽度,它应该可以工作。

例如

<LinearLayout>
    <!-- This will make your parent container fill the screen-->
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"

      <EditText
          android:id="@+id/edit_message"
          android:layout_height="40dp"
         <!--Here is where we stretch editText item as wide as parent -->
          android:layout_width="match_parent">

</LinearLayout>