实施浮动内嵌标签

Question

谷歌的Material Design text field guidelines目前浮动标签进行文字输入（带的EditText？）：

随着浮动内嵌标签，当用户与文本输入 场接合时，标签转移到浮动在领域之上。

简单的问题：什么是实现（在Android 5.0以上版本）浮动标签的最佳方式？你可以轻松地使用标准组件如EditText来做到这一点，如果是的话，如何？还是更容易与第三方库？

Answer 1

您现在可以使用官方的Android设计支持库（可从库支持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暗示和标签 的TextView既使用android：hint属性。例如：

<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

试试这个，在主

。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); 


    } 

} 

和u也使用这个库。

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