Material Design風格SearchView實作

原文轉載：http://www.wangxinarhat.com/2016/03/18/2016-03-18-meterial-design-search-view/

效果

代碼(已上傳至github)

• 初始化

  1 2 3 4 5 6 7 8 9 10 11 12

  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initView(); } private void initView() { initToolBar(); initRecyclerView(); initSearchView(); }

• ToolBar初始化

  1 2 3 4 5 6

  private void initToolBar() { setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayShowTitleEnabled(false); }

• RecyclerView初始化

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

private void initRecyclerView() { LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); mPeopleList = new ArrayList<>(); String[] peopleName = {"Kaka", "Modric", "Rooney", "Ibla", "Bale", "死神", "Maurice Moss", "Roy Trenneman", "林夕", "sina", "google", "ecust"}; String[] peopleDes = {"The best player", "莫德裡奇是最好的後腰", "魯尼踢得不好", "伊貝拉是誰？", "貝爾跑得真快", "Aaron", "Oh, four, I mean five, I mean fire!", "哈哈", "是個藝術家", "weibo", "android", "china"}; for (int i = 0; i < peopleName.length; i++) { mPeopleList.add(new People(peopleName[i], peopleDes[i])); } mAdapter = new SearchPeopleAdapter(mPeopleList); recyclerView.setAdapter(mAdapter); HeaderAdapter headerAdapter = new HeaderAdapter(mAdapter); recyclerView.setAdapter(headerAdapter); recyclerView.addOnItemTouchListener(new RecyclerOnItemClickListener(this, recyclerView, this)); }

• SearchView初始化

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

private void initSearchView() { searchView.setVoiceSearch(false); searchView.setCursorDrawable(R.drawable.custom_cursor); searchView.setEllipsize(true); searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return true; } @Override public boolean onQueryTextChange(String newText) { final List<People> filteredModelList = filter(mPeopleList, newText); //reset mAdapter.setFilter(filteredModelList); mAdapter.animateTo(filteredModelList); recyclerView.scrollToPosition(0); return true; } }); searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() { @Override public void onSearchViewShown() { } @Override public void onSearchViewClosed() { mAdapter.setFilter(mPeopleList); } }); }

• 搜尋按鈕

1 2 3 4 5 6 7 8 9

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_search, menu); MenuItem item = menu.findItem(R.id.action_search); searchView.setMenuItem(item); return true; }

• 篩選邏輯

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

private List<People> filter(List<People> peoples, String query) { query = query.toLowerCase(); final List<People> filteredModelList = new ArrayList<>(); for (People people : peoples) { final String nameEn = people.getName().toLowerCase(); final String desEn = people.getDescription().toLowerCase(); final String name = people.getName(); final String des = people.getDescription(); if (name.contains(query) || des.contains(query) || nameEn.contains(query) || desEn.contains(query)) { filteredModelList.add(people); } } return filteredModelList; }