Android复合组件自定义View(1)-带清除按钮的输入框
- 阿里云 > 教程中心 > android教程 > Android复合组件自定义View(1)-带清除按钮的输入框
- Android复合组件自定义View(1)-带清除按钮的输入框
- 发表文章
- 摘要：效果图先来个简单的例子,带清除文本按钮的输入框,效果图:效果图attrs的属性文件<?xmlversion="1.0"encoding="utf-8"?><resources><attrname="mHint"format="string"/><attrname="mText"format="string"/>
-
效果图
先来个简单的例子,带清除文本按钮的输入框,效果图:
效果图
attrs的属性文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="mHint" format="string" />
<attr name="mText" format="string" />
<attr name="mTextSize" format="dimension" />
<attr name="mTextColor" format="color" />
<declare-styleable name="mEditTextWithClsBtn">
<attr name="mHint" />
<attr name="mText" />
<attr name="mTextSize" />
<attr name="mTextColor" />
</declare-styleable>
</resources>
代码
因为,涉及到布局,所以我们就用一个LinearLayout来作为父容器,只复写3个构造器
view
public class EditTextWithClsBtn extends LinearLayout implements View.OnClickListener {
/**
* 两个控件
*/
private EditText mEditText;
private ImageButton mClearBtn;
private String mHint;
private String mText;
private int mTextSize;
private int mTextColor;
/**
*一些关于EditText的属性,可自定制
*/
}
2个构造器
public EditTextWithClsBtn(Context context) {
this(context, null);
}
public EditTextWithClsBtn(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
主要构造器
public EditTextWithClsBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.mEditTextWithClsBtn, defStyleAttr, 0);
int n = ta.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = ta.getIndex(i);
switch (attr) {
case R.styleable.mEditTextWithClsBtn_mHint:
mHint = ta.getString(attr);
break;
case R.styleable.mEditTextWithClsBtn_mText:
mText = ta.getString(attr);
break;
case R.styleable.mEditTextWithClsBtn_mTextColor:
mTextColor = ta.getColor(attr, 0);
break;
case R.styleable.mEditTextWithClsBtn_mTextSize:
mTextSize = (int) ta.getDimension(attr, 16);
break;
}
}
ta.recycle();
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER_VERTICAL);
mEditText = new EditText(context);
mClearBtn = new ImageButton(context);
mEditText.setTextSize(mTextSize);
mEditText.setTextColor(mTextColor);
mEditText.setHint(mHint);
mEditText.setText(mText);
mEditText.setSingleLine();
/**
* 设置一些用户自定义的属性
*/
mClearBtn.setOnClickListener(this);
mClearBtn.setBackgroundResource(R.drawable.clear_btn);
mClearBtn.setScaleType(ImageView.ScaleType.CENTER_CROP);
LayoutParams leftParams = new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1); //左边的EditText占据按钮以外的宽度
LayoutParams rightParams = new LayoutParams(48, 48); //清除按钮大小给它48
addView(mEditText, leftParams);
addView(mClearBtn, rightParams);
/**
* 添加两个控件到LinearLayout里面
*/
}
@Override
public void onClick(View v) {
mEditText.setText("");
}
公布接口
public void setText(String text) {
mEditText.setText(text);
}
public void addTextChangedListener(TextWatcher listener) {
mEditText.addTextChangedListener(listener);
}
public void setHint(String hint) {
mEditText.setHint(hint);
}
整体代码
package com.example.august.customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
/**
* Created by August on 16/4/9.
*/
public class EditTextWithClsBtn extends LinearLayout implements View.OnClickListener {
/**
* 两个控件
*/
private EditText mEditText;
private ImageButton mClearBtn;
private String mHint;
private String mText;
private int mTextSize;
private int mTextColor;
/**
*一些关于EditText的属性,可自定制
*/
public EditTextWithClsBtn(Context context) {
this(context, null);
}
public EditTextWithClsBtn(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public EditTextWithClsBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.mEditTextWithClsBtn, defStyleAttr, 0);
int n = ta.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = ta.getIndex(i);
switch (attr) {
case R.styleable.mEditTextWithClsBtn_mHint:
mHint = ta.getString(attr);
break;
case R.styleable.mEditTextWithClsBtn_mText:
mText = ta.getString(attr);
break;
case R.styleable.mEditTextWithClsBtn_mTextColor:
mTextColor = ta.getColor(attr, 0);
break;
case R.styleable.mEditTextWithClsBtn_mTextSize:
mTextSize = (int) ta.getDimension(attr, 16);
break;
}
}
ta.recycle();
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER_VERTICAL);
mEditText = new EditText(context);
mClearBtn = new ImageButton(context);
mEditText.setTextSize(mTextSize);
mEditText.setTextColor(mTextColor);
mEditText.setHint(mHint);
mEditText.setText(mText);
mEditText.setSingleLine();
/**
* 设置一些用户自定义的属性
*/
mClearBtn.setOnClickListener(this); //设置点击事件回调
mClearBtn.setBackgroundResource(R.drawable.clear_btn);
mClearBtn.setScaleType(ImageView.ScaleType.CENTER_CROP);
LayoutParams leftParams = new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1); //左边的EditText占据按钮以外的宽度
LayoutParams rightParams = new LayoutParams(48, 48); //清除按钮大小给它48
addView(mEditText, leftParams);
addView(mClearBtn, rightParams);
/**
* 添加两个控件到LinearLayout里面
*/
}
@Override
public void onClick(View v) {
mEditText.setText("");
}
public void setText(String text) {
mEditText.setText(text);
}
public void addTextChangedListener(TextWatcher listener) {
mEditText.addTextChangedListener(listener);
}
public void setHint(String hint) {
mEditText.setHint(hint);
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.august.customview.EditTextWithClsBtn
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mHint="输入点东西吧"
app:mText="哈哈哈"
app:mTextColor="#FF0000"
app:mTextSize="20sp" />
</RelativeLayout>