[Android] Tạo thanh tìm kiếm theo xu hướng thiết kế phẳng

Material design with search bar

I. Giới thiệu

Với tôi code luôn là một niềm đam mê, là một dân học tiếng chuyển qua làm lập trình nên tôi muốn sử dụng công cụ lập trình để tạo ra các phần mềm hỗ trợ cho việc học tiếng của mình, vừa nâng cao được khả năng lập trình, vừa có đất dụng võ vốn ngoại ngữ của mình.

Hôm nay tôi muốn giới thiệu với các bạn một thư viện nho nhỏ làm thanh tìm kiếm theo thiết kế giao diện phẳng. Thư viện thì tôi hay lang thang trên github, stackoverflow, xda forum để tìm kiếm những công nghệ mới, những đoạn code tips hay để tham khảo. Và thư viện dưới đây cũng vậy, tôi cũng không nhớ là mình kiếm ở đâu, chỉ vô tình thấy trên workspace của IDE và thế là tôi áp dụng vào app học tiếng anh của mình luôn.

II. Cùng nhau code nào

Về bản chất thì vẫn là Search View của android nhưng được code dựa trên thiết kế phẳng (Material Design). Material Search View sẽ được hiển thị phủ lên trên Actionbar hoặc Toolbar để hiện thị danh sách <ListView> các từ khoá gợi ý hoặc các từ khoá tìm gần đây.

Bạn nhớ rằng thư viện này chỉ support android SDK version thấp nhất là 14 thôi nhé.

1. Hướng dẫn sử dụng

Để dùng Material Search View trong ứng dụng của bạn thì bạn cần khai báo view này trong file layout của bạn hoặc add view bằng code (nếu bạn không muốn sử dụng view bằng layout) nhé.

<br.com.mauker.materialsearchview.MaterialSearchView android:id="@+id/search_view" android:layout_awidth="match_parent" android:layout_height="match_parent"/>

Và sau đó khai báo nó trong activity như dưới đây:

MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);

Và rồi giờ thì quẩy thôi nào: Để mở nó lên, đơn giản lắm gọi cái này nhé:

searchView.openSearch()

Còn muốn đóng nó lại thì gọi

searchView.closeSearch()

Bạn cũng có thể check nó đã được mở lên hay chưa bằng cách hỏi cái này:

searchView.isOpen()

Nếu bạn muốn đóng nó lại khi người dùng nhấn nút back của hệ thống như search view mặc định của android thì hãy làm như sau:

@Override public void onBackPressed() { if (searchView.isOpen()) { // Close the search on the back button press. searchView.closeSearch(); } else { super.onBackPressed(); } }

Để cho search view của chúng ta giống thật hơn nữa và thân thiện với người dùng thì bạn có thể thêm gợi ý bằng cáchxml gọi đến 1 trong 2 hàm sau và truyền danh sách gợi ý của bạn vào:

addSuggestions(String[] suggestions) addSuggestions(ArrayList<String> suggestions)

Và nếu bạn không muốn dùng cái đống gợi ý này nữa thì gọi

clearSuggestions()

nhé. Để xoá các từ khoá tìm kiếm gần đây bạn cần gọi:

clearHistory()

Và nêú bạn muốn xoá cả gợi ý lẫn từ khoá thì hãy gọi:

clearAll()

2. Các listener interface

Có 2 listeners của Material Search View mà bạn có thể lắng nghe:

1. OnQueryTextListener: Interface này dùng để lắng nghe sự kiện QueryTextChange hoặc QueryTextSubmit của Material Search View.

2. SearchViewListener: Interface này dùng để lắng nghe sự kiện mở và đóng của Material Search View.

III. Ứng dụng tham khảo

Code & Study

Mình tích hợp luôn tính năng học tiếng anh trong app sample nhé. Chúc các bạn vừa code vừa nâng cao được ngữ pháp tiếng Anh. Hẹn gặp lại ở viblo số tiếp theo.

Source code và file cài đặt các bạn download ở đây nhé (MyEnglish)

https://drive.google.com/drive/folders/0B-djf-eA7_LRZnBhblJ0ZVJ6NDQ