Tạo thanh search view theo phong cách material design nhanh chóng với thư viện FloatingSearchView

Giới thiệu

Github: https://github.com/arimorty/floatingsearchview
Floatingsearchview là một thư viện custom searchView được giới lập trình android đánh gía khá cao. Floatingsearchview của tác giả arimorty cung ứng một giao diện tìm kiếm theo đúng phong cách material design với một thanh tìm kiếm nổi và hiển thị đề xuất. Ngày hôm nay ta sẽ cùng tìm hiểu và dùng thư viện tương đối mạnh mẽ này nhé

thực hiện

Tạo một project mới đặt tên là DemoFloatingSearchView

Compile thư viện floatingsearchview trong gradle

dependencies {   compile fileTree(dir: 'libs', include: ['*.jar'])   androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {     exclude group: 'com.android.support', module: 'support-annotations'   })   compile 'com.android.support:appcompat-v7:26.+'   compile 'com.android.support.constraint:constraint-layout:1.0.2'   compile 'com.github.arimorty:floatingsearchview:2.1.1'    testCompile 'junit:junit:4.12' } 

Thiế kế giao diện cho trang tìm kiếm

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     >      <com.arlib.floatingsearchview.FloatingSearchView         android:id="@+id/floating_search_view"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:floatingSearch_searchBarMarginLeft="5dp"         app:floatingSearch_searchBarMarginTop="5dp"         app:floatingSearch_searchBarMarginRight="5dp"         app:floatingSearch_searchHint="Nhập content cần t..."         app:floatingSearch_suggestionsListAnimDuration="250"         app:floatingSearch_showSearchKey="true"         app:floatingSearch_leftActionMode="showHamburger"         app:floatingSearch_close_search_on_keyboard_dismiss="true"         tools:layout_editor_absoluteY="8dp"         tools:layout_editor_absoluteX="8dp"         /> </LinearLayout> 


Giải thích các thuộc tính:

floatingSearch_searchHint: text hint hiển thị trong khung search app:floatingSearch_suggestionsListAnimDuration="250": set thời gian animation cho suggestions list app:floatingSearch_showSearchKey="true": hiển thị phím search trên bàn phím app:floatingSearch_leftActionMode="showHamburger" : gán action left bao gồm (hiển thị phím hamburger, hiển thị phím search, hiển thị phím back) app:floatingSearch_close_search_on_keyboard_dismiss="true": close search khi ẩn bàn phím
Tạo class Suggestion implements SearchSuggestion( mỗi suggestion là một item trong list search suggestion) mName chính là giá trị suggestion hiển thị trong khung suggestion

public class Suggestion implements SearchSuggestion {     private String mName;     private boolean mIsHistory = false;      public Suggestion(String suggestion) {         mName= suggestion.toLowerCase();     }      public void setIsHistory(boolean isHistory) {         this.mIsHistory = isHistory;     }      public boolean getIsHistory() {         return this.mIsHistory;     }          @Override     public String getBody() {         return mName;     }      @Override     public int describeContents() {         return 0;     }      @Override     public void writeToParcel(Parcel parcel, int i) {      } } 

Trong MainActivity ta viết hàm khỏi tạo data(initData()) cho list suggestion và hàm truy vấn data(getSuggestion()) như sau

public class MainActivity extends AppCompatActivity {     private List<Suggestion> mSuggestions =new ArrayList<>();      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         initData();          final FloatingSearchView searchView= (FloatingSearchView) findViewById(R.id.floating_search_view);          searchView.setOnQueryChangeListener(new FloatingSearchView.OnQueryChangeListener() {             @Override             public void onSearchTextChanged(String oldQuery, String newQuery) {                 if (!oldQuery.equals("") && newQuery.equals("")) {                     searchView.clearSuggestions();                 } else {                     searchView.showProgress();                     searchView.swapSuggestions(getSuggestion(newQuery));                     searchView.hideProgress();                 }             }         });         searchView.setOnFocusChangeListener(new FloatingSearchView.OnFocusChangeListener() {             @Override             public void onFocus() {                 searchView.showProgress();                 searchView.swapSuggestions(getSuggestion(searchView.getQuery()));                 searchView.hideProgress();             }              @Override             public void onFocusCleared() {              }         });         searchView.setOnSearchListener(new FloatingSearchView.OnSearchListener() {             @Override             public void onSuggestionClicked(SearchSuggestion searchSuggestion) {                 Suggestion suggestion= (Suggestion) searchSuggestion;                 Toast.makeText(getApplicationContext(),"Ban vua chon "+suggestion.getName(),Toast.LENGTH_SHORT).show();             }              @Override             public void onSearchAction(String currentQuery) {              }         });     }      private void initData(){         mSuggestions.add(new Suggestion("Ha Noi"));         mSuggestions.add(new Suggestion("Ha nam"));         mSuggestions.add(new Suggestion("Da nang"));         mSuggestions.add(new Suggestion("Dong nai"));         mSuggestions.add(new Suggestion("Phú Tho"));         mSuggestions.add(new Suggestion("Quang ngai"));         mSuggestions.add(new Suggestion("Thanh hoa"));         mSuggestions.add(new Suggestion("Hue"));     }      private List<Suggestion> getSuggestion(String query){         List<Suggestion> suggestions=new ArrayList<>();         for(Suggestion suggestion:mSuggestions){             if(suggestion.getName().toLowerCase().contains(query.toLowerCase())){                 suggestions.add(suggestion);             }         }         return suggestions;     } } 

Kết quả

Nguồn viblo.asia