Android 根據EditText搜尋方塊ListView動態顯示資料

標籤：android   listview   介面   search   控制項   

根據EditText搜尋方塊ListView動態顯示資料是根據需求來的，覺得這之中涉及的東西可能比較的有意思，所以動手來寫一寫，希望對大家有點協助。

首先，我們來分析下整個過程：

1、建立一個layout，包含一個EditText搜尋方塊和一個ListView

2、建立一個資料集mData，用於ListView的Adapter的建立

3、添加EditText的文本改變的監聽器

4、利用notifyDataSetChanged()動態更新ListView

第一步：建立一個搜尋方塊

這個還是比較容易的，這裡我使用的是http://blog.csdn.net/walker02/article/details/7917392該文章的文字框，具有點叉全刪功能，不過，刪除了搜尋按鈕，因為我們動態搜尋，用不到按鈕。

添加一個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.\n2014.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.\n2014.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、因為文字框在第一個，所以程式一運行，文字框就會獲得焦點，然後彈出IME，這裡使用在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兩種方法其實換成真機是可以體驗出兩種的差距的，比較明顯吧，就是往下劃的過程。

寫的比較簡單粗暴，不要太見怪。附上代碼一份》 

 向來喜歡共用， 所以免費下載。 猛戳

Android 根據EditText搜尋方塊ListView動態顯示資料