Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android UI編程之自定義控件初步(下)——CustomEditText

Android UI編程之自定義控件初步(下)——CustomEditText

編輯:關於Android編程

概述:

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

 

示例:帶刪除按鈕的輸入框

效果圖展示:

data-cke-saved-src=https://www.android5.online/Android/UploadFiles_5356/201702/2017022316074289.png data-cke-saved-src=https://www.android5.online/Android/UploadFiles_5356/201702/2017022316074341.png

 

基本雛形搭建:

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

 

外觀設計和功能添加:

1.外觀設計

在我們選好了骨架之後,剩下的就是穿衣服了。現在我們來看看怎麼給它穿衣服。以下是示例代碼:

 

 

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代碼中的使用

代碼如下:

 


 

2.Java代碼中的使用

 

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

 

示例:在EditText插入表情

效果圖展示:

 

data-cke-saved-src=https://www.android5.online/Android/UploadFiles_5356/201702/2017022316074367.png

 

自定義類實現:

這邊就不去長篇累牍介紹了。因為內容很單。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代碼中的使用

 


 

2.Java代碼中的使用

 

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

 

 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved