關於Android EditText使用中，如果我要在EditText前面加上一些標識符，就好比下圖：
看到這個圖，你一定有很多想法來實現這樣子的效果。
我第一直覺就是用LinearLayout來實現，在一個LinearLayout中放一個TextView在左邊，然后在右邊放一個沒有邊邊框的EditText，實現起來比較簡單，順便把我自己的代碼也貼在這兒，記錄一下，以后查看起來也比較的方便：
方法一：
首先在你自己的布局文件中寫下當前布局的內容,我寫在activity_main.xml文件中，（PS：Android中的xml文件名只能用小寫字母）
代碼如下：
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/edittext_background" android:orientation="horizontal" >
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="@string/dollar" />
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/none_border_background" android:text="@string/hello_world"/> </LinearLayout>
|
在上面的代碼中，使用了兩個background文件，他們分別是圖示效果中的外邊框和沒有邊框的背景文件，他們放在Drawable文件夾下面：edittext_background.xml 和 none_border_background.xml
代碼如下：
edittext_background.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> <stroke android:width="1dp" android:color="#ff6600" /> <solid android:color="@android:color/white" /> </shape> |
none_border_background.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <stroke android:width="0dp" /> <solid android:color="@android:color/white" /> </shape> |
運行效果和上圖中的一致，可是在寫好了的時候，我發現了一個問題，如果我們的要在EditText選中的時候（即獲取到焦點的時候），要改變邊框的顏色，這個時候就有點麻煩了，但是也是可以實現的，就是在監聽EditText的焦點事件。
為了體現出他的效果，我們還得建立一個選中過后的EditText的背景，暫時就叫它edittext_focus_background.xml
代碼如下 所示：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> <stroke android:width="1dp" android:color="#000000" /> <solid android:color="@android:color/white" /> </shape> |
他與edittext_background.xml差不了好多，只是將他的外邊框的顏色改了一下（PS：如果你覺得他丑，你可以把他設計得好看一點）。
還有，我們需要給EditText加一個ID，就命名為liner_et
android:id="@+id/liner_et" |
還要給我們的LinearLayout添加一個ID，叫做liner
在代碼中添加它的事件監聽，就這樣就可以搞定。
java代碼如下：
EditText linearEt = (EditText) this.findViewById(R.id.liner_et); final LinearLayout linearLayout = (LinearLayout) this .findViewById(R.id.linear); linearEt.setOnFocusChangeListener(new OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (hasFocus) { Log.v(TAG, "hasFocus:" + hasFocus); linearLayout.setBackgroundResource(R.drawable.edittext_focus_background); } else { Log.v(TAG, "hasFoucs:" + hasFocus); linearLayout.setBackgroundResource(R.drawable.edittext_background); } } }); |
這樣實現起來可以，但是感覺有點略顯臃腫。View和Controller沒有那么分得開，下面我們看第二種實現方法
方法二：
這個方法是用的FrameLayout來實現的，但在這兒之前，我們要先寫一個selector,將EditText的沒有獲取焦點和獲取焦點的背景用一個xml來控制。
edittext_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_focused="true" android:drawable="@drawable/edittext_focus_background"></item> <item android:drawable="@drawable/edittext_background"></item> </selector> |
緊接着我們就可以寫我們的布局了
<FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" >
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/edittext_selector" android:paddingLeft="15dp" android:text="@string/hello_world"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:text="@string/dollar"/> </FrameLayout> |
就這樣很簡單的就實現了。
未完待續，如果您有什么更好的方法，不另賜教。謝謝。本人郵箱：lovecluo@nightweaver.org