本文介绍如何在Android应用中创建一个自定义的EditText组件，该组件具备使用自定义字体和内嵌清除按钮的功能，当输入框内容变化时，清除按钮会相应显示或隐藏。
C’mon, admit it, you’ve always wanted this. Have you ever felt that text clearing in your android application on EditTexts feels… wrong ?
So, what do we want to achive?
Plain and simple, a TextView, based on the same principle as the previous TextView tutorial, with custom fonts (from assets folder) and with a Clear button.
Proceed with caution…
Of course, if you get a request to use custom fonts in you app, this does not apply only to TextViews, but to all items like Buttons, List Items and EditTexts.
First we need to create our own custom control, extending EditText and adding the following:
- an image resource for the Clear button
- an TextChangedListener so we only show the Clear button when the EditText contains something
- method for setting our custom TypeFace
- TouchListener so we detect if the user taped on the Clear button area.
Our project will contain a few things:
- Main activity: AndroidTutorialActivity.java
- Our custom control: MyEditText
- Custom fonts in assets folder
- Clear_button_image resource for the button
- Main.xml as the main layout.
I’ll just post the entire code with comments and I’m sure you’ll understand it in a second:
publicclassMyEditTextextendsEditText{//The image we are going to use for the Clear buttonprivateDrawable imgCloseButton = getResources().getDrawable(R.drawable.clear_button_image);publicMyEditText(Context context) {super(context);init();}publicMyEditText(Context context, AttributeSet attrs,intdefStyle) {super(context, attrs, defStyle);init();}publicMyEditText(Context context, AttributeSet attrs) {super(context, attrs);init();}voidinit() {// Set bounds of the Clear button so it will look okimgCloseButton.setBounds(0,0, imgCloseButton.getIntrinsicWidth(), imgCloseButton.getIntrinsicHeight());// There may be initial text in the field, so we may need to display the buttonhandleClearButton();//if the Close image is displayed and the user remove his finger from the button, clear it. Otherwise do nothingthis.setOnTouchListener(newOnTouchListener() {@OverridepublicbooleanonTouch(View v, MotionEvent event) {MyEditText et = MyEditText.this;if(et.getCompoundDrawables()[2] ==null)returnfalse;if(event.getAction() != MotionEvent.ACTION_UP)returnfalse;if(event.getX() > et.getWidth() - et.getPaddingRight() - imgCloseButton.getIntrinsicWidth()) {et.setText("");MyEditText.this.handleClearButton();}returnfalse;}});//if text changes, take care of the buttonthis.addTextChangedListener(newTextWatcher() {@OverridepublicvoidonTextChanged(CharSequence s,intstart,intbefore,intcount) {MyEditText.this.handleClearButton();}@OverridepublicvoidafterTextChanged(Editable arg0) {}@OverridepublicvoidbeforeTextChanged(CharSequence s,intstart,intcount,intafter) {}});}//intercept Typeface change and set it with our custom fontpublicvoidsetTypeface(Typeface tf,intstyle) {if(style == Typeface.BOLD) {super.setTypeface(Typeface.createFromAsset(getContext().getAssets(),"fonts/Vegur-B 0.602.otf"));}else{super.setTypeface(Typeface.createFromAsset(getContext().getAssets(),"fonts/Vegur-R 0.602.otf"));}}voidhandleClearButton() {if(this.getText().toString().equals("")){// add the clear buttonthis.setCompoundDrawables(this.getCompoundDrawables()[0],this.getCompoundDrawables()[1],null,this.getCompoundDrawables()[3]);}else{//remove clear buttonthis.setCompoundDrawables(this.getCompoundDrawables()[0],this.getCompoundDrawables()[1], imgCloseButton,this.getCompoundDrawables()[3]);}}}
Don’t forget to add it in your main layout
android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><com.alinberce.app.MyEditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="My cool edit text"/></LinearLayout>
Run it and see the result:
扫一扫
3619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
