Android UI編程之自訂控制項初步（下）——CustomEditText，android自訂ui

Android UI編程之自訂控制項初步（下）——CustomEditText，android自訂ui
概述：

    基於對上一篇部落格《Android UI編程之自訂控制項初步（上）——ImageButton》的學習，我們對自訂控制項也有了一個初步的認識。那現在我們可以再試著對EditText進行一些自訂的學習。以下有兩種方式的自訂UI編程分享給大家。由於在上一篇部落格中，有對自訂控制項的一些詳細地說明，在本篇部落格中，如果你還有一些沒搞懂的地方，可以參見上一篇部落格《Android UI編程之自訂控制項初步（上）——ImageButton》進行學習。

樣本：帶刪除按鈕的輸入框展示：

 

基本雛形搭建：

    大家可以從上面的上看到兩個東西：左側的EditText和右側的圖片（這裡是一個Button）。我們在EditText中的輸入為空白的時候，不顯示右側的清除按鈕。一旦EditText中輸入了內容的時候，右側的清除按鈕就會顯示出來。

外觀設計和功能添加：1.外觀設計

在我們選好了骨架之後，剩下的就是穿衣服了。現在我們來看看怎麼給它穿衣服。以下是範例程式碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal" >    <EditText        android:id="@+id/input_edittext"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:layout_marginTop="5dp"        android:layout_marginBottom="5dp"        android:background="@null"        android:layout_toLeftOf="@+id/clear_button"        android:ems="10" >    </EditText>    <Button        android:id="@+id/clear_button"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_centerVertical="true"        android:background="@drawable/clear_button"        android:layout_marginRight="10dp"        android:layout_alignParentRight="true"        android:visibility="invisible" /></RelativeLayout>

2.功能添加

功能的添加是要在Java代碼中去實現的，因為Java代碼可以動態去調節功能，而在xml代碼中卻寫不出動態調節功能的效果。Java代碼中實現各功能如下：

監聽文字框功能：

public void addTextChangedListener() {        mInput.addTextChangedListener(new TextWatcher() {                        @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                int len = mInput.getText().toString().length();                if (len > 0) {                    mClear.setVisibility(View.VISIBLE);                } else {                    mClear.setVisibility(View.INVISIBLE);                }            }                        @Override            public void beforeTextChanged(CharSequence s, int start, int count,                    int after) {            }                        @Override            public void afterTextChanged(Editable s) {            }        });    }

清除文本功能：

private void setClearEvent() {        mClear.setOnClickListener(new OnClickListener() {                        @Override            public void onClick(View v) {                mInput.setText("");            }        });    }

流量分析：1.xml代碼中的使用

代碼如下：

<com.demo.customview.clearedittext.widgets.ClearEditText        android:id="@+id/activity_main_clear_edittext"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" />

2.Java代碼中的使用

ClearEditText clearEditText = (ClearEditText) findViewById(R.id.activity_main_clear_edittext);clearEditText.setHint("輸入文本進行測試");clearEditText.addTextChangedListener();

樣本：在EditText插入表情展示：

自訂類實現：

這邊就不去長篇累牘介紹了。因為內容很單。Java實現代碼如下：

public class SmiliesEditText extends EditText {    public SmiliesEditText(Context context) {        super(context);    }    public SmiliesEditText(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    public void insertIcon(int id) {        // SpannableString連續的字串，長度不可變，同時可以附加一些object;可變的話使用SpannableStringBuilder，參考sdk文檔        SpannableString ss = new SpannableString(getText().toString() + "[smile]");        // 得到要顯示圖片的資源        Drawable d = getResources().getDrawable(id);        // 設定高度        d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());        // 跨度底部應與周圍文本的基準對齊        ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);        // 附加圖片        ss.setSpan(span, getText().length(),                getText().length() + "[smile]".length(),                Spannable.SPAN_INCLUSIVE_EXCLUSIVE);        setText(ss);    }}

流量分析：1.xml代碼中的使用

<com.demo.customview.clearedittext.widgets.SmiliesEditText        android:id="@+id/activity_main_similies_edittext"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/activity_main_clear_edittext"        android:singleLine="true"        android:text="Hello smile"        android:hint="你可以輸入表情哦"        android:textSize="14sp"        android:layout_marginTop="20dp" />

2.Java代碼中的使用

SmiliesEditText et=(SmiliesEditText)findViewById(R.id.activity_main_similies_edittext);        et.insertIcon(R.drawable.smile);        System.out.println(et.getText().toString());

原始碼下載：

http://download.csdn.net/detail/u013761665/8410583