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

Question

Google 的 Material Design text field guidelines 存在 浮动标签 用于文本输入：

With floating inline labels, when the user engages with the text input field, the labels move to float above the field.

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

Answer 1

您可以使用这个库 AndroidFloatLabel:

For most use, you can simply use the custom view in your XML layout, specifying a label to use as both the EditText hint and the label TextView with the android:hint property. Example:
<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" />
You can also dynamically set the label with floatLabel.setLabel("Custom Label") or floatLabel.setLabel(R.string.custom_label).

Custom Layout

If you want to specify a custom layout to use, you can do something like this:
<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" />
Your custom layout should include a label TextView (id/float_label) and an EditText (id/edit_text). Right now, the custom layouts are extremely limited because the FloatLabel simply lays out the label and the EditText and ignores all other views. This is very efficient but also prevents you from creating a much more complex layout. Here's an example:
<?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 2

您现在可以使用官方 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 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.

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

Implementing floating inline labels (with EditText?)

android

android-edittext

material-design

android-5.0-lollipop