android - 如何实现 Material Design "Full-width text field"？

Question

我想实现 Material Design 中的“全角文本字段”，如下所示:https://www.google.com/design/spec/components/text-fields.html#text-fields-full-width-text-field

我如何使用 Material Design 库做到这一点？

最新版本中至少有这些可用的库:

• com.android.support:design:23.0.1
• com.android.support:appcompat-v7:23.0.1
• com.android.support:support-v4:23.0.1

我从 EditText 开始:

<EditText
    android:id="@+id/receivers"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:padding="20sp"
    android:hint="Receivers"
    android:inputType="textMultiLine"
    android:gravity="top"
    android:layout_height="wrap_content" />

<EditText
    android:layout_height="match_parent"
    android:id="@+id/new_message_text"
    android:layout_below="@+id/receivers"
    android:layout_width="match_parent"
    android:padding="20sp"
    android:hint="@string/hint_new_message"
    android:inputType="textMultiLine"
    android:gravity="top" />

看起来像那样

• 有没有办法从库常量中获取填充 (20sp) 值？
• 如何删除 EditText 底部的行？
• 我从哪里得到水平分隔符？

Answer 1

文本字段的值

<EditText
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:background="@null"
  android:gravity="center_vertical|start"
  android:minHeight="?listPreferredItemHeight"
  android:paddingTop="20dp"
  android:paddingBottom="20dp"
  android:paddingLeft="?listPreferredItemPaddingLeft"
  android:paddingRight="?listPreferredItemPaddingRight" />

• android:background="@null" 将使用隐含的 4dp 填充删除下划线。
• android:minHeight="?listPreferredItemHeight" 扩展到 56dp。 View 始终至少为 56dp 高。由于 android:gravity="center_vertical|start"，文本将始终垂直居中。
• android:paddingLeft="?listPreferredItemPaddingLeft" 和 android:paddingRight="?listPreferredItemPaddingRight" 在手机上扩展到 16dp，在平板电脑上扩展到 24dp。
• 垂直填充始终相同 - 16dp 20dp，如 Material Design > Components > Text Fields > Full-width text field 中指定的那样.

容器的值

容器看起来像一个 LinearLayout，它在 API 14 中引入了分隔线支持。在您的 LinearLayout 上使用这些属性:

android:divider="?listDivider"
android:showDividers="middle"

您可以使用任何自定义绘图引用，而不是您的主题提供的属性 ?listDivider。

附加说明

1) Material Design 规范与 appcompat-v7 库中定义的实际值之间存在一些不一致。

listPreferredItemHeight 应返回 56dp，但它返回 64dp。同样，listPreferredItemHeightLarge(在本例中未使用)返回 80dp 而不是 72dp。您可以通过重新定义主题中的属性来解决此问题:

<item name="android:listPreferredItemHeight">56dp</item>

2)不要直接使用颜色资源作为分隔线。它的隐式高度和宽度等于 -1。您需要一个自定义形状的可绘制对象。