-
下拉列表
2009-08-17 04:44:29 -
Android自定义的下拉列表框控件
2017-10-20 13:49:40Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的: 这个时候只有自己动手...一、概述
Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求,
比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的:
这个时候只有自己动手写一个了。其实实现起来不算很难,
本文实现的方案是采用TextView +ImageView+PopupWindow的组合方案。
先来看看我们的自己写的控件效果图吧:(源码在文章下面最后给出哈!)
二、自定义下拉列表框控件的实现
1. 自定义控件用到的布局文件和资源:
结果框的布局页面:dropdownlist_view.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" android:orientation="horizontal" android:id="@+id/compound" android:background="@drawable/dropdown_bg_selector" > <TextView android:id="@+id/text" android:layout_width="250dp" android:layout_height="40dp" android:paddingLeft="10dp" android:text="文本文字" android:gravity="center_vertical" android:textSize="14sp" android:padding="5dp" android:singleLine="true" /> <ImageView android:id="@+id/btn" android:layout_width="30dp" android:layout_height="30dp" android:layout_toRightOf="@+id/text" android:src="@drawable/dropdown" android:padding="5dp" android:layout_centerVertical="true" android:gravity="center"/> </RelativeLayout>
下拉弹窗列表布局页面:dropdownlist_popupwindow.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:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="280dp" android:layout_height="wrap_content" android:divider="#666666" android:dividerHeight="1dp" ></ListView> </LinearLayout>
selector资源文件:
dropdown_list_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/> <item android:drawable="@color/dropdownlist_item"/> </selector>
dropdown_bg_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/> <item android:drawable="@color/dropdownlist_bg"/> </selector>
<?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" android:orientation="horizontal" android:id="@+id/compound" android:background="@drawable/dropdown_bg_selector" > <TextView android:id="@+id/text" android:layout_width="250dp" android:layout_height="40dp" android:paddingLeft="10dp" android:text="文本文字" android:gravity="center_vertical" android:textSize="14sp" android:padding="5dp" android:singleLine="true" /> <ImageView android:id="@+id/btn" android:layout_width="30dp" android:layout_height="30dp" android:layout_toRightOf="@+id/text" android:src="@drawable/dropdown" android:padding="5dp" android:layout_centerVertical="true" android:gravity="center"/> </RelativeLayout>
下拉弹窗列表布局页面:dropdownlist_popupwindow.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:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="280dp" android:layout_height="wrap_content" android:divider="#666666" android:dividerHeight="1dp" ></ListView> </LinearLayout>
selector资源文件:
dropdown_list_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/> <item android:drawable="@color/dropdownlist_item"/> </selector>
dropdown_bg_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/> <item android:drawable="@color/dropdownlist_bg"/> </selector>
2. 自定义下拉列表框控件类的实现:
我们采用了TextView+ImageView+PopupWindow的组合方案,所以我的自定义控件需要重写ViewGroup,由于我们已经知道了,布局方向为竖直方向,所以这里,
我直接继承LinearLayout来写这个控件。具体实现代码如下:
package com.czm.xcdropdownlistview; import java.util.ArrayList; import android.annotation.SuppressLint; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.PopupWindow; import android.widget.TextView; @SuppressLint("NewApi") /** * 下拉列表框控件 * @author caizhiming * */ public class XCDropDownListView extends LinearLayout{ private TextView editText; private ImageView imageView; private PopupWindow popupWindow = null; private ArrayList<String> dataList = new ArrayList<String>(); private View mView; public XCDropDownListView(Context context) { this(context,null); // TODO Auto-generated constructor stub } public XCDropDownListView(Context context, AttributeSet attrs) { this(context, attrs,0); // TODO Auto-generated constructor stub } public XCDropDownListView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub initView(); } public void initView(){ String infServie = Context.LAYOUT_INFLATER_SERVICE; LayoutInflater layoutInflater; layoutInflater = (LayoutInflater) getContext().getSystemService(infServie); View view = layoutInflater.inflate(R.layout.dropdownlist_view, this,true); editText= (TextView)findViewById(R.id.text); imageView = (ImageView)findViewById(R.id.btn); this.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if(popupWindow == null ){ showPopWindow(); }else{ closePopWindow(); } } }); } /** * 打开下拉列表弹窗 */ private void showPopWindow() { // 加载popupWindow的布局文件 String infServie = Context.LAYOUT_INFLATER_SERVICE; LayoutInflater layoutInflater; layoutInflater = (LayoutInflater) getContext().getSystemService(infServie); View contentView = layoutInflater.inflate(R.layout.dropdownlist_popupwindow, null,false); ListView listView = (ListView)contentView.findViewById(R.id.listView); listView.setAdapter(new XCDropDownListAdapter(getContext(), dataList)); popupWindow = new PopupWindow(contentView,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); popupWindow.setBackgroundDrawable(getResources().getDrawable(R.color.transparent)); popupWindow.setOutsideTouchable(true); popupWindow.showAsDropDown(this); } /** * 关闭下拉列表弹窗 */ private void closePopWindow(){ popupWindow.dismiss(); popupWindow = null; } /** * 设置数据 * @param list */ public void setItemsData(ArrayList<String> list){ dataList = list; editText.setText(list.get(0).toString()); } /** * 数据适配器 * @author caizhiming * */ class XCDropDownListAdapter extends BaseAdapter{ Context mContext; ArrayList<String> mData; LayoutInflater inflater; public XCDropDownListAdapter(Context ctx,ArrayList<String> data){ mContext = ctx; mData = data; inflater = LayoutInflater.from(mContext); } @Override public int getCount() { // TODO Auto-generated method stub return mData.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 position; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub // 自定义视图 ListItemView listItemView = null; if (convertView == null) { // 获取list_item布局文件的视图 convertView = inflater.inflate(R.layout.dropdown_list_item, null); listItemView = new ListItemView(); // 获取控件对象 listItemView.tv = (TextView) convertView .findViewById(R.id.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).toString()); final String text = mData.get(position).toString(); listItemView.layout.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub editText.setText(text); closePopWindow(); } }); return convertView; } } private static class ListItemView{ TextView tv; LinearLayout layout; } }
三、如何使用该自定义下拉列表框控件
使用该控件和使用普通的自带的控件一样,首先需要在布局文件中引用该控件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.czm.xcdropdownlistview.MainActivity" tools:ignore="MergeRootFrame" > <com.czm.xcdropdownlistview.XCDropDownListView android:id="@+id/drop_down_list_view" android:layout_marginTop="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> </RelativeLayout>
其次,就是在代码中使用该控件:
package com.czm.xcdropdownlistview; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; /** * 使用下拉列表框控件 示例 * @author caizhiming * */ public class MainActivity extends Activity { XCDropDownListView dropDownListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); dropDownListView = (XCDropDownListView)findViewById(R.id.drop_down_list_view); ArrayList<String> list = new ArrayList<String>(); for(int i = 0;i< 6;i++){ list.add("下拉列表项"+(i+1)); } dropDownListView.setItemsData(list); } }
对了,这个控件中,我没有实现点击item项回调接口,这个可能对有些写惯了回调的可能觉得少了写什么的感觉,有兴趣的你可以自己添加相关回调操作哈,这个大家应该都会把。
四、源码下载
最后给出源码的下载:
http://download.csdn.net/download/u013068887/10031736本文参考:
http://www.cnblogs.com/JczmDeveloper/p/4425010.html<?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" android:orientation="horizontal" android:id="@+id/compound" android:background="@drawable/dropdown_bg_selector" > <TextView android:id="@+id/text" android:layout_width="250dp" android:layout_height="40dp" android:paddingLeft="10dp" android:text="文本文字" android:gravity="center_vertical" android:textSize="14sp" android:padding="5dp" android:singleLine="true" /> <ImageView android:id="@+id/btn" android:layout_width="30dp" android:layout_height="30dp" android:layout_toRightOf="@+id/text" android:src="@drawable/dropdown" android:padding="5dp" android:layout_centerVertical="true" android:gravity="center"/> </RelativeLayout>
下拉弹窗列表布局页面:dropdownlist_popupwindow.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:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="280dp" android:layout_height="wrap_content" android:divider="#666666" android:dividerHeight="1dp" ></ListView> </LinearLayout>
selector资源文件:
dropdown_list_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/> <item android:drawable="@color/dropdownlist_item"/> </selector>
dropdown_bg_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/> <item android:drawable="@color/dropdownlist_bg"/> </selector>
-
bootstrap input 下拉树 下拉菜单 下拉列表
2017-01-11 15:12:47bootstrap input 下拉树 下拉菜单 下拉列表效果图:
如图,显示了整个树形图,加号可以收缩子节点,可以使用tag属性可以在后面显示存在几个子节点,我这边没有使用这个tag属性,这个input下拉树形图,需要导入bootstrap-treeview.js和bootstrap-treeview.css文件,这边附上下载链接http://download.csdn.net/detail/qq_34117825/9734853,也可以在网上搜索获得,流程就是先定一个input组件,然后再添加一个div默认隐藏,之后点击,显示树形下拉列表,不多说,上干货!
代码部分:
<input type="text" id="txt_departmentname" name="txt_departmentname" class="form-control" value="" οnclick="$('#treeview').show()" placeholder="分类名称"> <div id="treeview" style="display: none;">
var data1 = []; $(function() { $.ajax({ type : "post", url : "/receiverShow/findTree.action", success : function(data, status) { if (status == "success") { data1 = eval("[" + data + "]"); } }, error : function() { toastr.error('Error'); }, }); }); function buildDomTree() { var data = []; var root = "所有分类"; function walk(nodes, data) { if (!nodes) { return; } $.each(nodes, function(id, node) { var obj = { id : id, text : node.name != null ? node.name : root // tags : [ node.isLeaf == true ? node. // + ' child elements' // : '' ] }; if (node.isLeaf = true) { obj.nodes = []; walk(node.children, obj.nodes); } data.push(obj); }); } walk(data1, data); return data; } $("#txt_departmentname").click(function() { var options = { bootstrap2 : false, showTags : true, levels : 5, showCheckbox : true, checkedIcon : "glyphicon glyphicon-check", data : buildDomTree(), onNodeSelected : function(event, data) { $("#txt_departmentname").val(data.text); $("#treeview").hide(); } }; $('#treeview').treeview(options); });
-
java下拉列表
2020-03-16 20:45:08联动下拉列表是指一组“相互关联”的下拉列表,相邻的两个下拉列表是父子关系,改变父下拉列表的值,子下拉列表也随之改变。在页面中将显示一个三级联动下拉列表,在省份的下拉列表框中选择地区,在省级下拉列表中将...java“图形界面—下拉列表”
@java图形界面
1.用到了两个组件"JComboBo"+“JLabel”
2.本次还用到了“一维函数”+“二维函数”代码:
ItemEvent
联动下拉列表是指一组“相互关联”的下拉列表,相邻的两个下拉列表是父子关系,改变父下拉列表的值,子下拉列表也随之改变。在页面中将显示一个三级联动下拉列表,在省份的下拉列表框中选择地区,在省级下拉列表中将显示出该市的地级市信息,
public class 下拉列表 { //定义:界面组件 JFrame f; JComboBox jBox1; JComboBox jBox2; JLabel l1 ; JLabel l2 ; //函数 private String[] pri; private String[][]city; public static void main(String[] args) { //地区下拉列表 String[] pri = {"== 请选择 ==","重庆","福建","山东","上海","浙江"}; String[] [] city = { {"== 请选择 =="}, {"石家庄","山西","海南","湖北","丰都"}, {"江苏","陕西","广东","湖南","万州"}, {"四川","沈阳","广西","武汉","江西"} }; new 下拉列表(pri, city).showMe(); } public 下拉列表( String[] pri,String[][]city){ //界面设置 this.pri = pri; this.city= city; f = new JFrame("地区"); jBox1 = new JComboBox(pri); jBox2 = new JComboBox(city[0]); l1 = new JLabel("省份"); l2 = new JLabel("地区"); f.setLayout(new FlowLayout()); f.add(l1); f.add(jBox1); f.add(l2); f.add(jBox2); text(); } public void text() { //下拉设置 jBox1.addItemListener(new ItemListener() { @Override public void itemStateChanged(ItemEvent arg0) { // TODO Auto-generated method stub int index = jBox1.getSelectedIndex(); jBox2.removeAllItems(); for (int i = 0; i < city[index].length; i++) { jBox2.addItem(city[index][i]); } } }); } public void showMe() { f.setSize(400, 300); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }
地区是随便写的,可以自己去改。
效果图:
-
Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
2017-05-30 11:11:11然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件... -
NPOI XSSF 生成下拉列表 值没有限制 并可以生成多列下拉列表
2019-10-31 08:48:24网上很容易找到NPOI生成EXCEL及下拉列表;有些代码只能使用HSSF生成下拉列表且下拉列表的值有限制; 这里只列出核心代码;生成下拉列表的值没有限制; /// <summary> /// 列生成下拉列表的值 /// </... -
Bootstrap之按钮下拉列表与下拉列表的区别
2018-09-10 22:08:12我们学习了两个实现下拉列表的方法,一个是通过"dropdown",一个是通过下拉列表。 那么这两种方法有什么不同呢?首先我们从外观中判断两者的区别, 可以看出两者在外观上并没有区别, 接下来... -
poi导出下拉列表,解决下拉列表数据过多问题
2018-11-09 09:25:52// 传入下拉列表数组值,构造信息模板 public static Workbook generateExcel(String[]typeArrays) { Workbook wb = new XSSFWorkbook(); // 创建模板工作表 Sheet sheet = wb.createSheet("test");... -
DataGridView动态添加下拉列表DataGridViewComboBoxColumn并为下拉列表设置默认值
2017-12-28 17:00:00DataGridView动态添加下拉列表DataGridViewComboBoxColumn并为下拉列表设置默认值 private void Form3_Load(object sender, EventArgs e) { //为DataGridView动态添加下拉列表 ... -
Jquery获取下拉列表的值与原生js获取下拉列表的值
2019-04-16 19:14:09//获取选中当前下拉列表的文本内容 #sec 下拉列表设置的id名 var xlihtml = $("#sec option:selected").text(); //获取选中当前下拉列表的值 var xlihtml = $("#sec option:selected").valt(); //js获取 //获取当前... -
poi设置下拉列表超过一定数量时下拉列表没有内容
2018-07-17 08:19:04这个问题产生的根本原因在于excel对“手动插入下拉列表”项字数的限制,不能超过255个字节,超过了之后就不显示,具体解决方法可以查看笔者的另一篇文:https://blog.csdn.net/john1337/article/details/81074619... -
js下拉列表二级联动
2018-01-20 09:20:59学了JS也有一段时间了,今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表,第一列表是选择省份,... -
MFC中的combobox下拉列表添加了下拉项但是运行时不显示下拉列表内容。
2017-09-04 09:50:36下拉列表其实有两个高度,一个是下拉列表控件的高度,仔细看一下会发现这个高度是不可调节的, 另一个高度则是下拉列表的高度,这个高度默认是和下拉列表控件高度相同, 既然相同就很容易理解为什 -
HTML 下拉列表框
2019-04-28 16:30:23HTML 下拉列表框 -
JSP 下拉列表框、多行下拉列表框
2014-07-25 17:24:151、下拉列表框: 语法: -
select下拉列表
2017-11-12 21:24:35标签下拉列表实现 语文 数学 语文 实现效果如下: -
python中下拉列表框_PyQT5控件:下拉列表框(QComboBox)
2020-12-16 06:03:36QComboBox下拉列表框QComboBox以占用最少屏幕空间的方式向用户显示选项列表。它是一个选择控件,显示当前项目,并可以弹出可选项目列表。组合框可以是可编辑的,允许用户修改列表中的每个项目。QComboBox类属性... -
Labview下拉列表的问题:下拉列表怎么在刚打开labview的时候就显示第二项
2019-08-13 15:05:59Labview中用下拉列表,但是打开labivew的时候每次下拉列表都显示的是第一项,也就是序号是0的那一项 即使我把下拉列表中values是0的... -
Excel制作下拉列表
2020-07-21 20:12:49例如制作一个选择性别的下拉列表 ——首先添加表头:性别字段 ——选择第二行第一列并打开数据有效性面板 数据—数据有效性 ——选择序列选项 ——输入自定义的下拉列表选项(选项与选项之间用英文逗号... -
js 动态生成下拉列表 下拉列表级联
2012-02-02 14:17:46简单的动态生成下拉列表 并且 带有级联操作 根据父级节点的值来组织子级下拉列表的值 无标题文档 function changeF(fatherValue) { if(fatherValue!=null) { var s2 = document.... -
删除下拉列表
2019-03-31 18:18:08index:表示要删除的选项的索引值,若该索引值比下拉列表中的选项的最大值还大或者小于0,那该方法不会删除任何选项 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String..... -
下拉列表 问题
2015-07-01 07:00:14comboBox 的属性 codevlaue codename 我想对下拉列表的codevlue进行遍历 ,当codevalue=201 的时候 codename="" -
下拉列表框
2016-06-02 14:37:34由于项目的需要,需要用到一个下拉...自己简单地封装了一个下拉列表框的功能 首先简单介绍一下功能: 1.首先新建一个文件XDShowListView并继承UIView 2.当点击文本框时弹出下拉列表框供用户选择所要选择 的信息,当选中 -
动态生成下拉列表
2019-01-05 18:35:29使用DOM及诶动态生成select下拉列表 用数组保存下拉列表的数据内容 使用一个按钮控制加载下拉列表中的内容 原html代码 <html> <head> <title>动态生成下拉列表数据&... -
C# 下拉列表框
2017-02-09 21:47:54下拉列表框 ComboBox既是下拉列表 属性: Items属性:为下拉列表添加相应的项目,与列表框类似 DropDownStyle属性:控制组合框的外观和功能(此属性如果选择DropDownList则只可选择而不能再框中输入,若选择... -
selenium定位input下拉列表
2018-01-03 16:00:46网上有许多关于selenium定位select下拉列表的讲解,但是关于怎样定位input假下拉列表的文章比较少,下面来说一下我是怎么定位input下拉列表的 1、首先要展开下拉列表,否则是定位不到选项的(我的下拉列表是动态加载... -
下拉列表ListPopupWindow
2017-05-15 09:37:441、查看源码,会发现PopupMenu和Spinner内部都是使用ListPopupWindow实现下拉列表效果,所以ListPopupWindow是基础。 2、PopMenu的列表页面无法定制UI,只能显示光秃秃的文字;而ListPopupWindow和Spinner可以通过... -
js/jq点击下拉列表按钮,显示,点击其他地方(包括下拉按钮)隐藏下拉列表
2019-01-27 22:39:08当时想写一个这样的按钮不会写,纵观很多博客,要求不符合或者效果不能很好地实现出来,然后看了很多,找到了一个比较符合的,但是博主写的点击下拉列表按钮的时候,下拉列表不能隐藏,存在缺陷,故加以修正。... -
下拉列表框QComboBox
2019-08-01 23:57:58QComboBox是常用的下拉列表框。 方法 方法 描述 addItem() 添加一个下拉项 addItems() 从列表中添加下拉选项 Clear() 删除下拉选项集合中的所有选项 count() 返回下拉选项集合中的数量 currentText...