Android进阶学习-复合组件自定义View(1)

先来个简单的例子,带清除文本按钮的输入框,效果图:

    

    1.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>

    2.因为,涉及到布局,所以我们就用一个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("");
    }

3.另外我们可以对外公布一些EditText常用的方法

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

4.布局文件:

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

转载于:https://my.oschina.net/august1996/blog/655756