实现浮动内联标签（使用 EditText？）

Question

Google 的Material Design text field guidelines 为文本输入提供浮动标签：

使用浮动内联标签，当用户与文本输入互动时 字段，标签移动到字段上方。

简单问题：实现浮动标签的最佳方式是什么（在 Android 5.0+ 上）？你能用EditText这样的标准组件轻松地做到这一点吗？如果可以，怎么做？还是使用 3rd 方库更简单？

Answer 1

您现在可以使用官方的 Android DESIGN 支持库（支持库 22.2.0 提供）

http://android-developers.blogspot.dk/2015/05/android-design-support-library.html

添加此依赖项以开始使用该库：

compile 'com.android.support:design:22.2.0'

将 EditText 包装在 TextInputLayout 中。

<android.support.design.widget.TextInputLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:layout_marginLeft="32dp"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

可以自定义TextInputLayout样式

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/accentColor</item>
</style>

Answer 2

你可以使用这个库AndroidFloatLabel:

在大多数情况下，您可以简单地在 XML 布局中使用自定义视图， 指定要用作 EditText 提示和标签的标签 带有 android:hint 属性的 TextView。示例：

<com.iangclifton.android.floatlabel.FloatLabel
    android:id="@+id/float_label_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/example_label" />

您还可以使用动态设置标签 floatLabel.setLabel("Custom Label") 或 floatLabel.setLabel(R.string.custom_label).

自定义布局

如果你想指定一个自定义布局来使用，你可以做一些事情 像这样：

<com.iangclifton.android.floatlabel.FloatLabel
    android:id="@+id/float_label_custom_layout_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/example_label"
    android:layout="@layout/custom_float_label" />

您的自定义布局应包含标签 TextView (id/float_label) 和一个 EditText (id/edit_text)。现在，自定义布局是 非常有限，因为 FloatLabel 只是简单地布置标签和 EditText 并忽略所有其他视图。这是非常有效的，但是 还可以防止您创建更复杂的布局。这是一个 示例：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
    <TextView
        android:id="@id/float_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="1"
        android:textIsSelectable="true"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    <EditText
        android:id="@id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text|textAutoCorrect|textCapSentences|textAutoComplete" />
</merge>

Answer 3

试试这个，

在 main.xml 中

<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#4644aa">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="#3FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.github.florent37.materialtextfield.MaterialTextField
        android:layout_width="300dp"
        android:layout_gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="20dp"
        app:mtf_cardCollapsedHeight="4dp"
        app:mtf_image="@drawable/ic_mail_grey600_24dp"
        >

        <!--
        app:mtf_animationDuration="1000"
        app:mtf_cardColor="@color/cardview_dark_background"
        app:mtf_labelColor="@android:color/holo_red_dark"
        app:mtf_openKeyboardOnFocus="true"
        -->

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:hint="Email"
            android:textColorHint="#666"
            android:textSize="15sp" />

    </com.github.florent37.materialtextfield.MaterialTextField>

</LinearLayout>

在 Main.java 中

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

//import com.crashlytics.android.Crashlytics;

//import io.fabric.sdk.android.Fabric;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//        Fabric.with(this, new Crashlytics());

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setTitleTextColor(0xFFFFFFFF);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


    }

}

你也使用这个库。

https://github.com/florent37/MaterialTextField.