MaterialDesign之TextInputLayout和TextInputEditText

最近總結(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"

/>

下載鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末循签,一起剝皮案震驚了整個(gè)濱河市级乐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌懦底,老刑警劉巖唇牧,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件罕扎,死亡現(xiàn)場(chǎng)離奇詭異聚唐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)腔召,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門杆查,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人臀蛛,你說我怎么就攤上這事亲桦。” “怎么了浊仆?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵客峭,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我抡柿,道長(zhǎng)舔琅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任洲劣,我火速辦了婚禮备蚓,結(jié)果婚禮上课蔬,老公的妹妹穿的比我還像新娘。我一直安慰自己郊尝,他們只是感情好二跋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著流昏,像睡著了一般扎即。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上况凉,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天铺遂,我揣著相機(jī)與錄音,去河邊找鬼茎刚。 笑死襟锐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的膛锭。 我是一名探鬼主播粮坞,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼初狰!你這毒婦竟也來了莫杈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤奢入,失蹤者是張志新(化名)和其女友劉穎筝闹,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腥光,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡关顷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了武福。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片议双。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖捉片,靈堂內(nèi)的尸體忽然破棺而出平痰,到底是詐尸還是另有隱情,我是刑警寧澤伍纫,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布宗雇,位于F島的核電站,受9級(jí)特大地震影響莹规,放射性物質(zhì)發(fā)生泄漏赔蒲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望嘹履。 院中可真熱鬧腻扇,春花似錦、人聲如沸砾嫉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽焕刮。三九已至舶沿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間配并,已是汗流浹背括荡。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉旋,地道東北人畸冲。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像观腊,于是被迫代替她去往敵國(guó)和親邑闲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容