自定义控件之组合式控件 下拉选择框

自定义控件之组合式控件 下拉选择框

零 组合控件下载

本文源码下载

一 自定义控件思路

1. 点击下拉按钮，弹出下拉列表（PopupWindow + ListView）
2. 点击列表选项，在编辑框中显示内容
3. 点击删除按钮，删除列表选项

二 MainActivity核心代码

public class MainActivity extends AppCompatActivity {

    private SpinnerView mSpinnerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSpinnerView = findViewById(R.id.spinnerView);

        List<String> mDataList = new ArrayList<String>();
        for (int i = 0; i < 30; i++) {
            mDataList.add("传入数据"+String.valueOf(i));
        }
        mSpinnerView.setData(mDataList);
    }
}

三 activity_main.xml核心代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context="com.vistatecah.myspinnerview.MainActivity">

    <com.vistatecah.myspinnerview.SpinnerView
        android:id="@+id/spinnerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

四 SpinnerView核心代码

package com.vistatecah.myspinnerview;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

/*
 *  创建者:   KX
 *  创建时间:  2018/12/8 17:16
 *  描述：    TODO
 */
public class SpinnerView extends RelativeLayout {

    /** 右侧三角箭头 */
    private ImageView mArrow;
    /** 输入框 */
    private EditText mEdit;
    /** 点击三角箭头后弹出的PopupWindow */
    private PopupWindow mPopupWindow;
    /** 存放下拉选择框数据的集合 */
    private List<String> mDataList;

    public SpinnerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        //填充布局
        LayoutInflater.from(getContext()).inflate(R.layout.view_spinner, this);
        //初始化集合，向集合里添加数据
        //找出布局里的控件
        initView();
        //初始化事件
        initEvent();
    }

    /**向集合里添加0~29共30个数据*/
    protected void setData(List dataList) {
        mDataList = dataList;
      /*  mDataList = new ArrayList<String>();
        for (int i = 0; i < 30; i++) {
            mDataList.add("测试数据"+String.valueOf(i));
        }*/
    }

    /**初始化控件*/
    private void initView() {
        mArrow = (ImageView) findViewById(R.id.arrow);
        mEdit = (EditText) findViewById(R.id.edit);
    }

    /**对三角按钮做点击监听，点击后调用showPopupWindow()方法*/
    private void initEvent() {
        mArrow.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                showPopupWindow();
            }
        });
    }


    /**显示下拉选择框的PopupWindow*/
    protected void showPopupWindow() {
        //只创建一次popupwindow
        if (mPopupWindow == null) {
            int width = mEdit.getWidth();
            int height = 800;
            mPopupWindow = new PopupWindow(width, height);

            //构造popupWindow的内容控件：一个ListView
            ListView listView = new ListView(getContext());
            listView.setAdapter(mAdapter);
            listView.setBackgroundResource(R.drawable.listview_background);
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> parent, View view,
                                        int position, long id) {
                    //2. 点击列表选项，在编辑框中显示内容
                    String data = mDataList.get(position);
                    mEdit.setText(data);
                    //设置光标到末尾
                    mEdit.setSelection(data.length());
                    mPopupWindow.dismiss();
                }
            });

            //把ListView设置成为popupWindow的内容控件
            mPopupWindow.setContentView(listView);

            //以下三行是固定写法，为了实现点击popupWindow外部关闭popupWindow的功能
            mPopupWindow.setOutsideTouchable(true);
            mPopupWindow.setBackgroundDrawable(new ColorDrawable());
            mPopupWindow.setFocusable(true);
        }

        //弹出PopupWindow并且显示在mEdit下方
        mPopupWindow.showAsDropDown(mEdit);
    }


    /**ListView的Adapter*/
    private BaseAdapter mAdapter = new BaseAdapter() {
        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            ViewHolder vh = null;
            if (convertView == null) {
                convertView = LayoutInflater.from(getContext())
                        .inflate(R.layout.list_item, null);
                vh = new ViewHolder(convertView);
                convertView.setTag(vh);
            } else {
                vh = (ViewHolder) convertView.getTag();
            }

            final String data = mDataList.get(position);
            vh.mId.setText(data);
            vh.mDelete.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    //将点击位置的数据移除，并且刷新列表
                    mDataList.remove(data);
                    notifyDataSetChanged();
                    Toast.makeText(getContext(),"删除数据"+position,Toast.LENGTH_SHORT).show();
                }
            });

            return convertView;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public int getCount() {
            return mDataList.size();
        }
    };


    public class ViewHolder {
        TextView mId;
        ImageView mDelete;

        public ViewHolder(View root) {
            mId = (TextView) root.findViewById(R.id.user_id);
            mDelete = (ImageView) root.findViewById(R.id.delete);
        }
    }
}

五 view_spinner.xml核心代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context=".MainActivity" >

    <EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/edit_bg" />

    <ImageView
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/down_arrow"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>


</RelativeLayout>

六 list_item.xml核心代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp" >

    <ImageView
        android:id="@+id/icon_user"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher_round"/>

    <TextView
        android:id="@+id/user_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/icon_user"
        android:layout_centerVertical="true"
        android:paddingLeft="8dp"
        android:text="110"/>

    <ImageView
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/delete"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:paddingRight="8dp"/>


</RelativeLayout>

七 控件背景edit_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="8dp"/>

    <stroke android:color="@color/colorAccent"
            android:width="1dp"/>

    <padding android:left="8dp"
             android:top="8dp"
             android:right="8dp"
             android:bottom="8dp"/>

</shape>

八 组合式自定义控件优点：

1. 继承layout
2. 实现布局和功能
3. 自定义控件优点:模块化思想，提高代码的复用率（M处调用）

九 本文源码下载

本文源码下载

十 尾言

本文如有错误或不当之处,欢迎读者留言斧正,互相交流学习,博主不胜感激.联系邮箱593584960@qq.com