自定义控件（视图）2期笔记04：自定义控件之使用系统控件（下拉菜单框）

1. 下拉菜单效果图如下：

在EditText的右边放置一个小箭头的图片，点击图片，在EditText的下方弹出一个popupWindow，并对popupWindow进行一些设置即得到想要的效果。

​​

2. 下面通过一个案例演示上面的效果：

（1）新建一个Android工程，命名为" 下拉菜单 "，同时也有美工提供的图片，如下：

​​

（2）首先我们设置一下布局文件activity_main.xml，如下：

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  2     xmlns:tools="http://schemas.android.com/tools"  3     android:layout_width="match_parent"  4     android:layout_height="match_parent"  5     tools:context="com.himi.spinnerdemo.MainActivity" >  6   7     <EditText  8         android:layout_width="200dp"  9         android:layout_height="wrap_content" 10         android:layout_centerHorizontal="true" 11         android:layout_marginTop="10dp" 12         android:text="@string/hello_world" 13         android:id="@+id/input" /> 14     <ImageView  15         android:layout_width="wrap_content" 16         android:layout_height="wrap_content" 17         android:id="@+id/down_arrow" 18         android:background="@drawable/down_arrow" 19         android:layout_alignRight="@id/input" 20         android:layout_marginTop="10dp"/> 21  22 </RelativeLayout>

布局效果如下：

​​

（3）MainActivity.java，如下：

1 package com.himi.spinnerdemo;   2    3 import java.util.ArrayList;   4 import java.util.List;   5    6 import android.app.Activity;   7 import android.os.Bundle;   8 import android.view.View;   9 import android.view.View.OnClickListener;  10 import android.view.ViewGroup;  11 import android.widget.BaseAdapter;  12 import android.widget.EditText;  13 import android.widget.ImageView;  14 import android.widget.ListView;  15 import android.widget.PopupWindow;  16 import android.widget.TextView;  17   18 public class MainActivity extends Activity {  19     private EditText input;  20     private ImageView downArrow;  21   22     private List<String> msgList;  23     private PopupWindow  popWin;  24     private ListView listView;  25     @Override  26     protected void onCreate(Bundle savedInstanceState) {  27         super.onCreate(savedInstanceState);  28         setContentView(R.layout.activity_main);  29           30         input = (EditText) findViewById(R.id.input);  31         downArrow = (ImageView) findViewById(R.id.down_arrow);  32         msgList = new ArrayList<String>();  33         //初始化msgList  34         for(int i =0; i<20; i++) {  35             msgList.add("1000000000"+i);  36         }  37           38         initListView();  39           40         downArrow.setOnClickListener(new OnClickListener() {  41               42             public void onClick(View v) {  43                 //定义popupWindow  44                 popWin = new PopupWindow(MainActivity.this);  45                 popWin.setWidth(input.getWidth());  46                 popWin.setHeight(200);  47                 popWin.setContentView(listView);//为popWindow填充内容  48                 popWin.setOutsideTouchable(true);//点击popWin以外的区域，自动关闭popWin  49                 popWin.showAsDropDown(input, 0, 0);//设置弹出窗口,显式的位置  50                   51             }  52         });  53           54       55     }  56     private void initListView() {  57         listView = new ListView(this);  58         listView.setBackgroundResource(R.drawable.listview_background);  59         listView.setDivider(null);//设置条目之间的分隔线为null  60         listView.setVerticalScrollBarEnabled(false);//关闭竖直方向的滑动条  61         listView.setAdapter(new MyListAdapter());  62           63     }  64       65     private class ViewHolder{  66         TextView tv_msg;  67         ImageView delete;  68     }  69       70     private class MyListAdapter extends BaseAdapter {  71   72         public int getCount() {  73             // TODO 自动生成的方法存根  74             return msgList.size();//不能是设置为20  75         }  76   77         public View getView(final int position, View convertView, ViewGroup parent) {  78             ViewHolder holder;  79             if (convertView == null) {  80                 convertView = View.inflate(getApplicationContext(),  81                         R.layout.list_item, null);  82                 holder = new ViewHolder();  83                 holder.delete = (ImageView) convertView.findViewById(R.id.delete);  84                 holder.tv_msg = (TextView) convertView.findViewById(R.id.tv_list_item);  85                 convertView.setTag(holder);          86             } else {  87                 holder = (ViewHolder)convertView.getTag();  88                 holder.tv_msg.setText(msgList.get(position));  89                 holder.delete.setOnClickListener(new OnClickListener() {  90                       91                     public void onClick(View v) {  92                         // 删除对应的条目，实际是就是删除数据源的数据，然后让Adapter刷新一下  93                         msgList.remove(position);  94                         //刷新ListView  95                         MyListAdapter.this.notifyDataSetChanged();  96                           97                     }  98                 });  99                 convertView.setOnClickListener(new OnClickListener() { 100  101                     public void onClick(View v) { 102                         // 设置输入框 103                         input.setText(msgList.get(position)); 104                         if (popWin != null && popWin.isShowing()) { 105                             popWin.dismiss(); 106                         } 107                     } 108                 }); 109             } 110             return convertView; 111         } 112  113         public Object getItem(int position) { 114             // TODO 自动生成的方法存根 115             return position; 116         } 117  118         public long getItemId(int position) { 119             // TODO 自动生成的方法存根 120             return position; 121         } 122  123     } 124      125      126      127 }

其中ListView的item样式布局是list_item.xml，如下：

1 <?xml version="1.0" encoding="utf-8"?>  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3     android:layout_width="match_parent"  4     android:layout_height="wrap_content"  5     android:gravity="center_vertical"  6     android:orientation="horizontal" >  7   8     <ImageView  9         android:layout_width="wrap_content" 10         android:layout_height="wrap_content" 11         android:background="@drawable/user" /> 12     <!-- layout_weight默认是0，这里显式设置TextView权重为1.其他两个ImageView为默认权重为0 --> 13  14     <TextView 15         android:id="@+id/tv_list_item" 16         android:layout_width="match_parent" 17         android:layout_height="wrap_content" 18         android:layout_weight="1" 19         android:gravity="center_horizontal" 20         android:text="@string/hello_world" /> 21  22     <ImageView 23         android:id="@+id/delete" 24         android:layout_width="wrap_content" 25         android:layout_height="wrap_content" 26         android:background="@drawable/delete" /> 27  28 </LinearLayout>

list_item.xml的布局效果如下：

​​

（4）这里不需要权限设置（不用担心AndroidMainfest.xml），布署程序到模拟器上，如下：

​​