android開發中TextInputLayout使用方法

android開發中TextInputLayout使用方法,TextInputLayout其實是一個容器,他繼承自LinearLayout,該容器是作用於TextView的,TextInputLayout隻能包裹一個子節點,類似於ScrollView。
本文以EditText舉例,實現的效果如上效果圖,EditText輸入內容以後,hint內容移動至編輯框上方。

實現

導入依賴

因為TextInputLayout是Android 5.0以後新加的庫的控件(Android Design Support Library),所以在使用前先要將Library導入到項目中來

這裡寫圖片描述

或者在gradle下添加依賴

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

XML



       
   

到此為止,如果你運行,會發現已經有瞭動畫效果
這裡寫圖片描述

使用

XML佈局




    

        
    

    

        
    

測試類

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private EditText mUserName;
    private EditText mPassWord;
    private TextInputLayout mTextInputLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextInputLayout = (TextInputLayout) findViewById(R.id.til_username);
        // mUserName = (EditText) findViewById(R.id.et_username);
        mPassWord = (EditText) findViewById(R.id.et_pwd);
        // 通過TextInputLayout設置hint內容,也可以通過直接設置EditText的hint屬性
        mTextInputLayout.setHint("用戶名");
    }

    // 確認按鈕123123
    public void ok(View view) {
        // 方式一:通過TextInputLayout獲取到裡面的子控件EditText後在獲取編輯的內容
        String username = mTextInputLayout.getEditText().getText().toString();
        // 方式二:直接通過EditText獲取到裡面的編輯內容
        String pwd = mPassWord.getText().toString();
        Toast.makeText(this, "username = " + username + "\npwd = " + pwd, Toast.LENGTH_SHORT).show();
        // 顯示錯誤信息
        mTextInputLayout.setError("錯誤提示信息");
    }
}

那麼如何修改他的樣式呢,我做瞭如下簡單的總結

修改樣式

相關屬性

app:hintAnimationEnabled=”true”//設置是否可以使用動畫,默認是true

app:hintTextAppearance=”@style/myStyle”//設置hint的文本屬性,改變hint文字的大小顏色等屬性

app:counterEnabled=”true”//設置是否可以開啟計數器,默認是false

app:counterOverflowTextAppearance=”” 計算器越位後的文字顏色和大小

app:counterMaxLength=”“計算器的最大字數限制

app:errorEnabled=”true” 是否允許錯誤提示

app:errorTextAppearance=”” 錯誤提示的文字大小和顏色

app:passwordToggleEnabled=”true”顯示小眼睛

app:passwordToggleTint=”@color/colorAccent” 給小眼睛上色

app:passwordToggleTintMode=”multiply”小眼睛的顯示方式
需要註意的是:如果想要顯示小眼睛,就需要在 TextInputEditText 或者 EditText 中設置 為密碼格式。比如: android:inputType=”textPassword”

取消動畫

可以通過TextInputLayout對象,執行setHintAnimationEnabled(boolean enabled)方法

// false 關閉動畫 true 開啟動畫
mTextInputLayout.setHintAnimationEnabled(false);

或者在xml裡添加hintAnimationEnabled屬性設置


app:hintAnimationEnabled="false"

效果 :

這裡寫圖片描述

設置hint移動到上方以後的顏色和字體大小

在XML裡對應的TextInputLayout標簽下添加hintTextAppearance屬性



    

然後在res->values->styles.xml下添加一個style


    #AA00FF
    
    20sp

效果(#AA00FF,20sp) :

這裡寫圖片描述

設置編輯文字的顏色

這個就是設置EditText的顏色



    

hint字體顏色



    

設置下劃線的顏色

修改res->values->styles.xml下”AppTheme”裡的colorAccent屬性

 …… #0000FF

效果(#0000FF) :
這裡寫圖片描述

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *