ref:
http://developer.android.com/intl/zh-tw/training/material/lists-cards.html
http://stackoverflow.com/a/30429439
http://blog.30sparks.com/material-design-4-recyclerview/ (2016/01/01 新增)
http://developer.android.com/intl/zh-tw/training/material/lists-cards.html
http://stackoverflow.com/a/30429439
http://blog.30sparks.com/material-design-4-recyclerview/ (2016/01/01 新增)
Gradle:
compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:design:23.3.0' compile 'com.android.support:recyclerview-v7:23.1.0'
res/menu:
在ToolBar新增一個搜尋圖案的按鈕<item
android:id="@+id/search"
android:icon="@drawable/ic_search_black_24dp"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
res/layout:
RecyclerView<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</FrameLayout>
MainLayout:
content_main指的就是recyclerview
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context="com.example.searchview.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main"/>
<!--<include layout="@layout/FAB/">-->
</android.support.design.widget.CoordinatorLayout>
MainActivity:
onCreate//Toolbar Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //預設資料 availableLocales = new ArrayList<>(); for (Locale l : Locale.getAvailableLocales()) { availableLocales.add(l.getDisplayName()); } //RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); mRecyclerView.setHasFixedSize(true); //線性布局 mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mAdapter = new LanguageAdapter(availableLocales); mRecyclerView.setAdapter(mAdapter); mRecyclerView.setItemAnimator(new DefaultItemAnimator());
RecyclerView布局Manager有三種：
- 線性佈局：mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
- 格狀佈局：mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
- 瀑布佈局(縱向或橫向)：mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, OrientationHelper.VERTICAL)); //HORIZONTAL
- 設定view為預設動畫：mRecyclerView.setItemAnimator(new DefaultItemAnimator());
- 在adapter使用以下函數，再搭配handler postdelay，可有動畫產生。
notifyItemChanged(int) notifyItemInserted(int) notifyItemRemoved(int) notifyItemMoved(int, int) notifyItemRangeChanged(int, int) notifyItemRangeInserted(int, int) notifyItemRangeRemoved(int, int)
- int為position位址
Adapter & ViewHolder:
private class LanguageAdapter extends RecyclerView.Adapter<ViewHolder> { private List<String> mLocales; private LanguageAdapter(List<String> mLocales) { this.mLocales = mLocales; notifyDataSetChanged(); } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { TextView tv = (TextView) LayoutInflater.from(parent.getContext()) .inflate(android.R.layout.simple_list_item_1, parent, false); return new ViewHolder(tv); } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.mTextView.setText(mLocales.get(position)); } @Override public int getItemCount() { return mLocales.size(); } } private static class ViewHolder extends RecyclerView.ViewHolder { public TextView mTextView; public ViewHolder(TextView v) { super(v); mTextView = v; } }
Menu
onCreateOptionsMenu設定當Search按鈕觸發後的動作，在這裡設定當，搜尋列輸入文字時，立刻判斷預設資料是否包含收尋文字，並透過adapter作即時更新→notifyDatachanged()。
getMenuInflater().inflate(R.menu.menu_main, menu); final SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView(); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return false; } @Override public boolean onQueryTextChange(String newText) { mRecyclerView.setAdapter(new LanguageAdapter(OnFilter(availableLocales, newText))); return true; } }); return true;
判斷輸入文字method，回傳List形態結果
//判斷輸入文字 private List<String> OnFilter(List<String> filterLocales, String text) { String search = text.toLowerCase(); final List<String> filtered = new ArrayList<>(); for (String info : filterLocales) { final String localeName = info.toLowerCase(); if (localeName.contains(search)) { filtered.add(localeName); } } return filtered; }
結果示意圖
