實施浮動內嵌標籤

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。