介紹
TextInputLayout是屬于Material Design的新特性
存在的意義:
我們知道TextInputLayout是跟EditText是很類似的,那么他存在肯定是有意思的滤馍,EditText在設(shè)置hint="xxx"是默認(rèn)顯示岛琼,然后只要在edittext中輸入的時(shí)候默認(rèn)顯示的就消失了,這種體驗(yàn)就不是很好巢株。
那TextInputLayout有什么不同的地方呢槐瑞,我們先來(lái)看下官方的案例圖片
我們可以看到在edittext輸入文字的時(shí)候,默認(rèn)提示的文字并沒(méi)有消失阁苞,而是現(xiàn)實(shí)在其左上方困檩。確實(shí)是很友好的交互
TextInputLayout使用
添加依賴
因?yàn)門extInputLayout是屬于Material Design特性祠挫,所以我們需要添加依賴
<pre>
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
</pre>
布局使用
先看布局代碼在說(shuō)
<pre>
<android.support.design.widget.TextInputLayout
android:id="@+id/activity_activate_robot_email_tilayout"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="@id/activity_activate_robot_phone_tilayout"
android:layout_marginTop="20dp"
>
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:hint="@string/activity_activate_input_email"
android:inputType="number"
/>
</android.support.design.widget.TextInputLayout>
</pre>
看代碼我們知道,他并不是我們最初想的是替換掉edittext悼沿,而是在edittext上加載了一層控件
TextInputLayout控件和LinearLayout完全一樣等舔,它只是一個(gè)容器。
那我們可能會(huì)想糟趾,那我又多個(gè)edittext我能不能都放到TextInputLayout中呢慌植,答案是不行,因?yàn)椋篢extInputLayout只接受一個(gè)子元素义郑。子元素需要是一個(gè)EditText元素涤浇。
修改樣式
這里面的修改樣式主要是修改提示文字顏色和控件顏色。
修改其實(shí)很簡(jiǎn)單魔慷,我們可以在style.xml中找到
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">#3498db</item>
</style>
只要將
<item name="colorAccent">#3498db</item>
這里面的顏色值替換就可以了
獲取TextInputLayout的數(shù)據(jù)
看布局我們知道TextInputLayout中包含了EditText只锭,那我們獲取數(shù)據(jù)可以直接通過(guò)EditText.getText().ToString();得到文本內(nèi)容。
而其實(shí)TextInputLayout也是可以獲取edittext的文本內(nèi)容的院尔。
<pre>
String phone = activityActivateRobotPhoneTilayout.getEditText().getText().toString().trim();
String email = activityActivateRobotEmailTilayout.getEditText().getText().toString().trim();
</pre>
看下不同之處蜻展,他先是getEditText()獲取子Edittext,然后再getText()來(lái)獲取EditText的文本信息邀摆。
錯(cuò)誤信息顯示
既然TextInputLayout他是為友好交互而誕生纵顾,那么在輸入問(wèn)題錯(cuò)誤的時(shí)候也能夠給出友好的提示,如:
那么是怎么實(shí)現(xiàn)的呢栋盹,我們看代碼
activityActivateRobotEmailTilayout.setError("Not a valid email address!");
activityActivateRobotPhoneTilayout.setError("Not a valid phone number!");
然后如果沒(méi)有錯(cuò)誤呢施逾,怎么講這個(gè)錯(cuò)誤去掉呢
activityActivateRobotEmailTilayout.setErrorEnabled(false);
activityActivateRobotPhoneTilayout.setErrorEnabled(false);
總結(jié)
雖然很簡(jiǎn)單,但是是不是感覺(jué)很多人還沒(méi)開始用到例获,是不是感覺(jué)很多地方可以用到汉额。
material design 很多新特性都不錯(cuò),一起趕快用起來(lái)吧榨汤。
慢慢努力做好身邊所有的事
求知若饑蠕搜,虛心若愚