自定义控件-下拉菜单

下拉选择框主要是通过在EditText下用PopupWindow动态显示ListView控件来实现的。

下拉选择框可以方便用户的输入效率，以此提升用户体验。实现后的效果如下图所示。

点击EditText控件右侧的倒三角形弹出如下可选项，点击可选项，那么内容将自动填充到EditText控件中。

 

布局：

activity_main.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="match_parent"
    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/et_text"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        />
    <ImageView 
        android:id="@+id/iv_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/down_arrow"
        android:layout_alignRight="@id/et_text"
        />

</RelativeLayout>

 

item_listview.xml

<?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="horizontal" 
    android:gravity="center_vertical"
    android:padding="5dp"
    >
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user"
        />
    <TextView 
        android:id="@+id/tv_content"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ohohohoho"
        android:textSize="18sp"
        />
    <ImageView 
        android:id="@+id/iv_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/delete"
        />
</LinearLayout>

 

 

package com.example.xialakuang;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity implements OnClickListener {

    private ImageView iv_arrow;
    private PopupWindow popupWindow;
    private EditText et;
    private ListView listView;
    List<String> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_arrow = (ImageView) findViewById(R.id.iv_arrow);
        et = (EditText) findViewById(R.id.et_text);
        iv_arrow.setOnClickListener(this);

        list = new ArrayList<String>();
        for (int i = 0; i < 20; i++) {
            list.add(i + "number");
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.iv_arrow:
            // 弹出下拉框
            if (popupWindow == null) {
                popupWindow = new PopupWindow(this);
                popupWindow.setWidth(et.getWidth());
                popupWindow.setHeight(200);

                listView = new ListView(this);
                listView.setAdapter(new MyAdapter());
                // 将ListView的分割线高度设置为0，其实保留着也行，可能比较难看就是
                listView.setDividerHeight(0);
                // 将ListView的滚动条隐藏
                listView.setVerticalScrollBarEnabled(false);
                listView.setBackgroundResource(R.drawable.listview_background);
                ;
                listView.setOnItemClickListener(new OnItemClickListener() {

                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                        et.setText(list.get(position));
                        // 下拉框消失
                        popupWindow.dismiss();
                    }
                });
                popupWindow.setContentView(listView);
                // 设置popWindow外面的区域可以触摸
                popupWindow.setOutsideTouchable(true);
                // 设置popWindow可以得到焦点
                popupWindow.setFocusable(true);
            }
            // 显示下拉框
            // anchor:锚，设置下拉框显示的位置
            // xoff, yoff:相当于锚的坐标
            popupWindow.showAsDropDown(et, 0, 0);
            break;

        }
    }

    class MyAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return 0;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            View view;
            if (convertView == null) {
                view = View.inflate(MainActivity.this, R.layout.item_listview, null);
            } else {
                view = convertView;
            }
            TextView textView = (TextView) view.findViewById(R.id.tv_content);
            textView.setText(list.get(position));
            // 设置点击侦听，删除选中的条目
            ImageView imageView = (ImageView) view.findViewById(R.id.iv_delete);
            imageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    list.remove(position);
                    notifyDataSetChanged();
                }
            });
            return view;
        }

    }

}