1. 程式人生 > >實現EditText選中時底邊框改變顏色

實現EditText選中時底邊框改變顏色

(一)使用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>