Spinner 自定義組合控件之下拉選擇框

項目概述

下拉選擇框主要是通過在EditText 下用PopupWindow 動態顯示ListView 控件來實現的。下拉選擇框可以方便用戶的輸入效率，以此提升用戶體驗。點擊EditText 控件右側的倒三角形彈出如下可選項，點擊
可選項，那么內容將自動填充到EditText 控件中，如圖1-6 所示。另外，點擊下拉框中條目右邊的紅色叉號可以刪除當前的條目，效果圖如圖1-7 所示。

下拉選擇框UI

下拉框的布局文件為activity_main.xml，這里的布局僅僅是在EditText 的右側添加了一個倒三角圖標。具體的代碼如文件【1-6】所示：【文件1-6】Res/layout/activity_main.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="match_parent"><RelativeLayout android:layout_width="200dp"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginTop="150dp"><EditText android:id="@+id/et_content"android:layout_width="match_parent"android:layout_height="wrap_content"></EditText><ImageView android:id="@+id/iv_drop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:src="@drawable/down_arrow"/></RelativeLayout> </RelativeLayout>

點擊倒三角彈出的ListView 條目布局文件為list_item.xml，具體代碼如文件【1-7】所示：【文件1-7】res/layout/list_item

<?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:descendantFocusability="blocksDescendants"android:gravity="center_vertical"android:orientation="horizontal"android:padding="5dp"><ImageView android:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/user"/><TextView android:id="@+id/tv_content"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"/><ImageView android:id="@+id/iv_delete"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/delete"/> </LinearLayout>

下拉選擇框業務邏輯實現

下拉選擇框MainActivity 界面，具體代碼如文件【1-8】所示：【文件1-8】com/itheima/dropdown/MainActivity

package com.github.spinner;import android.app.Activity; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; 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.TextView;import java.util.ArrayList;/*** ============================================================* Copyright：${TODO}有限公司版權所有 (c) 2017* Author： AllenIverson* Email： 815712739@qq.com* GitHub： https://github.com/JackChen1999* 博客： http://blog.csdn.net/axi295309066* 微博： AndroidDeveloper* <p>* Project_Name：Spinner* Package_Name：com.github.spinner* Version：1.0* time：2016/2/28 17:18* des ：自定義組合控件，Spinner下拉選擇框控件* gitVersion：$Rev$* updateAuthor：$Author$* updateDate：$Date$* updateDes：${TODO}* ============================================================*/public class MainActivity extends Activity {private ListView lvList;private EditText etContent;private ArrayList<String> mList;private PopupWindow mPopup;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ImageView ivDrop = (ImageView) findViewById(R.id.iv_drop);etContent = (EditText) findViewById(R.id.et_content);ivDrop.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {showDropDown();}});initView();}//初始化listview 作為pw 的視圖private void initView() {lvList = new ListView(this);// 初始化listview 數據mList = new ArrayList<String>();for (int i = 0; i < 200; i++) {mList.add("aaabbbccc" + i);}lvList.setAdapter(new MyAdapter());lvList.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {etContent.setText(mList.get(position));mPopup.dismiss();}});}// 下拉框的顯示protected void showDropDown() {if (mPopup == null) {/*** 第一個參數lv:PopupWindow 顯示的內容視圖* 第二個參數et_number.getWidth()：PopupWindow 的寬度* 第三個參數200：PopupWindow 的高度*/mPopup = new PopupWindow(lvList, etContent.getWidth(), 200, true);mPopup.setFocusable(true); //設置pw 可以響應焦點mPopup.setOutsideTouchable(true); //允許點擊pw 以外的地方，讓pw 隱藏//要讓setOutsideTouchable(true)有效，必須給PopupWindow 設置背景mPopup.setBackgroundDrawable(new BitmapDrawable());}//設置PopupWindow 顯示的位置mPopup.showAsDropDown(etContent);}//ListView 的適配器class MyAdapter extends BaseAdapter {@Overridepublic int getCount() {return mList.size();}@Overridepublic String getItem(int position) {return mList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(final int position, View convertView,ViewGroup parent) {ViewHolder holder;if (convertView == null) {convertView = View.inflate(getApplicationContext(),R.layout.list_item, null);holder = new ViewHolder();holder.tvContent = (TextView) convertView.findViewById(R.id.tv_content);holder.ivDelete = (ImageView) convertView.findViewById(R.id.iv_delete);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}holder.tvContent.setText(getItem(position));holder.ivDelete.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mList.remove(position);MyAdapter.this.notifyDataSetChanged();}});return convertView;}}static class ViewHolder {public TextView tvContent;public ImageView ivDelete;} }

知識點總結

1．PopupWindow 獲取焦點能力較差，要讓它內容獲得焦點，需要通過setFocusable(true)方法來獲得焦點，見MainActivity.java 第47 行。

2．PopupWindow 可以通過setOutsideTouchable(true)方法來實現點擊除PopupWindow 以外的地方，讓PopupWindow 銷毀，但必須同時設置背景才有效，見MainActivity.java 第48~50 行。

3．當listview 無法響應onItemClick 點擊事件時，有可能是listview 的條目布局中存在搶占焦點能力強的button、imagebutton 等控件，可以在布局中設置android:descendantFocusability=”blocksDescendants”屬性，以按
塊區域的形式響應點擊事件，來解決bug，見listview_item.xml 第7 行。

代碼：https://github.com/JackChen1999/Spinner

總結

以上是生活随笔為你收集整理的自定义组合控件：下拉选择框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。