最近總結(jié)一下自己開發(fā)中常見Material Design的一些控件,TextInputLayout的使用及解析常用的屬性宅粥,嘻嘻参袱。
希望給大家?guī)韼椭瑫r(shí)通過學(xué)習(xí)來發(fā)現(xiàn)自己的不足秽梅,希望大家給予一些建議抹蚀,哈哈。接下來開始擼代碼企垦。
首先在build.gradle中添加依賴如下:
dependencies {
compile'com.android.support:appcompat-v7:25.0.1'
compile'com.android.support:design:25.0.1'
}
查看源碼發(fā)現(xiàn)TextInputLayout布局封裝以前最常用的編輯文本框EditText环壤,這就讓我們不禁想起EditText的友好畫面了吧,不過現(xiàn)在這個(gè)TextInputLayout會(huì)讓你更加喜歡上了這個(gè)優(yōu)雅的控件钞诡,
在源碼解釋中:TextInputLayout的作用是:顯示一個(gè)浮動(dòng)的標(biāo)簽-->當(dāng)提示隱藏由于用戶輸入文本郑现。(英語比較渣渣);
因?yàn)門extInputLayout封裝了EditText臭增,所以在使用時(shí)還是不開EditText懂酱。在XML文件中聲明如下:
android:id="@+id/login_til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
>
android:id="@+id/login_et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用戶名"
/>
這里的屬性:android:hint="用戶名",當(dāng)我點(diǎn)擊EditText時(shí)誊抛,該hint的文本會(huì)懸浮在EditText的上方列牺,這讓我們的頁面布局顯示一個(gè)非常友好的設(shè)置。
接下來讓我們來實(shí)踐一下這個(gè)布局的常用的屬性拗窃。
默認(rèn)顯示橫線的顏色是默認(rèn)主題中 colorAccent
(1)app:counterEnabled="true"字符計(jì)數(shù)是否可用
(2)app:counterMaxLength="24"設(shè)計(jì)計(jì)算最大的長(zhǎng)度如:24
android:id="@+id/til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用戶名"
app:counterEnabled="true"
app:counterMaxLength="24"
>
(3)app:counterOverflowTextAppearance ="@style/TextInputOverflowText"計(jì)數(shù)超過最大長(zhǎng)度時(shí)顯示的文本樣式風(fēng)格(懸浮文本瞎领、底部橫線均發(fā)生改變)
<style name="TextInputOverflowText">
<item name="android:textColor">#ddff23<item/>
<item name="android:textSize">16sp<item/>
(4)app:counterTextAppearance顯示的計(jì)數(shù)的文本樣式泌辫。
(5)app:hintTextAppearance =“@style/TextInputHint”設(shè)置hint顯示的風(fēng)格如文字大小、顏色等在“res/values/style”中設(shè)置一個(gè)風(fēng)格:如下九默,
<style name="TextInputHint">
<item name="android:textColor">#CCDDFFBB<item/>
<item name="android:textSize">16sp <item/>
<item name="android:maxEms">1<item/>
(6)app:errorEnabled?="true" 是否顯示錯(cuò)誤
(7)app:hintEnabled ="true" 是否設(shè)置浮動(dòng)標(biāo)簽//默認(rèn)為true震放,false表示沒有hint文本
(8)app:hintAnimationEnabled="true" 是否設(shè)置懸浮動(dòng)畫默認(rèn)為true
(9)app:passwordToggleDrawable="int"設(shè)置密碼切換的圖標(biāo)在drawable獲取圖標(biāo)
(10)app:passwordToggleEnabled="true"是否顯示密碼可見
(11)android:textCursorDrawable="@null"修改光標(biāo)的樣式
(12)app:passwordToggleTint="@color/colorPrimary" 改變 app:passwordToggleDrawable圖標(biāo)顏色
(13)android:textColorHint="#cccccc" hint中的字體顏色
(14)hintAnimationEnabled = "true" 是否激活動(dòng)畫
3、上代碼演示
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="密碼"
android:paddingBottom="8dp"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"
>
android:id="@+id/et_login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
4驼修、處理錯(cuò)誤信息顯示
button= (Button) findViewById(R.id.button);
til_username= (TextInputLayout) findViewById(R.id.til_username);
til_password= (TextInputLayout) findViewById(R.id.til_password);
tie_login_username= (TextInputEditText) findViewById(R.id.tie_login_username);
tie_login_password= (TextInputEditText) findViewById(R.id.tie_login_password);
button.setOnClickListener(newView.OnClickListener() {
@Override
public voidonClick(View view) {
getLoginInfo();//登錄方法
}
});
5殿遂、getLoginInfo()方法的代碼:<簡(jiǎn)單的做一下判斷而已>
private voidgetLoginInfo() {
String username =tie_login_username.getText().toString().trim();
String password =tie_login_password.getText().toString().toString();
tie_login_username.addTextChangedListener(newTextWatcher() {
@Override
public voidbeforeTextChanged(CharSequence charSequence, inti, inti1, inti2) {
}
@Override
public voidonTextChanged(CharSequence charSequence, inti, inti1, inti2) {
til_username.setErrorEnabled(false);
}
@Override
public voidafterTextChanged(Editable editable) {
}
});
tie_login_password.addTextChangedListener(newTextWatcher() {
@Override
public voidbeforeTextChanged(CharSequence charSequence, inti, inti1, inti2) {
}
@Override
public voidonTextChanged(CharSequence charSequence, inti, inti1, inti2) {
til_password.setErrorEnabled(false);
}
@Override
public voidafterTextChanged(Editable editable) {
}
});
if(TextUtils.isEmpty(username)) {
til_username.setError("用戶名不能為空!");
return;
}
if(TextUtils.isEmpty(password)) {
til_password.setError("密碼不能為空!");
return;
}
if(password.length() >5&& username.length() >5) {
Toast.makeText(this,"登錄成功",Toast.LENGTH_SHORT).show();
}else if(password.length() <=5) {
til_password.setError("密碼錯(cuò)誤");
}else if(username.length() <=5) {
til_username.setError("用戶名錯(cuò)誤");
}
}
6乙各、接下來講解一下TextInputEditText墨礁。
TextInputEditText是EditText的子類,所以TextInputLayout同樣也封裝了該類耳峦,所以在開發(fā)的時(shí)候我們是可以任選擇哪個(gè)來進(jìn)行都是可以恩静。
TextInputEditText繼承了AppCompatibleEditText,而AppCompatibleEditText繼承了EditText蹲坷。
源碼中所說的是使用該類是為了“使用這個(gè)類允許我們顯示一個(gè)提示在輸入法設(shè)置在“提取”模式”
允許一些背景設(shè)置方法驶乾。如:setBackgroundResource(@DrawableResintresId)、setBackgroundDrawable(Drawable background)等
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密碼"
app:counterEnabled="true"
app:counterMaxLength="24"
app:passwordToggleEnabled="true"
app:hintAnimationEnabled="true"
>
android:id="@+id/tie_login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>