一、前言
 
下面代码简单的展示了动态添加、删除ListView里面的Item内容，不过是在OnItemClickListener里面的onItemClick中实现的，代码详情如下展示。
 
二、代码
 
 
简单的布局文件
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listview_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
 
 
Java代码部分
 
package com.example.listview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

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

public class MainActivity extends AppCompatActivity {
    private static final String LOG_TAG = "MainActivity";

    private static final String[] mListData = {"太阳", "水星", "金星", "地球", "火星", "木星", "土星", "天王星", "海王星", "谷神星", "冥王星", "鸟神星", "妊神星", "阋神星"};

    private ListView mListView = null;
    private ArrayAdapter<String> mAdapter = null;
    private List mList = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        /* 注意： 一定要将String[]转成List类型，否则不能动态增加和删除Item */
        mList = new ArrayList<>(Arrays.asList(mListData));

        /* 创建适配器实例 */
        mAdapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, mList);

        /* 获取ListView布局 */
        mListView = findViewById(R.id.listview_test);

        /* Sets the data behind this ListView */
        mListView.setAdapter(mAdapter);

        /* 设置监听 */
        mListView.setOnItemClickListener(new ItemSelectedListener());
    }

    private class ItemSelectedListener implements AdapterView.OnItemClickListener {

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            /* 获取Item内容 */
            String itemStr = mAdapter.getItem(position);
            Log.d(LOG_TAG, "onItemClick, Item: " + itemStr);

            /* 移除Item */
            mAdapter.remove(itemStr);

            /* 新添加Item */
            mAdapter.add("New Item: " + itemStr);
        }
    }
}
 
 
三、注意事项
 
 
一定要将String[]转成List类型，否则不能动态增加和删除Item。 代码片段： mList = new ArrayList<>(Arrays.asList(mListData));
 
 
ArrayAdapter常见的使用方法
 
        mAdapter.clear();               // 清空整个Item
        mAdapter.remove(String obj);    // 移除名字为obj的Item
        mAdapter.add(String obj);       // 添加名字为obj的Item
        mAdapter.getItem(int postion);  // 根据位置获取Item的名称
 

LinearLayout提供了几个方法，用作动态添加View特别好用；
可以添加View、删除View、删除指定位置View、删除全部View；
看代码：
public class MainActivity extends AppCompatActivity {

    private final String TAG = MainActivity.class.getSimpleName();

    LinearLayout ll;
    private LayoutInflater mInflater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mInflater = LayoutInflater.from(this);
        ll = findViewById(R.id.ll);
        findViewById(R.id.btn1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "add", Toast.LENGTH_SHORT).show();
                ll.addView(View.inflate(MainActivity.this, R.layout.item, null)); //添加一个View
            }
        });
        findViewById(R.id.btn2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "delect", Toast.LENGTH_SHORT).show();
                ll.removeViewAt(1); //删除指定位置的View
//                ll.removeView(view); //删除指定View
            }
        });
        findViewById(R.id.btn3).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "delectAll", Toast.LENGTH_SHORT).show();
                ll.removeAllViews();  //删除全部View
            }
        });
    }
}
Xml布局文件：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/ll"
        >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/btn1"
            android:text="添加"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn2"
            android:text="删除"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn3"
            android:text="清空"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    </LinearLayout>
</ScrollView>
添加的View：
<?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">

    <TextView
        android:id="@+id/tv"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

</LinearLayout>

1.动态插入组件
 
将需要插入到页面的元素定义成一个组件，再进行操作。
 参考：https://jintang.github.io/2018/03/27/vue%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6/
 
2.页面直接添加
 
页面结构代码：
 
<ul>
  <li v-for="(item, index) in itemArr" :key="index">
    <el-input v-model="item.content"></el-input>
  </li>
</ul>
<button @click="deleteEle()">删除</button>
<button @click="addEle">+添加元素</button>
 
data初始化：
 
data() {
    return {
        itemArr: [{
        content: ''
      }]
    }
}
 
方法：
 
// 点击添加
addEle() {
  this.itemArr.push({
    content: ''
  })
},
// 删除一项
deleteEle(index) {
  this.itemArr.splice(index, 1);
},
 
关注微博、微信公众号搜索前端小木，让我们一起学习成长。

layuiExtend
 
项目介绍
 
最近做一个档案系统，发现字段超多，查询页面布局不是很好弄，于是就想着干脆写一个动态添加条件的ui插件。
 
因为是用的layui框架写的系统，所以就直接基于layui编写了个插件。写篇文章总结介绍下这个插件。
 使用简单，可以不用学习layui，只要把相关js引入了，也可以在项目中单独使用。
 插件源码：去码云下载 或者 去layui官网下载
 体验地址1：动态添加条件查询Demo
 体验地址2：带后台的查询demo
 高级查询组件dynamicCondition升级为v2.0.0版本（一）
 高级查询组件dynamicCondition升级为v2.0.0版本（二）
 高级查询组件下拉框联动（三）
 
日期：2018-12-06
版本：v2.0.0
1.支持扩展编辑器。可以实现下拉框级联，下拉树，单选组等ui控件。 
2.ops，allowDel，最大化最小化等支持。
 
效果预览：
 1.省份和城市可以实现联动效果。
 2.可以自定义查询条件编辑器。如下拉树，单选按钮组。
 
 
日期：2018-11-20
版本：v1.0.5
新增功能：查询条件加一个“x”,点击后删除一个条件刷新一下页面
 
日期：2018-11-14
版本：v1.0.4
dynamicCondition插件升级版本1.0.4
1.新增初始条件设置功能。
2.优化查询条件显示。
3.支持下拉框范围查询
4.可以设置show属性为false，隐藏动态条件字段
5.优化下拉框编辑器。templet可以是select元素Id。
	例#sex对应的可以是<select id="sex">
	不一定非得用script包裹起来。
 
动态添加条件界面
 
 点击查询生成请求json对象requestData
 
 demo界面
 
 示例代码：
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>动态条件插件demo</title>
		<link  href="../../static/layui/css/layui.css" media="all" rel="stylesheet">
		<script src="../../static/layui/layui.js"></script>
	<style>
	</style>
	</head>
	<body >
		<div id="simple-query" style="margin-left:50px;margin-top:20px;">
			<a class="layui-btn " onclick="simpleQuery()"  >简单查询</a><br/>
			<br/>
			<div id="msg">查询条件：</div>		
			<br/>
			<div>请求参数json：</div>		
			<div id="result1" style="word-break:break-all;height:60px;width:500px;padding-left:50px;"></div>
		</div>
		<div id="complex-query" style="margin-left:50px;margin-top:20px;">
			<a class="layui-btn " onclick="complexQuery()"  >复杂查询</a><br/>
			<br/>
			<div id="msg2">查询条件：</div>
			<br/>
			<div>请求参数json：</div>	
			<div id="result2" style="word-break:break-all;height:60px;width:500px;padding-left:50px;"></div>		
			
		</div>
	<ul id="dcDemo" style="display:none;">
		<li field="id" title="id" edit="text" layVerify="number"></li>
		<li field="name" title="姓名" edit="text"></li>
		<li field="sex" title="性别" edit="select" templet="#selectSex"></li>
		<li field="birthday" title="出生日期" edit="date"></li>
		<li field="phone" title="手机号码" edit="text" layVerify="phone"></li>
		<li field="email" title="邮箱" edit="text" layVerify="email"></li>
	</ul>
	<script type="text/html" id="selectSex">
		<select>
		    <option value=""></option>
		    <option value="1">男</option>
		    <option value="0">女</option>
		</select>
	</script>
			
<script type="text/javascript">
//声明一个全局变量dynamicCondition
var dynamicCondition;
layui.config({
  base: '../../static/layui-extend/' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
}).extend({
	dynamicCondition: 'dynamicCondition/dynamicCondition'
}).use(['table','form','dynamicCondition'], function(){
	var $=layui.$, table = layui.table, form = layui.table;
	dynamicCondition = layui.dynamicCondition;
	
	var dataFields = [{field:"id",title:"id",edit:"text",layVerify:"number"}
		,{field:"name",title:"姓名",edit:"text"}
		,{field:"sex",title:"性别",edit:"select", templet:"#selectSex"}
		,{field:"birthday",title:"出生日期",edit:"date"}
		,{field:"phone",title:"手机号码",edit:"text",layVerify:"phone"}
		,{field:"email",title:"邮箱",layVerify:"email"}
		];
	//初始化动态条件查询实例
	var dcInstance = dynamicCondition.create({fields : dataFields //通过json对象传入
	  	//,tableId:"listTable"  //静态页面不好演示table数据表格更新
	  	,type:"simple"  //type:"simple"/"complex"
		,conditionTextId:"#msg"
		,queryCallBack:function(requestData){
			$("#result1").html(JSON.stringify(requestData));
		}
	});
	dynamicCondition.create({elem:"#dcDemo" //通过容器选择器传入，也可以$("#dcDemo"),或者document.getElementById("dcDemo")
	  	//,tableId:"listTable" //静态页面不好演示table数据表格更新
	  	,type:"complex"  //type:"simple"/"complex"
		,conditionTextId:"#msg2"
		//当有多个动态条件查询实例时，定义instanceName属性可以通过dynamicCondition.getInstance(instanceName)获取对应的实例
		,instanceName:  "complexInstance"  
		,queryCallBack:function(requestData){
			$("#result2").html(JSON.stringify(requestData));
		}
	});
	
});
/**简单查询*/
function simpleQuery(){
	dynamicCondition.getInstance().open();
}
/**复杂查询*/
function complexQuery(){
	dynamicCondition.getInstance("complexInstance").open();
}
</script>
	</body>
</html>
 
数据字典
 
dynamicCondition对象api
 
成员
类型
说明
示例
version
String
插件版本号
1.0.1
cacheInstance
Object
缓存create方法创建的实例。见备注
{}
getInstance
function
从cacheInstance中获取实例
getInstance()
create
function
创建实例成功后会返回并缓存到cacheInstance。
create(config)
备注：
 getInstance()等价于getInstance(‘instanceName’)
 缓存实例：cacheInstance[config.instanceName] = create(config)
 
dynamicCondition.create(config)中的config配置项说明
 
参数
类型
必须项
默认
说明
elem
String/Jq/DOM
否
例: “#dcDemo”， 或者 $("#dcDemo"),或者document.getElementById(“dcDemo”)
fields
Object
否
参考下面备注fields例子。
fieldsJsonStr
String
否
就是fields转换为字符串格式输入。
type
String
否
complex
取值：‘simple’/‘complex’.默认为复杂模式。
instanceName
String
否
instanceName
当一个页面只创建一个实例时，可以不用配置该参数。
queryCallBack
function
否
点击查询的回调函数，会传入一个requestData参数进去。参数格式见备注
tableId
String
否
对应table.render(config)的config.id参数。点击查询后会根据查询条件自动重载表格。
conditionTextId
String/Jq/DOM
否
例: “#msg”， 或者 $("#msg"),或者document.getElementById(“msg”)
sortObj
Object
否
结合tableId使用排序。例子：{field:‘name’,type:‘desc’}
requestDataType
String
否
array
2.0.1版本新增。 取值：'array '/‘json’
displayModel
String
否
popup
2.0.2版本新增。取值：'popup '/'unpopup ’
备注：
 elem/fields/fieldsJsonStr 三个中必须选一个配置。
 elem例子：
 
<ul id="dcDemo" style="display:none;">
		<li field="id" title="id" edit="text" layVerify="number"></li>
		<li field="name" title="姓名" edit="text"></li>
		<li field="sex" title="性别" edit="select" templet="#selectSex"></li>
		<li field="birthday" title="出生日期" edit="date"></li>
		<li field="phone" title="手机号码" edit="text" layVerify="phone"></li>
		<li field="email" title="邮箱" edit="text" layVerify="email"></li>
	</ul>
 
fields例子：
 
var dataFields = [{field:"id",title:"id",edit:"text",layVerify:"number"}
		,{field:"name",title:"姓名",edit:"text"}
		,{field:"sex",title:"性别",edit:"select", templet:"#selectSex"}
		,{field:"birthday",title:"出生日期",edit:"date"}
		,{field:"phone",title:"手机号码",edit:"text",layVerify:"phone"}
		,{field:"email",title:"邮箱",layVerify:"email"}
		];
 
layVerify属性类似lay-verify。点击查询时会自动校验。校验不通过则点击不了查询。
 
edit的取值：text/select/date 。暂时只支持这3种类型。
 
text表示文本输入编辑器。
select表示下拉框编辑器。必须配置templet。可以使用对应的模板生成下拉框。
date表示日期编辑器。
 
type的取值：‘simple’/'complex’区别：
 
显示界面不一样。simple模式少了中间的操作列。
构造的requestData格式不一样。
 
simple模式构造的requestData例子：
 
{"name":"张三","sex":"1","birthday":"2018-11-02"}
 
complex模式构造的requestData例子：
 
{
 "rowLength": 5,
 "QueryCondition[0].conditionField": "name",
 "QueryCondition[0].conditionOption": "like",
 "QueryCondition[0].conditionValue": "",
 "QueryCondition[1].conditionField": "sex",
 "QueryCondition[1].conditionOption": "equal",
 "QueryCondition[1].conditionValue": "1",
 "QueryCondition[2].conditionField": "birthday",
 "QueryCondition[2].conditionOption": "between",
 "QueryCondition[2].conditionValueLeft": "2010-11-01",
 "QueryCondition[2].conditionValueRight": "2018-11-01",
 "QueryCondition[3].conditionField": "phone",
 "QueryCondition[3].conditionOption": "start",
 "QueryCondition[3].conditionValue": "18800008888",
 "QueryCondition[4].conditionField": "email",
 "QueryCondition[4].conditionOption": "end",
 "QueryCondition[4].conditionValue": "1@qq.com"
} 

 
queryCallBack和tableId一般二选一配置一个。
 如果是使用layui的table表格查询，那只要配置一下tableId，就能实现查询后自动重载表格数据了。
 conditionTextId 如果配置了该选项，则点击查询后生成查询条件的文本描述，会自动填充到对应的容器里展示给用户查看。
 
dynamicCondition创建的实例对象。
 
成员
类型
说明
示例
open
function
弹出动态添加查询条件界面
open()
setDisplayModel
function
2.0.2版本新增。设置显示模式：弹窗/无弹窗。取值：popup/unpopup. 默认popup
setDisplayModel(‘unpopup’)
setCondition
function
设置初始条件
setCondition([[‘name’,null,’’],[‘sex’,null,‘1’]])
getRowDivs
function
根据字段名称获取行div，返回一个dom类型的数组
getRowDivs(conditionFieldVal)
getVal
function
根据字段名称获对应的值，如果该字段条件有多个，则只取第一行对应的值。
getVal(conditionFieldVal)
备注：其他内部成员以后有时间在详细介绍。只是使用插件的话，只要调用open方法就好了。
 
getRowDivs与getVal使用说明参考：扩展编辑器