可输入的下拉框

最近项目中需要用到可输入的下拉框，Android提供的Spinner当然是不能满足要求的，gitHub上搜一下也有几个别人写好的控件可用。大体上看了以下，不是特别麻烦，这里就自己写一个吧。

这个可输入的下拉框其实是比较简单的一个控件，只需要一个EditText和ListPopupWindow就能实现了。下面直接上代码来实现下面这样的可输入下拉框：

editableSpinner.png

布局文件(editable_spinner.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <EditText
        android:id="@+id/et_input"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:paddingLeft="5dp"
        android:layout_height="match_parent"
        android:textCursorDrawable="@null"
        android:maxLines="1"
        android:inputType="text"
        android:background="@drawable/stroke_grey"/>

    <ImageButton
        android:id="@+id/img_btn_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"/>
</LinearLayout>

下面是我们自定义控件的代码(EditableSpinner.java)：

public class EditableSpinner extends LinearLayout implements AdapterView.OnItemClickListener {

    private ImageButton mImgBtnDown;
    private EditText mEtInput;
    private ListPopupWindow mListPopupWindow;
    private OnItemClickListener mOnItemClickListener;
    private ArrayAdapter mArrayAdapter;

    public interface OnItemClickListener {
        void onItemClick(int position);
    }

    public EditableSpinner(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.editable_spinner,this);

        mImgBtnDown = findViewById(R.id.img_btn_down);
        mEtInput = findViewById(R.id.et_input);
        mListPopupWindow = new ListPopupWindow(context);

        TypedArray attrArr = context.obtainStyledAttributes(attrs, R.styleable.EditableSpinner);
        Drawable downImage = attrArr.getDrawable(R.styleable.EditableSpinner_downBtnImage);
        float textSize = attrArr.getDimension(R.styleable.EditableSpinner_textSize, 14);
        int downBtnWidth = (int) attrArr.getDimension(R.styleable.EditableSpinner_downBtnWidth, DpAPxUtils.dp2px(context, 40));
        int textColor = attrArr.getColor(R.styleable.EditableSpinner_textColor, 0x000000);
        int downBtnBgColor = attrArr.getColor(R.styleable.EditableSpinner_downBtnBackground, 0x00ffffff);

        mImgBtnDown.setImageDrawable(downImage);
        mImgBtnDown.setBackgroundColor(downBtnBgColor);
        LinearLayout.LayoutParams lp = (LayoutParams) mImgBtnDown.getLayoutParams();
        lp.width = downBtnWidth;
        mImgBtnDown.setLayoutParams(lp);

        mImgBtnDown.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListPopupWindow.show();
            }
        });

        mEtInput.setTextSize(DpAPxUtils.px2dp(context, textSize));
        mEtInput.setTextColor(textColor);
    }

    public EditableSpinner setAdapter(ArrayAdapter<String> adapter) {

        mArrayAdapter = adapter;

        mListPopupWindow.setAdapter(adapter);
        mListPopupWindow.setAnchorView(mEtInput);
        mListPopupWindow.setModal(true);
        mListPopupWindow.setOnItemClickListener(this);
        return this;
    }

    public EditableSpinner setOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
        return this;
    }

    public String getSelectedItem() {
        return mEtInput.getText().toString();
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        mListPopupWindow.dismiss();
        mEtInput.setText((CharSequence) mArrayAdapter.getItem(position));
        if (mOnItemClickListener != null) {
            mOnItemClickListener.onItemClick(position);
        }
    }
}

最后是控件用到的属性定义(attrs.xml)：
这里暂时给外部提供下拉框右侧按钮的一些属性和下拉框中EditText的一些属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditableSpinner">
        <attr name="downBtnImage" format="reference"/>
        <attr name="downBtnBackground" format="color"/>
        <attr name="downBtnWidth" format="dimension"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

这样自定义控件就完成了，使用起来也算比较方便的：

<test.com.view.EditableSpinner
            android:id="@+id/editable_spinner"
            android:layout_marginTop="@dimen/margin_5"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            app:textSize="@dimen/font_size_normal"
            app:textColor="@color/colorBlack"
            app:downBtnImage="@drawable/arrow_down"
            app:downBtnBackground="@color/colorAccent"/>

mOrderAdapter = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_spinner_dropdown_item,mOrders);
        mEditableSpinner.setAdapter(mOrderAdapter)
                .setOnItemClickListener(new EditableSpinner.OnItemClickListener() {
                    @Override
                    public void onItemClick(int position) {
                            // .....
                    }
                });