HTML5+CSS3小实例：伸缩式动态搜索框

Posted 2023-05-06

参考技术A html5+CSS3小实例之伸缩式动态搜索框

技术栈：HTML+CSS

字体图标库：font-awesome

效果：

源码：

Android 根据EditText搜索框ListView动态显示数据

根据EditText搜索框ListView动态显示数据是根据需求来的，觉得这之中涉及的东西可能比较的有意思，所以动手来写一写，希望对大家有点帮助。

首先，我们来分析下整个过程：

1、建立一个layout，包含一个EditText搜索框和一个ListView

2、创建一个数据集mData，用于ListView的Adapter的创建

3、添加EditText的文本改变的监听器

4、利用notifyDataSetChanged()动态更新ListView

第一步：创建一个搜索框

文本框，具有点叉全删功能，不过，删除了搜索按钮，因为我们动态搜索，用不到按钮。

添加一个Relativelayout布局，然后往里添加两个控件(具体是3个)，

第二步：创建数据集mData

这里使用的是SimpleAdapter，所以数据集创建的格式我的是这样的，自己根据自己的Adapter来建立元数据，存放在mListTitle和mListText里的数据是不会去改的，而mData是会在文本框改变时，mData的数据也会做相应的改变，这个是更新操作需要做的。这里是创建元数据集，

代码如下：

 1 ListView mListView;
 2     
 3         ArrayList> mData = new ArrayList>();
 4     
 5         ArrayList mListTitle = new ArrayList();
 6         ArrayList mListText = new ArrayList();
 7         
 8         private void getmData(ArrayList> mDatas)
 9         {
10              Map item = new HashMap();
11              mListTitle.add(This is a title!);
12              mListText.add(this is a text.
13 2016.01.27.11.20);
14    
15              item.put(title, mListTitle.get(0));
16              item.put(text, mListText.get(0));
17              mDatas.add(item);
18              mListTitle.add(This is an another title!);
19              mListText.add(this is an another text.
20 016.01.27.11.22);
21     
22              item = new HashMap();
23              item.put(title, mListTitle.get(1));
24              item.put(text, mListText.get(1));
25              mDatas.add(item);
26         }

再就是利用mData创建Adapter

 1 private void set_mListView_adapter()
 2 {
 3     mListView = (ListView) findViewById(R.id.mListView);
 4      
 5     getmData(mData);
 6      
 7     adapter = new SimpleAdapter(this,mData,android.R.layout.simple_list_item_2, 
 8             new String[]{title,text},new int[]{android.R.id.text1,android.R.id.text2});
 9      
10     mListView.setAdapter(adapter);
11 }

到此，程序开始的状态是显示出来了的。如果没有搜索框，到此就可以了。

第三步：添加EditText的文本改变的监听器

因为我们要动态修改ListView的显示，所以就必须去监听，然后做相应的动作。当监听到文本改变时，就用Handler post一个Runnable去做相应的改变。

 1 private void set_eSearch_TextChanged()
 2 {
 3     eSearch = (EditText) findViewById(R.id.etSearch);
 4          
 5     eSearch.addTextChangedListener(new TextWatcher() {
 6              
 7          @Override
 8          public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
 9                // TODO Auto-generated method stub
10                //这个应该是在改变的时候会做的动作吧，具体还没用到过。
11          }
12              
13          @Override
14          public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
15                         int arg3) {
16                // TODO Auto-generated method stub
17                //这是文本框改变之前会执行的动作
18          }
19              
20          @Override
21          public void afterTextChanged(Editable s) {
22                // TODO Auto-generated method stub
23                /**这是文本框改变之后 会执行的动作
24                  * 因为我们要做的就是，在文本框改变的同时，我们的listview的数据也进行相应的变动，并且如一的显示在界面上。
25                  * 所以这里我们就需要加上数据的修改的动作了。
26                  */
27                if(s.length() == 0){
28                      ivDeleteText.setVisibility(View.GONE);//当文本框为空时，则叉叉消失
29                }
30                else {
31                      ivDeleteText.setVisibility(View.VISIBLE);//当文本框不为空时，出现叉叉
32                      myhandler.post(eChanged);
33                }
34          }
35     });
36          
37 }

Handler在此体现了巨大的用途，我们可以根据Handler的这样的一个post功能，可以对界面神马的做自己想要的改变，可以不仅仅只是ListView的修改，像每输入个字，字体就改变成另一种颜色什么的，都可以。

第四步：利用notifyDataSetChanged()动态更新ListView

回归正题，这里是最关键得一步，我们post出来了，那么我们就要根据搜索文本框的文本然后对元数据进行筛选，再让符合的数据显示在ListView上。

（/*丫的，顶着S4在写博客，是不是一种罪过...*/）

adapter有一个notifyDataSetChanged()的方法，在数据更新的时候就使用此方法即可更新绑定的ListView.

这里可能会遇到一些问题：

1、notifyDataSetChanged(),这个更新了，mData数据集也确实改变了，但是ListView却没有更新。我之前就是这样，后来发现时mData数据集的引用改变了，所以Adapter再notify也没用，因为Adapter是和mData的引用绑定的，引用一变，那么数据是不会更新到ListView上的。这也是我使用get函数参数是传递引用进来的原因，如果直接返回一个引用回去，那么就会出现这个问题，因此这一点需要注意下。可以参考http://www.2cto.com/kf/201401/273017.html

2、关于界面UI的更新，可以使用Handler，通过Post一个Runnable去更新，Runnable会去根据搜索框的文本对mData里的数据进行更新。

代码如下：

 1 Runnable eChanged = new Runnable() {
 2          
 3     @Override
 4     public void run() {
 5           // TODO Auto-generated method stub
 6           String data = eSearch.getText().toString();
 7              
 8           mData.clear();
 9              
10           getmDataSub(mData, data);
11              
12           adapter.notifyDataSetChanged();
13              
14     }
15 };

3、可能对mData的理解会有点问题，因为数据更新完后，每一次的筛选数据都是放在mData里，那么原本的数据呢，当然就是在mListTitle和mListText里。根据获得数据的getmDataSub的代码即可知。

 1 private void getmDataSub(ArrayList<map<string, object="">> mDataSubs, String data)
 2 {
 3      int length = mListTitle.size();
 4      for(int i = 0; i < length; ++i){
 5            if(mListTitle.get(i).contains(data) || mListText.get(i).contains(data)){
 6                 Map<string,object> item = new HashMap<string,object>();
 7                 item.put(title, mListTitle.get(i));
 8                 item.put(text,  mListText.get(i));
 9                 mDataSubs.add(item);
10             }
11      }
12 }   </string,object></string,object></map<string,>

4、因为文本框在第一个，所以程序一运行，文本框就会获得焦点，然后弹出输入法，这里使用在xml文件里添加一个长宽为0的LinearLayout来获得焦点，代码如下：

1 <!--  to acquire focus -->
2 <LinearLayout
3       android:focusable="true"
4       android:focusableInTouchMode="true"
5       android:layout_width="0px"
6       android:layout_height="0px"/>

综上，这个动态的方法，可能还需要待改进，比如筛选的方法，而且控件这里只是针对SampleAdapter的Listview，如果是自定义的ListView，应该是还可以再进行优化的。还有就是ListView的height的设置，设置成wrap_content和fill_parent两种方法其实换成真机是可以体验出两种的差距的，比较明显吧，就是往下划的过程。