【0057】自定义控件-2-组合已有控件实现自定义控件-下拉选择框

1.下拉选择框的效果

2.下拉框的布局

【布局分析】在同一个EditText右侧存在一个ImageButton;

 ImageButton需要响应点击事件；

 

【注意】在ImageButton的位置需要与EditText对齐；但是还需要填充满右侧的点击区域，使用padding选项，否则点击ImageButton的某些区域无法响应；；

3.响应点击事件的popUpWindow

4.listView的生成

5.popWindow的布局

【注意】在delete按钮需要添加padding属性，增加点击区域的有效区域；

 

6.【设置popWindow距离EditText的位置】因此在设置值的时候设置了负值，紧贴位置；

7.去掉分割线，增加listView的背景

7.1增加的背景图片

7.2去掉的分割线

 

7.3 为下拉的item增加点击事件，将item中的内容复制到edit框中

7.3.1 增加监听事件

7.3.2【细节1】

imageButton会抢掉item的点击事件的焦点

 

【修改内容】块焦点的响应就是会响应不同的区域块中的点击事件

 7.3.3【细节2】popUpWindow默认不可以响应点击事件

7.3.4【注意】

【修改】

8.点击外部域使得popUpWindow隐藏掉

 9.源码

【MainActivity源码】

package com.itheima74.popupwindow;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
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.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener, OnItemClickListener{

    private ListView listView;
    private EditText et_input;
    private ArrayList<String> datas;
    private PopupWindow popupWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        findViewById(R.id.ib_dropdown).setOnClickListener(this);
        
        et_input = (EditText) findViewById(R.id.et_input);
    }

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

    private void showPopupWindow() {
        initListView();
        
        // 显示下拉选择框
        popupWindow = new PopupWindow(listView, et_input.getWidth(), 300);
        
        // 设置点击外部区域, 自动隐藏
        popupWindow.setOutsideTouchable(true); // 外部可触摸
        popupWindow.setBackgroundDrawable(new BitmapDrawable()); // 设置空的背景, 响应点击事件
        
        popupWindow.setFocusable(true); //设置可获取焦点
        
        // 显示在指定控件下
        popupWindow.showAsDropDown(et_input, 0, -5);
    }

    // 初始化要显示的内容
    private void initListView() {
        listView = new ListView(this);
        listView.setDividerHeight(0);
        listView.setBackgroundResource(R.drawable.listview_background);
        listView.setOnItemClickListener(this);
        
        datas = new ArrayList<String>();
        // 创建一些数据
        for (int i = 0; i < 30; i++) {
            datas.add((10000 + i) + "");
        }
        
        listView.setAdapter(new MyAdapter());
    }
    
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        System.out.println("onItemClick: " + position);
        String string = datas.get(position);
        et_input.setText(string); // 设置文本
        
        popupWindow.dismiss(); // 消失了
    }
    
    class MyAdapter extends BaseAdapter {

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

        @Override
        public Object getItem(int position) {
            return datas.get(position);
        }

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

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            View view;
            if(convertView == null){
                view = View.inflate(parent.getContext(), R.layout.item_number, null);
            }else {
                view = convertView;
            }
            
            TextView tv_number = (TextView) view.findViewById(R.id.tv_number);
            tv_number.setText(datas.get(position));
            
            view.findViewById(R.id.ib_delete).setOnClickListener(new OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    datas.remove(position);
                    notifyDataSetChanged();
                    
                    if(datas.size() == 0){
                        // 如果删除的是最后一条, 隐藏popupwindow
                        popupWindow.dismiss();
                    }
                }
            });
            return view;
        }
        
    }


    
}

【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" >

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="wrap_content" >

        <EditText
            android:id="@+id/et_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageButton
            android:id="@+id/ib_dropdown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_alignBottom="@id/et_input"
            android:background="@null"
            android:padding="5dp"
            android:src="@drawable/down_arrow" />
    </RelativeLayout>

</RelativeLayout>

 

【item_number.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="match_parent"
    android:padding="3dp"
    android:descendantFocusability="blocksDescendants"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user" />

    <TextView
        android:id="@+id/tv_number"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginLeft="10dp"
        android:text="12306" />

    <ImageButton
        android:id="@+id/ib_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:background="@null"
        android:src="@drawable/delete" />

</LinearLayout>