Android中EditText樣式修改 聚焦光標、背景


  在Android開發中,根據項目的需求,需要定制一些特殊的樣式,例如:使用EditText時,聚焦時的背景及光標圖片使用自定義而非android系統默認的。這兩天,在項目中涉及此需求,現記錄如下:

  首先,說明靈感來自於http://bbs.csdn.net/topics/391491663中的評論,謝謝!另外,若想了解更多EditText屬性,可參考:http://blog.csdn.net/qq_15128547/article/details/50947041

默認情況下:

<EditText                                            
            android:id="@+id/editText"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:gravity="left"
            android:hint="hint"
           />

默認運行效果如下:

觀察效果發現,默認情況下,聚焦背景藍色、光標黑色、選擇下方是藍色圖片(即圖中的textSelectHandle)

現將上述三項改為自定義,需要下述三個屬性:

android:background        背景

android:textCursorDrawable   光標

android:textSelectHandle    聚焦選擇圖標

設置如下:

<EditText
            android:id="@+id/editText"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:gravity="left"
            android:hint="hint"
            android:background="@drawable/edit_text_bg"
            android:textCursorDrawable="@drawable/edit_cursor"
            android:textSelectHandle="@drawable/edit_select_handle" />

設置后運行效果如下:

下面,分別描述對應樣式圖片:

edit_text_bg:自定義背景
edit_cursor:光標
edit_select_handle:聚焦選擇下方圖標

上述三個,均使用自定義drawable,具體代碼如下:
edit_text_bg.xml:

 
          
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <inset xmlns:android="http://schemas.android.com/apk/res/android"
 3        >
 4     <selector>
 5         <item android:state_enabled="false">
 6             <nine-patch android:src="@drawable/edittext_thin"
 7                 android:tint="@color/n_text_default_color"                            
 8                 />                                                <!--tint:着色器  例:當前edittext_src是黑色的線條,而顯示時,由於使用了tint,重新設置了顏色,因此,就會顯示設置的線條顏色  -->
 9         </item>
10         <item android:state_pressed="false" android:state_focused="false">
11             <nine-patch android:src="@drawable/edittext_thin"
12                 android:tint="@color/n_text_default_color" />
13         </item>
14         <item>
15             <nine-patch android:src="@drawable/edittext_thin"
16                 android:tint="@color/n_text_focus_color" />
17         </item>
18     </selector>
19 </inset>
View Code
 
          

 

 

 

edit_cursor.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    
    <size android:width="2dp" />
    
    <solid android:color="@color/n_text_focus_color" />

</shape>

edit_select_handle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <size android:width="0dp" />            <!-- 實際不顯示,該圖片的作用僅是占位,因直接設置android:textSelectHandle="@null"運行時出錯,當然根據具體情況,可設置成一張圖片png等 -->

</shape>

整個修改涉及的代碼如上,但需要注意一下事項:

1、若是僅某個EditText需要使用特殊樣式則直接在當前EditText中設置屬性即可;但為了可擴展性,建議寫在styles.xml中,以后在需要的EditText中引用該樣式即可,即:

<EditText
...
style="@style/EditTextStyle"
...
/>

 

2、若整個項目均統一風格,則在AndroidManifest.xml中的<application>標簽中,加入android:theme="@style/AppTheme",其中AppTheme中加入以下屬性即可:

<style name="AppTheme" parent="@style/AppBaseTheme">
    ...
    <item name="android:editTextStyle">@style/EditTextStyle</item>
    ...
</style>

 

3、關於EditTextStyle的樣式如下:

<!-- EditTextStyle  EditText樣式設置:背景、光標、選中下方圖標 -->  
    <style  name="EditTextStyle" parent="android:Widget.Material.Light.EditText">       
       <item name="android:background">@drawable/edit_text_bg</item>
       <item name="android:textCursorDrawable">@drawable/edit_cursor</item>
       <item name="android:textSelectHandle">@drawable/edit_select_handle</item>
    </style >   

<!-- 關於上述的parent="android:Widget.Material.Light.EditText",需要根據自己當前主題Theme設置 ;其實也沒多大差別,查看源碼發現最終的都是parent="Widget.EditText" -->

--------------------------補充以下,另外一張圖,選擇文本時,出現的圖標:

android同樣提供了相應的屬性,在此不再贅述:

android:textSelectHandleLeft="@drawable/edit_select_left"      //
android:textSelectHandleRight="@drawable/edit_select_right"     //
View Code

 

疑問:在寫代碼時,用到hint,但是,起初運行時,並未顯示 ,多次修改也不行,最后,很之前的一個界面對比,發現當前Activity沒有設置Theme,於是就設置了系統的Theme,結果就可以了,不知道問什么?知道的小伙伴,麻煩告知:

<style name="AppBaseTheme" parent="android:Theme.Light">       
    </style>

    <style name="AppTheme" parent="@style/AppBaseTheme"></style>

此文僅是拋磚引玉,關於EditText屬性還很多,大家可以測試,有什么問題,歡迎交流!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM