[Android ] ListView with index and search

Lấy project có Index đã được share: 

     1.       Download project tại địa chỉ bên dưới và unzip thành 1 thư mục có tên là “IndexableListView-master” :

https://github.com/woozzu/IndexableListView

     2.       Chép thư mục vào thư mục workspace. Trong Eclipse chọn File -> Import. Trong cửa sổ import chọn Android-> Existing Android Code Into Workspace rồi Next (chú ý: không phải trong mục General nhé).

3.       Trong hộp thoại  “Import Projects” dẫn đường dẫn đến thư mục project. Trong mục “Projects” check để chọn project. Check thêm mục “Copy projects into workspace” (nếu chưa copy project vào workspace) rồi chọn Finish.

4.       Project đã được thêm vào và có 3 package như sau

5.       Chú ý: nếu chưa có thư mục “Android <version>” thì click phải  project chọn Properties, chọn tab Android check vào 1 máy ảo vd: Android 2.2 rồi OK.

6.       Ba package sẽ còn báo lỗi ta phải sửa chúng. Đầu tiên mở file StringMatcher.java. Trong file này do hỗ trợ ngôn ngữ Korea nên sẽ bị lỗi, ta cần sửa lại các biến của class này như sau:

   private final static char KOREAN_UNICODE_START = 'a';

   private final static char KOREAN_UNICODE_END = 'z';

   private final static char KOREAN_UNIT = 'a';

   private final static char[] KOREAN_INITIAL = {'a','b'};

  

7.       Mở tiếp file IndexableListViewActivity.java lên, bỏ các câu @override ở trên các hàm getPositionForSection, getSectionForPosition, getSections.

8.       Sau khi sửa xong ta thấy project không còn bị lỗi gì nữa (nếu có lỗi thì tự vọc rồi sửa tiếp). Chạy chương trình để thấy kết quả hiện lên như sau:

Đưa vào Project của ta.

9.       Tạo project mới tên vd: mylistviewdemo1.

10.   Copy 3 package từ project mẫu chép vào project của ta.  Mở file IndexableListViewActivity.java lên, dùng dấu // để bỏ câu lệnh setContextView (do không chép layout qua) rồi Save all.

11.   Ta vẫn còn thấy báo lỗi ở câu bên dưới (không sao cả).

12.   Mở file layout của chương trình mẫu, copy phần listview. Sau đó mở file layout chương trình của ta, đổi nút gốc thành LinearLayout, chỉnh cho nó là vertical. Kéo vào 1 editText (để làm search) và paste listview vào dưới EditText. Toàn bộ mã sẽ như sau:

<LinearLayout 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"

    android:orientation="vertical" >

    <EditText

        android:id="@+id/editText1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:ems="10" >

        <requestFocus />

    </EditText>

   

   <com.woozzu.android.widget.IndexableListView

       android:layout_width="fill_parent"

       android:layout_height="fill_parent"

       android:id="@+id/listview" />

</LinearLayout>

13.   Chú ý file IndexableListViewActivity.java đó chính là file Activity chính trong project ta có thể dùng luôn nó hoặc copy source của nó để đưa vào MainActivity.java. Ta sẽ copy. Mở 2 file lên đầu tiên copy 2 biến toàn cục.

   private ArrayList<String> mItems;

   private IndexableListView mListView;

  

14.   Tiếp theo copy phần dữ liệu cho listview trong hàm onCreate (chỉ copy đến phần sort), đây là dữ liệu của listview ta có thể thay đổi theo project của ta.

        mItems = new ArrayList<String>();

        mItems.add(“Diary of a Wimpy Kid 6: Cabin Fever”);

        mItems.add(“Steve Jobs”);

        mItems.add(“Inheritance (The Inheritance Cycle)”);

        mItems.add(“11/22/63: A Novel”);

        mItems.add(“The Hunger Games”);

        mItems.add(“The LEGO Ideas Book”);

        mItems.add(“Explosive Eighteen: A Stephanie Plum Novel”);

        mItems.add(“Catching Fire (The Second Book of the Hunger Games)”);

        mItems.add(“Elder Scrolls V: Skyrim: Prima Official Game Guide”);

        mItems.add(“Death Comes to Pemberley”);

        mItems.add(“Diary of a Wimpy Kid 6: Cabin Fever”);

        mItems.add(“Steve Jobs”);

        mItems.add(“Inheritance (The Inheritance Cycle)”);

        mItems.add(“11/22/63: A Novel”);

        mItems.add(“The Hunger Games”);

        mItems.add(“The LEGO Ideas Book”);

        mItems.add(“Explosive Eighteen: A Stephanie Plum Novel”);

        mItems.add(“Catching Fire (The Second Book of the Hunger Games)”);

        mItems.add(“Elder Scrolls V: Skyrim: Prima Official Game Guide”);

        mItems.add(“Death Comes to Pemberley”);

        Collections.sort(mItems);

15.   Tiếp theo sẽ copy phần class nội, đây là class adapter của ta, chú ý, paste nó ngoài hàm onCreate nhé.

    private class ContentAdapter extends ArrayAdapter<String> implements SectionIndexer {

         

          private String mSections = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ";

         

          public ContentAdapter(Context context, int textViewResourceId,

                        List<String> objects) {

                 super(context, textViewResourceId, objects);

          }

          public int getPositionForSection(int section) {

                 // If there is no item for current section, previous section will be selected

                 for (int i = section; i >= 0; i--) {

                        for (int j = 0; j < getCount(); j++) {

                               if (i == 0) {

                                      // For numeric section

                                      for (int k = 0; k <= 9; k++) {

                                             if(StringMatcher.match(String.valueOf(getItem(j).charAt(0)), String.valueOf(k)))

                                                   return j;

                                      }

                               } else {

                                      if(StringMatcher.match(String.valueOf(getItem(j).charAt(0)), String.valueOf(mSections.charAt(i))))

                                                   return j;

                               }

                        }

                 }

                 return 0;

          }

          public int getSectionForPosition(int position) {

                 return 0;

          }

          public Object[] getSections() {

                 String[] sections = new String[mSections.length()];

                 for (int i = 0; i < mSections.length(); i++)

                        sections[i] = String.valueOf(mSections.charAt(i));

                 return sections;

          }

    }

16.   Tiếp theo quay lại hàm onCreate copy phần gán adapter cho listview.

        ContentAdapter adapter = new ContentAdapter(this,

                android.R.layout.simple_list_item_1, mItems);

       

        mListView = (IndexableListView) findViewById(R.id.listview);

        mListView.setAdapter(adapter);

        mListView.setFastScrollEnabled(true);

17.   Chú ý lên phần import, bỏ các import bị sai.

18.   Cuối cùng package chứa file “IndexableListViewActivity.java” không còn cần thiết nữa, delete package này cùng với file trong nó.

19.   Chạy chương trình để xem kết quả.

Thêm chức năng search nhanh trên listView.

20.   EditText trên giao diện đã được thêm vào. Giờ ta khai báo toàn cục nó và ánh xạ nó trong hàm onCreate.

21.   Trong onCreate ta bắt sự kiện addTextChangedListener cho EditText.

    et.addTextChangedListener(new TextWatcher() {

         

          public void onTextChanged(CharSequence s, int start, int before, int count) {

                 // TODO Auto-generated method stub

                

          }

         

          public void beforeTextChanged(CharSequence s, int start, int count,

                        int after) {

                 // TODO Auto-generated method stub

                

          }

         

          public void afterTextChanged(Editable s) {

                 // TODO Auto-generated method stub

                

          }

   });

22.   Trong hàm onTextChanged của EditText cần dùng adapter nên phải sửa ContextAdapter thành toàn cục.

23.   Cuối cùng trong hàm onTextChanged ta gọi filter cho adapter.

   public void onTextChanged(CharSequence s, int start, int before, int count) {

          // TODO Auto-generated method stub

          adapter.getFilter().filter(s);

   }

24.   Chạy chương trình, thử gõ vào dữ liệu vào EditText để kiểm tra kết quả.