Android UI编程之自定义控件初步(下)——CustomEditText
概述:
基于对上一篇博客《Android UI编程之自定义控件初步(上)——ImageButton》的学习,我们对自定义控件也有了一个初步的认识。那现在我们可以再试着对EditText进行一些自定义的学习。以下有两种方式的自定义UI编程分享给大家。
示例:带删除按钮的输入框
效果图展示:
基本雏形搭建:
大家可以从上面的效果图上看到两个东西:左侧的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());
源代码下载:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。