StaggeredGridLayoutManager:流式布局,例如瀑布流效果
當然除了上面的三種內部布局之外，我們還可以繼承RecyclerView.LayoutManager來實現一個自定義的LayoutManager。
Animations(動畫)效果:
RecyclerView對於Item的添加和刪除是默認開啟動畫的。我們當然也可以通過RecyclerView.ItemAnimator類定制動畫，然後通過RecyclerView.setItemAnimator()方法來進行使用。
RecyclerView相關類:
類名
說明
RecyclerView.Adapter
可以托管數據集合，為每一項Item創建視圖並且綁定數據
RecyclerView.ViewHolder
承載Item視圖的子布局
RecyclerView.LayoutManager
負責Item視圖的布局的顯示管理
RecyclerView.ItemDecoration
給每一項Item視圖添加子View,例如可以進行畫分隔線之類的
RecyclerView.ItemAnimator
負責處理數據添加或者刪除時候的動畫效果
(三).RecyclerView基本實現:
我這邊實例采用Android Studio 1.3.2。
1.添加庫依賴:
dependencies {
…….
compile'com.android.support:recyclerview-v7:23.1.1'
}
2.新建布局,引入RecyclerView控件:
3.在Activity中獲取RecyclerView控件然後進行設置LayoutManger以及Adapter即可,和ListView的寫法有點類似:
/**
* 當前類注釋:RecyclerView使用實例測試demo
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.test
* 作者：江清清 on 15/11/17 15:10
* 郵箱：[email protected]
* QQ： 781931404
* 公司：江蘇中天科技軟件技術有限公司
*/
public class RecyclerViewTestActivity extends BaseActivity {
private LinearLayout top_bar_linear_back;
private TextView top_bar_title;
private RecyclerView recyclerView_one;
private RecyclerView.Adapter mAdapter;
private LinearLayoutManager mLayoutManager;
@Override
protected void onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recyclerview_test_layout);
top_bar_linear_back=(LinearLayout)this.findViewById(R.id.top_bar_linear_back);
top_bar_linear_back.setOnClickListener(new CustomOnClickListener());
top_bar_title=(TextView)this.findViewById(R.id.top_bar_title);
top_bar_title.setText(RecyclerView使用實例);
//開始設置RecyclerView
recyclerView_one=(RecyclerView)this.findViewById(R.id.recyclerView_one);
//設置固定大小
recyclerView_one.setHasFixedSize(true);
//創建線性布局
mLayoutManager = newLinearLayoutManager(this);
//垂直方向
mLayoutManager.setOrientation(OrientationHelper.VERTICAL);
//給RecyclerView設置布局管理器
recyclerView_one.setLayoutManager(mLayoutManager);
//創建適配器，並且設置
mAdapter = newTestRecyclerAdapter(this);
recyclerView_one.setAdapter(mAdapter);
}
class CustomOnClickListener implements View.OnClickListener{
@Override
public void onClick(View v) {
RecyclerViewTestActivity.this.finish();
}
}
}
4.自定義一個適配器來進行創建item view以及綁定數據
/**
* 當前類注釋:RecyclerView 數據自定義Adapter
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.adapter.base
* 作者：江清清 on 15/11/18 22:29
* 郵箱：[email protected]
* QQ： 781931404
* 公司：江蘇中天科技軟件技術有限公司
*/
public class TestRecyclerAdapter extends RecyclerView.Adapter{
private LayoutInflater mInflater;
private String[] mTitles=null;
public TestRecyclerAdapter(Context context){
this.mInflater=LayoutInflater.from(context);
this.mTitles=new String[20];
for (int i=0;i<20;i++){
int index=i+1;
mTitles[i]=item+index;
}
}
/**
* item顯示類型
* @param parent
* @param viewType
* @return
*/
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
Viewview=mInflater.inflate(R.layout.item_recycler_layout,parent,false);
//view.setBackgroundColor(Color.RED);
ViewHolder viewHolder=new ViewHolder(view);
return viewHolder;
}
/**
* 數據的綁定顯示
* @param holder
* @param position
*/
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.item_tv.setText(mTitles[position]);
}
@Override
public int getItemCount() {
return mTitles.length;
}
//自定義的ViewHolder，持有每個Item的的所有界面元素
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView item_tv;
public ViewHolder(View view){
super(view);
item_tv = (TextView)view.findViewById(R.id.item_tv);
}
}
這個自定義Adapter和我們在使用Listview時候的Adapter相比還是有點不太一樣的，首先這邊我們需要繼承RecyclerView.Adaper類，然後實現兩個重要的方法onBindViewHodler()以及onCreateViewHolder(),這邊我們看出來區別，使用RecyclerView控件我們就可以把Item View視圖創建和數據綁定這兩步進行分來進行管理，用法就更加方便而且靈活了,並且我們可以定制打造千變萬化的布局。同時這邊我們還需要創建一個ViewHolder類，該類必須繼承自RecyclerView.ViewHolder類，現在Google也要求我們必須要實現ViewHolder來承載Item的視圖。
該Demo運行效果如下:
上面的例子我們這邊比較簡單使用LinearLayoutManager來實現了，其中布局是采用垂直布局的，當然我們還可以設置線性布局的方向為橫向，只要如下設置即可:
mLayoutManager.setOrientation(OrientationHelper.HORIZONTAL);
運行效果如下:
那麼另外兩種內置的布局如下:
1.GridLayoutManger：使用如下設置:
GridLayoutManager girdLayoutManager=new GridLayoutManager(this,4);
recyclerView_one.setLayoutManager(girdLayoutManager);
運行效果如下:
2.GridLayoutManger：使用如下設置:
StaggeredGridLayoutManager staggeredGridLayoutManager=new StaggeredGridLayoutManager(2,OrientationHelper.VERTICAL);
recyclerView_one.setLayoutManager(staggeredGridLayoutManager);
(四).RecyclerView分隔線實現(ItemDecoration):
大家肯定觀察到上面的顯示效果還是比較丑，例如就沒有分隔線這個效果，下面我們一起來實現以下分隔線的效果。還記得前面的一個表格中有寫關於RecyclerView的相關類:
RecyclerView.ItemDecoration
給每一項Item視圖添加子View,可以進行畫分隔線之類的東西
我們可以創建一個繼承RecyclerView.ItemDecoration類來繪制分隔線，通過ItemDecoration可以讓我們每一個Item從視覺上面相互分開來，例如ListView的divider非常相似的效果。當然像我們上面的例子ItemDecoration我們沒有設置也沒有報錯哦，那說明ItemDecoration我們並不是強制需要使用，作為我們開發者可以設置或者不設置Decoration的。實現一個ItemDecoration，系統提供的ItemDecoration是一個抽象類，內部除去已經廢棄的方法以外，我們主要實現以下三個方法:
public static abstract class ItemDecoration {
public void onDraw(Canvas c,RecyclerView parent, State state) {
onDraw(c, parent);
}
public void onDrawOver(Canvas c,RecyclerView parent, State state) {
onDrawOver(c, parent);
}
public void getItemOffsets(RectoutRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect,((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
}
又因為當我們RecyclerView在進行繪制的時候會進行繪制Decoration,那麼會去調用onDraw和onDrawOver方法，那麼這邊我們其實只要去重寫onDraw和getItemOffsets這兩個方法就可以實現啦。然後LayoutManager會進行Item布局的時候，回去調用getItemOffset方法來計算每個Item的Decoration合適的尺寸，下面我們來具體實現一個Decoration。TestDecoration.java
/**
* 當前類注釋:自定義實現一個Decoration分隔線
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.widget
* 作者：江清清 on 15/11/19 12:29
* 郵箱：[email protected]
* QQ： 781931404
* 公司：江蘇中天科技軟件技術有限公司
*/
public class TestDecoration extends RecyclerView.ItemDecoration {
//采用系統內置的風格的分割線
private static final int[] attrs=newint[]{android.R.attr.listDivider};
private Drawable mDivider;
public TestDecoration(Context context) {
TypedArray typedArray=context.obtainStyledAttributes(attrs);
mDivider=typedArray.getDrawable(0);
}
/**
* 進行自定義繪制
* @param c
* @param parent
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
int top=parent.getPaddingTop();
intbottom=parent.getHeight()-parent.getPaddingBottom();
int childCount=parent.getChildCount();
for(int i=0;i
我這邊實例中采用系統主題(android.R.attr.listDivider)來設置成分隔線的，然後來獲取尺寸,位置進行setBound(),繪制，接著通過outRect.set()來設置繪制整個區域范圍，最後不要忘記往RecyclerView中設置該自定義的分割線,
//添加分隔線
recyclerView_one.addItemDecoration(newTestDecoration(this));
運行效果如下:
上面的分割線效果只是垂直畫了分割線，但是我們水平方向也要進行畫分割線，那麼我們下面對於自定義的Decoration進行改進，AdvanceDecoration.java就出現啦。
/**
* 當前類注釋:改進之後的自定義Decoration分割線
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.widget
* 作者：江清清 on 15/11/19 12:53
* 郵箱：[email protected]
* QQ： 781931404
* 公司：江蘇中天科技軟件技術有限公司
*/
public class AdvanceDecoration extends RecyclerView.ItemDecoration{
//采用系統內置的風格的分割線
private static final int[] attrs=newint[]{android.R.attr.listDivider};
private Drawable mDivider;
private int orientation;
public AdvanceDecoration(Contextcontext,int orientation) {
TypedArray typedArray=context.obtainStyledAttributes(attrs);
mDivider=typedArray.getDrawable(0);
typedArray.recycle();
this.orientation=orientation;
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
drawHDeraction(c,parent);
drawVDeraction(c,parent);
}
/**
* 繪制水平方向的分割線
* @param c
* @param parent
*/
private void drawHDeraction(Canvas c,RecyclerView parent){
int left=parent.getPaddingLeft();
intright=parent.getWidth()-parent.getPaddingRight();
int childCount=parent.getChildCount();
for(int i=0;i
改良之後的自定義分割器的構造函數中新增一個int參數，用來表示橫向還是縱向布局，這樣我們可以分別來繪制分割線。具體使用方法:
recyclerView_one.addItemDecoration(newAdvanceDecoration(this,OrientationHelper.VERTICAL));
運行比較效果如下:
1.橫向
2.縱向
(五).RecyclerView高級用戶(監聽事件處理)
我們知道在ListView使用的時候，該控件給我們提供一個onItemClickListener監聽器，這樣當我們的item發生觸發事件的時候，會回調相關的方法，以便我們方便處理Item點擊事件。對於RecyclerView來講，非常可惜的時候，該控件沒有給我們提供這樣的內置監聽器方法，不過我們可以進行改造實現。我們先來看一下之前我們寫得TestRecyclerAdapter中的onCreateViewHolder()方法中的代碼:
public ViewHolder onCreateViewHolder(ViewGroupparent, int viewType) {
Viewview=mInflater.inflate(R.layout.item_recycler_layout,parent,false);
//這邊可以做一些屬性設置，甚至事件監聽綁定
//view.setBackgroundColor(Color.RED);
ViewHolder viewHolder=newViewHolder(view);
return viewHolder;
}
該方法創建一個ViewHolder，其中承載的就是每一項Item View視圖，那麼我們可以在view創建出來之後給它進行添加相應的屬性或者監聽方法，例如:背景顏色,大小,以及點擊事件。既然可以這樣解決，OK，我們給View添加一個onClickListener監聽器，然後點擊的時候回調onClick()方法。同時我們需要自定義一個類似於onItemClickListener()的監聽器來處理。
/**
* 自定義RecyclerView 中item view點擊回調方法
*/
interface OnRecyclerItemClickListener{
/**
* item view 回調方法
* @param view 被點擊的view
* @param position 點擊索引
*/
void onItemClick(View view, intposition);
}
然後聲明以及Adapter初始化的時候傳入進去:
public TestRecyclerAdapter(Contextcontext,OnRecyclerItemClickListener onRecyclerItemClickListener){
……..
this.onRecyclerItemClickListener=onRecyclerItemClickListener;
}
然後我們在onClick回調方法中調用OnRecyclerItemClickListener接口的方法。
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(onRecyclerItemClickListener!=null){
onRecyclerItemClickListener.onItemClick(view, (int)view.getTag());
}
}
});
上面的onItemClick中第二個參數的position，采用view.getTag的方法獲取，那麼我們就需要在onBindViewHolder()方法中設置一個tag了.
public voidonBindViewHolder(ViewHolder holder, int position) {
holder.item_tv.setText(mTitles[position]);
holder.itemView.setTag(position);
}
最後我們在外部使用一下接口:
mAdapter = new TestRecyclerAdapter(this, new TestRecyclerAdapter.OnRecyclerItemClickListener() {
@Override
public void onItemClick(View view,int position) {
Toast.makeText(RecyclerViewTestActivity.this, 點擊了第+position+項, Toast.LENGTH_SHORT).show();
}
});
運行結果如下:
(六).RecyclerView數據添加刪除處理
講了以上RecyclerView中各種用戶，處理之後，現在我們來看一下當數據發生變化之後的處理。例如我們在使用ListView的時候，當數據發生變化的時候可以通過notifyDatasetChange()來刷新界面。對於RecyclerView控件來講，給我們提供更加高級的使用方法notifyItemInserted(position)和notifyItemRemoved(position)
我們可以在TestRecyclerAdapter中添加數據新增和數據刪除的方法如下:
//添加數據
public void addItem(String data, intposition) {
mTitles.add(position, data);
notifyItemInserted(position);
}
//刪除數據
public void removeItem(String data) {
int position = mTitles.indexOf(data);
mTitles.remove(position);
notifyItemRemoved(position);
}
然後我們在Activity中進行調用即可:
//添加數據
mAdapter.addItem(additem,5);
//刪除數據
mAdapter.removeItem(item4);
在運行之前我們不要忘記RecyclerView給提供了動畫設置，我這邊就直接采用了默認動畫，設置方法如下:
//添加默認的動畫效果
recyclerView_one.setItemAnimator(new DefaultItemAnimator());
最終運行效果如下圖:
(七).RecyclerView總結
到此為止就完成我們RecyclerView控件使用的第一講內容，其中包括控件的基本介紹，基本使用，高級用法(自定義間隔符,加入點擊監聽事件以及Item添加刪除動畫處理)。總體來講RecyclerView控件是非常不錯，尤其在布局以及數據綁定，動畫方面，除了系統內置的三種布局方式之外，我們還可以定制出我們自己的布局管理器。同時當item數據發生變化的時候還給我們提供非常炫的效果。相信大家在今天這一講之後，會越來越愛上RecyclerView控件的使用，從此可以拋棄ListView和GridView啦.
