zoukankan      html  css  js  c++  java
  • Android 依据EditText搜索框ListView动态显示数据

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


    首先。我们来分析下整个过程:

    1、建立一个layout,包括一个EditText搜索框和一个ListView

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

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

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


    第一步:创建一个搜索框

    这个还是比較easy的。这里我使用的是http://blog.csdn.net/walker02/article/details/7917392该文章的文本框。具有点叉全删功能,只是,删除了搜索button,由于我们动态搜索,用不到button。

    加入一个Relativelayout布局,然后往里加入两个控件(详细是3个),


    效果如上,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"
        tools:context="com.ricawinter.dynamicsearch.MainActivity$PlaceholderFragment" >
    
         <RelativeLayout android:id="@+id/top"
        	android:layout_width="fill_parent"
        	android:layout_alignParentTop="true"
        	android:paddingLeft="10dp"
        	android:paddingRight="10dp"
        	android:background="@drawable/top_background"
        	android:layout_height="wrap_content">
            
            <RelativeLayout
                android:id="@+id/rlSearchFrameDelete"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical" >
                
    		    	<EditText android:id="@+id/etSearch"
    		        	android:layout_width="fill_parent"
    		        	android:layout_height="wrap_content"
    					android:singleLine="true"
    		        	android:background="@drawable/search_frame"
    		        	android:layout_marginRight="10dp"
    		        	android:paddingLeft="32dp"
    		        	android:textSize="12sp"
    		        	android:hint="Searching..."/>
    		    	
    		    	<ImageView android:id="@+id/ivDeleteText"
    		    	    android:layout_width="wrap_content"
    		    	    android:layout_height="wrap_content"
    		    	    android:layout_alignParentRight="true"
    		    	    android:src="@drawable/delete"
    		    	    android:layout_centerInParent="true"
    		    	    android:paddingRight="20dp"
    		    	    android:visibility="gone"/>
                
            </RelativeLayout>
            
        	
        </RelativeLayout>
    
         <ListView
             android:id="@+id/mListView"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_below="@+id/top" >
         </ListView>
    
    </RelativeLayout>
    


    第二步:创建数据集mData

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

    代码例如以下:

            ListView mListView;
    	
            ArrayList<Map<String, Object>> mData = new ArrayList<Map<String, Object>>();
    	
            ArrayList<String> mListTitle = new ArrayList<String>();
            ArrayList<String> mListText = new ArrayList<String>();
            
            private void getmData(ArrayList<Map<String, Object>> mDatas)
            {
                 Map<String, Object> item = new HashMap<String, Object>();
                 mListTitle.add("This is a title!");
                 mListText.add("this is a text.
    2014.09.18.16.33");
       
                 item.put("title", mListTitle.get(0));
                 item.put("text", mListText.get(0));
                 mDatas.add(item);
                 mListTitle.add("This is an another title!");
                 mListText.add("this is an another text.
    2014.09.18.16.33");
        
                 item = new HashMap<String, Object>();
                 item.put("title", mListTitle.get(1));
                 item.put("text", mListText.get(1));
                 mDatas.add(item);
            }

    再就是利用mData创建Adapter

        private void set_mListView_adapter()
        {
        	mListView = (ListView) findViewById(R.id.mListView);
            
            getmData(mData);
            
            adapter = new SimpleAdapter(this,mData,android.R.layout.simple_list_item_2, 
    			    new String[]{"title","text"},new int[]{android.R.id.text1,android.R.id.text2});
    	    
            mListView.setAdapter(adapter);
        }

    到此。程序開始的状态是显示出来了的。

    假设没有搜索框,到此就能够了。


    第三步:加入EditText的文本改变的监听器

    由于我们要动态改动ListView的显示。所以就必须去监听,然后做对应的动作。

    当监听到文本改变时,就用Handler post一个Runnable去做对应的改变。

    private void set_eSearch_TextChanged()
    {
        eSearch = (EditText) findViewById(R.id.etSearch);
        	
        eSearch.addTextChangedListener(new TextWatcher() {
    			
             @Override
             public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
                   // TODO Auto-generated method stub
                   //这个应该是在改变的时候会做的动作吧,详细还没用到过。
             }
    			
             @Override
             public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
                            int arg3) {
                   // TODO Auto-generated method stub
                   //这是文本框改变之前会运行的动作
             }
    			
             @Override
             public void afterTextChanged(Editable s) {
                   // TODO Auto-generated method stub
                   /**这是文本框改变之后 会运行的动作
                     * 由于我们要做的就是,在文本框改变的同一时候。我们的listview的数据也进行对应的变动。而且如一的显示在界面上。

    * 所以这里我们就须要加上数据的改动的动作了。

    */ if(s.length() == 0){ ivDeleteText.setVisibility(View.GONE);//当文本框为空时。则叉叉消失 } else { ivDeleteText.setVisibility(View.VISIBLE);//当文本框不为空时,出现叉叉 myhandler.post(eChanged); } } }); }


    Handler在此体现了巨大的用途,我们能够依据Handler的这种一个post功能。能够对界面神马的做自己想要的改变,能够不只不过ListView的改动。像每输入个字,字体就改变成还有一种颜色什么的,都能够。


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

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

    (/*丫的,顶着S4在写博客,是不是一种罪过...*/)

    adapter有一个notifyDataSetChanged()的方法。在数据更新的时候就使用此方法就可以更新绑定的ListView,效果例如以下:

      输入一个5还是是有两个item的。我的选择是,仅仅要title和text包括文本框的字符。即是目标item

      当输入50时,由于仅仅有一个item里的title或text的文本里包括了搜索框的文本。所以仅仅显示仅仅包括的这一个

      再加上一个0。由于没有item的文本包括500。所以Listview没有item了


    顺利完毕效果的,真棒,LZ水平太菜。遇到了些许问题。

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

    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里的数据进行更新。

    代码例如以下:

    Runnable eChanged = new Runnable() {
    		
        @Override
        public void run() {
              // TODO Auto-generated method stub
              String data = eSearch.getText().toString();
    			
              mData.clear();
    			
              getmDataSub(mData, data);
    			
              adapter.notifyDataSetChanged();
    			
        }
    };


    3、可能对mData的理解会有点问题,由于数据更新完后,每一次的筛选数据都是放在mData里。那么原本的数据呢,当然就是在mListTitle和mListText里。

    依据获得数据的getmDataSub的代码就可以知。

    private void getmDataSub(ArrayList<Map<String, Object>> mDataSubs, String data)
    {
         int length = mListTitle.size();
         for(int i = 0; i < length; ++i){
               if(mListTitle.get(i).contains(data) || mListText.get(i).contains(data)){
                    Map<String,Object> item = new HashMap<String,Object>();
                    item.put("title", mListTitle.get(i));
                    item.put("text",  mListText.get(i));
                    mDataSubs.add(item);
                }
         }
    }
        


    4、由于文本框在第一个,所以程序一执行。文本框就会获得焦点,然后弹出输入法,这里使用在xml文件中加入一个长宽为0的LinearLayout来获得焦点,代码例如以下:

    <!--  to acquire focus -->
    <LinearLayout
          android:focusable="true"
          android:focusableInTouchMode="true"
          android:layout_width="0px"
          android:layout_height="0px"/>


    综上。这个动态的方法。可能还须要待改进,比方筛选的方法,并且控件这里仅仅是针对SampleAdapter的Listview,假设是自己定义的ListView。应该是还能够再进行优化的。还有就是ListView的height的设置,设置成wrap_content和fill_parent两种方法事实上换成真机是能够体验出两种的差距的。比較明显吧。就是往下划的过程。

    写的比較简单粗暴,不要太见怪。附上代码一份》 

     向来喜欢共享, 所以免费下载。

    猛戳


  • 相关阅读:
    cp文件夹
    当@PathVariable遇上中文和点
    frameset框架样式 加边框
    页面显示滑动条样式
    109.110.100.56 samba用户名 PAS, 密码 111111
    后台访问记录
    后台处理excel下载输出流
    ul li排版 左右对齐
    社保卡补办
    删除表 (truncate 、delete 、drop)
  • 原文地址:https://www.cnblogs.com/mthoutai/p/7112951.html
Copyright © 2011-2022 走看看