android ui自定义控件,Android UI编程之自定义控件初步（下）——CustomEditText

概述：

基于对上一篇博客《Android UI编程之自定义控件初步(上)——ImageButton》的学习，我们对自定义控件也有了一个初步的认识。那现在我们可以再试着对EditText进行一些自定义的学习。以下有两种方式的自定义UI编程分享给大家。

示例：带删除按钮的输入框

效果图展示：

 

基本雏形搭建：

大家可以从上面的效果图上看到两个东西：左侧的EditText和右侧的图片(这里是一个Button)。我们在EditText中的输入为空的时候，不显示右侧的清除按钮。一旦EditText中输入了内容的时候，右侧的清除按钮就会显示出来。

外观设计和功能添加：

1.外观设计

在我们选好了骨架之后，剩下的就是穿衣服了。现在我们来看看怎么给它穿衣服。以下是示例代码：

android:layout_height="match_parent"

android:orientation="horizontal" >

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" >

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" />

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

代码如下：

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

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());

源代码下载：