Android 自定义view 实现点击 展示下拉选项效果

思路:
使用PopWindow ,里面布局为listview,点击展示PopWindow,点击其他区域或者选择完成时 关闭PopWindow~

关键点:
1,实现头部视图(本文名为:pop_out_top_view)

2,实现底部下拉视图,使用popWindow,pop的布局使用listview(本文名为:pop_list_view)

3,实现listView的布局,使用adapter,结合listview的item(本文名为:pop_list_view_item),实现点击item回填数据与关闭PopWindow。

说明:
本Demo里数据展示是使用String~~~,实际开发回填的是文本,给后端需要传的应该是id,一般要是用对象~


public class DropDownListView extends LinearLayout {

    private TextView textView;
    private ImageView imageView;
    private PopupWindow popupWindow = null;
    private ArrayList<String> dataList = new ArrayList<String>();
    private View mView;

    public DropDownListView(Context context) {
        this(context, null);
    }

    public DropDownListView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DropDownListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    public void initView() {
        String infServie = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater layoutInflater;
        layoutInflater = (LayoutInflater) getContext().getSystemService(infServie);
        //头部View视图
        mView = layoutInflater.inflate(R.layout.pop_out_top_view, this, true);
        //显示选择文本
        textView = (TextView) findViewById(R.id.text);
        textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_aab9));
        imageView = (ImageView) findViewById(R.id.btn);
        //给整个头部设置点击事件
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //※非必要。隐藏输入法,为了保证在输入法展示时,显示popwindow不会出问题
                InputMethodManager inputManager = (InputMethodManager) textView.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
                inputManager.hideSoftInputFromWindow(textView.getWindowToken(), 0);
                if (popupWindow == null) {
                    showPopWindow();
                } else {
                    closePopWindow();
                }
            }
        });
    }


    /**
     * 下拉展示的pop
     * 打开下拉列表弹窗
     */
    private void showPopWindow() {
        // 加载popupWindow的布局文件
        String inflaterServie = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater layoutInflater;
        layoutInflater = (LayoutInflater) getContext().getSystemService(inflaterServie);
        //popWindow里面的布局Listview视图
        View view = layoutInflater.inflate(R.layout.pop_list_view, null, false);
        ListView listView = (ListView) view.findViewById(R.id.pop_listView);

        listView.setAdapter(new DropDownListAdapter(getContext(), dataList));

        /**
         * 在new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
         * 如果默认传入LayoutParams.WRAP_CONTENT,可能会显示的下拉view的宽度比头部要窄,
         * 为了保持一样宽度,使用this.getMeasuredWidth()
         */
        int widthPop = LayoutParams.WRAP_CONTENT;
        if(this.getMeasuredWidth() >0){
            widthPop = this.getMeasuredWidth();
        }

        popupWindow = new PopupWindow(view, widthPop, LayoutParams.WRAP_CONTENT);
//        popupWindow = new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_circle_info_bacacf_10));
        popupWindow.setOutsideTouchable(true);
        popupWindow.showAsDropDown(this);


    }


    /**
     * 关闭下拉列表弹窗
     */
    private void closePopWindow() {
        popupWindow.dismiss();
        popupWindow = null;
    }

    /**
     * 设置数据
     *
     * @param list
     */
    public void setItemsData(ArrayList<String> list) {
        dataList = list;

    }

    /**
     * 设置默认文案(例如:请选择~)
     *
     * @param text
     */
    public void setDefaultText(String text) {
        textView.setText(text);
        //默认文案一般要与已选回填的文案颜色区分,所以在设置时设为相对暗色值
        textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_aab9));
    }

    /**
     * 获取pop_out_top_view里 textview 的内容
     * @return
     */
    public String getSelectText() {
        String selectText = textView.getText().toString();
        return selectText;
    }

    /**
     * 数据适配器
     *
     * @author caizhiming
     */
    class DropDownListAdapter extends BaseAdapter {

        Context mContext;
        ArrayList<String> mData;
        LayoutInflater inflater;

        public DropDownListAdapter(Context ctx, ArrayList<String> data) {
            mContext = ctx;
            mData = data;
            inflater = LayoutInflater.from(mContext);
        }

        @Override
        public int getCount() {

            return mData.size();
        }

        @Override
        public Object getItem(int position) {

            return null;
        }

        @Override
        public long getItemId(int position) {

            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            // 自定义视图
            ListItemView listItemView = null;
            if (convertView == null) {
                // 获取list_item布局文件的视图
                convertView = inflater.inflate(R.layout.pop_list_view_item, null);
                listItemView = new ListItemView();
                // 获取控件对象
                listItemView.tv = (TextView) convertView.findViewById(R.id.item_tv);
                listItemView.layout = (LinearLayout) convertView.findViewById(R.id.layout_container);
                // 设置控件集到convertView
                convertView.setTag(listItemView);
            } else {
                listItemView = (ListItemView) convertView.getTag();
            }

            // 设置数据
            listItemView.tv.setText(mData.get(position));
            final String text = mData.get(position);
            listItemView.layout.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    textView.setText(text);
                    textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_0000));
                    //关闭popWindow
                    closePopWindow();
                }
            });
            return convertView;
        }

    }

    private static class ListItemView {
        TextView tv;
        LinearLayout layout;
    }

}
pop_out_top_view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_circle_login_e8eff2_10"
    android:orientation="horizontal"
    android:padding="15dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textColor="@color/se_0000"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/btn"
        android:layout_width="11dp"
        android:layout_height="7dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:layout_toRightOf="@+id/text"
        android:src="@drawable/icon_down" />
</LinearLayout>
pop_list_view:

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

    <ListView
        android:id="@+id/pop_listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="#BACACF"
        android:dividerHeight="0.5dp"
        ></ListView>

</LinearLayout>
pop_list_view_item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/item_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:padding="15dp"
        android:textColor="@color/se_0000"
        android:textSize="12sp" />

</LinearLayout>

使用时:
private val mSexList = arrayListOf<String>()

mSexList.add(resources.getString(R.string.man)) mSexList.add(resources.getString(R.string.woman))

sex_ddl.setDefaultText(resources.getString(R.string.unknow))

sex_ddl.setItemsData(mSexList)

//获取选中文案

sex_ddl.selectText~

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android下拉列表是一种常见的UI控件,它可以让用户从预定义的选项中选择一个选项下拉列表通常由两个部分组成:一个文本框和一个下拉箭头。当用户点击下拉箭头时,会弹出一个列表,用户可以从中选择一个选项下拉列表可以使用Spinner控件来实现。 要创建一个下拉列表,需要在XML布局文件中添加Spinner控件。可以使用android:entries属性来指定下拉列表中的选项,也可以使用适配器来动态地添加选项下拉列表的样式可以使用android:spinnerMode属性来指定,可以选择dropdown或dialog模式。 在Java代码中,可以使用适配器来为下拉列表提供数据。Android提供了多种适配器,其中最基本的是BaseAdapter。BaseAdapter是一个抽象类,需要继承并实现其中的方法来创建自定义适配器。在实现适配器时,需要重写以下方法:getCount()、getItem()、getItemId()和getView()。 getCount()方法返回适配器中的数据项数目,getItem()方法返回指定位置的数据项,getItemId()方法返回指定位置的数据项的ID,getView()方法返回一个View对象,用于显示指定位置的数据项。 下面是一个简单的示例代码,演示如何创建一个下拉列表和一个基本适配器BaseAdapter: ```java public class MainActivity extends AppCompatActivity { private Spinner mSpinner; private String[] mData = {"北京", "上海", "广州", "深圳"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSpinner = findViewById(R.id.sp_dropdown); MyAdapter adapter = new MyAdapter(); mSpinner.setAdapter(adapter); } private class MyAdapter extends BaseAdapter { @Override public int getCount() { return mData.length; } @Override public Object getItem(int position) { return mData[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_icon, parent, false); } TextView textView = convertView.findViewById(R.id.tv_name); textView.setText(mData[position]); return convertView; } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值