實現EditText選中時底邊框改變顏色
阿新 • • 發佈:2019-01-03
(一)使用9Patch圖片
XML佈局:
<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft ="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<RelativeLayout
android:id="@+id/domainLayout"
android:layout_width="match_parent"
android:layout_height="50dip"
android:orientation="horizontal"
android:layout_gravity="center"
>
<TextView android:layout_width="70dip"
android:layout_height="match_parent"
style="@style/text_s28_1c1c1c"
android:gravity="right|center"
android:text="使用者名稱:"/>
<com.ziniu.mobile.module.ui.component.ZiniuEdit
android:id="@+id/domain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="75dip"
android:paddingRight="5dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
//文字框為空時提示文字顏色
android:textColorHint="@color/wechat_text_gray"
//文字框樣式
style="@style/text_s28_1c1c1c"
//文字框為空時提示文字
android:hint="請輸入使用者名稱"
//文字框背景狀態
android:background="@drawable/line_et_bg"
//載入文字框右端刪除圖示
android:drawableRight="@drawable/edit_clear_48"
//設定游標的顏色為@null,表示游標的顏色和輸入框的字型顏色相同
android:textCursorDrawable="@null"/>
<RelativeLayout
android:id="@+id/domainLayout"
android:layout_width="match_parent"
android:layout_height="50dip"
android:orientation="horizontal"
android:layout_gravity="center"
>
<TextView android:layout_width="70dip"
android:layout_height="match_parent"
style="@style/text_s28_1c1c1c"
android:gravity="right|center"
android:text="使用者名稱:"/>
<com.ziniu.mobile.module.ui.component.ZiniuEdit
android:id="@+id/domain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="75dip"
android:paddingRight="5dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
//文字框為空時提示文字顏色
android:textColorHint="@color/wechat_text_gray"
//文字框樣式
style="@style/text_s28_1c1c1c"
//文字框為空時提示文字
android:hint="請輸密碼"
//文字框背景
android:background="@drawable/line_et_bg"
//載入文字框右端刪除圖示
android:drawableRight="@drawable/edit_clear_48"
//設定游標的顏色為@null,表示游標的顏色和輸入框的字型顏色相同
android:textCursorDrawable="@null"/>
</RelativeLayout>
</RelativeLayout>
/drawable/line_et_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
//state_pressed:當控制元件被按下時觸發相應的9Patch圖片
<item android:drawable="@drawable/textfield_activated_holo_dark" android:state_pressed= "true"/>
//state_focused:當控制元件獲取焦點時
<item android:drawable="@drawable/textfield_activated_holo_dark" android:state_focused= "true"/>
//state_selected:當控制元件被選擇觸發時
<item android:drawable="@drawable/textfield_activated_holo_dark" android:state_selected= "true"/>
//沒有選中時的狀態
<item android:drawable="@drawable/textfield_default_holo_light" />
</selector>
(二)使用樣式
XML佈局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.bignerdranch.android.edittexttest.MainActivity">
<EditText
android:id="@+id/login_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/line_et_bg"
android:hint="請輸入使用者名稱"/>
<EditText
android:layout_below="@id/login_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/line_et_bg"
android:hint="請輸入密碼"/>
</RelativeLayout>
/drawable/line_et_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
//當控制元件被選中時觸發相應的樣式
<itemandroid:state_focused="true" android:drawable="@drawable/line_et_focus"/>
//當控制元件沒有被選中時觸發相應的樣式
<item android:drawable="@drawable/line_et_normal"/>
</selector>
樣式檔案line_et_focus.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- layer-list:將多個圖片或兩種效果按照順序層疊起來顯示,一個item包含一個顯示元素 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- shape自定義控制元件,android:shape="rectangle"形狀為矩形 -->
<shape android:shape="rectangle">
<solid android:color="@android:color/transparent" />
</shape>
</item>
<item
android:left="-2dip"
android:right="-2dip"
android:top="-2dip">
<shape>
<solid android:color="@android:color/transparent" />
<!-- stroke:描邊,EditText只有底邊 -->
<stroke
//邊框寬度為1dip
android:width="1dip"
android:color="@color/colorAccent"
android:dashGap="0dp"
android:dashWidth="0dip" />
</shape>
</item>
</layer-list>
樣式檔案line_et_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/transparent" />
</shape>
</item>
<item
android:left="-2dip"
android:right="-2dip"
android:top="-2dip">
<shape>
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dip"
android:color="@color/colorPrimary"
android:dashGap="0dp"
android:dashWidth="0dip" />
</shape>
</item>
</layer-list>