RecyclerView的五個小例項
阿新 • • 發佈：2019-01-06
一、垂直的RecyclerView，類似listview的效果。
1.首先匯入庫:compile 'com.android.support:appcompat-v7:25.1.0'
2.在佈局中引入RecyclerView.
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v7.widget.RecyclerView>
3.初始化RecyclerView。
recycler_view = (RecyclerView)findViewById(R.id.recycler_view); //設定為垂直的樣式 recycler_view.setLayoutManager(new LinearLayoutManager(mContext)); //使用的是系統預設的分割線 recycler_view.addItemDecoration(new DividerItemDecoration(mContext, DividerItemDecoration.VERTICAL)); //設定介面卡 recycler_view.setAdapter(adapter=new BaseAdapter(mContext,mData)); //設定預設動畫 recycler_view.setItemAnimator(new DefaultItemAnimator());
4.編寫介面卡BaseAdapter
public class BaseAdapter extends RecyclerView.Adapter<BaseAdapter.MyViewHolder> { private Context mContext; private List<String> mData; //自定義點選事件和長按事件 private OnItemClickListener mOnItemClickListener; public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) { this.mOnItemClickListener = mOnItemClickListener; } //構造器 public BaseAdapter(Context mContext, List<String> mData) { this.mContext = mContext; this.mData = mData; } //載入佈局 @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_base, parent, false)); return holder; } //為佈局載入資料 @Override public void onBindViewHolder(MyViewHolder holder, int position) { holder.tv_text.setText(mData.get(position)); setClickListener(holder,position); } //設定點選事件 private void setClickListener(final MyViewHolder holder, int position) { if(mOnItemClickListener!=null){ holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int pos = holder.getLayoutPosition(); mOnItemClickListener.onItemClick(holder.itemView, pos); } }); } holder.itemView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickListener.onItemLongClick(holder.itemView, pos); return true;//返回true可以遮蔽點選監聽的響應 } }); } //總共多少個項 @Override public int getItemCount() { return mData.size(); } //初始化佈局資訊 class MyViewHolder extends RecyclerView.ViewHolder{ TextView tv_text; public MyViewHolder(View itemView) { super(itemView); tv_text = (TextView) itemView.findViewById(R.id.tv_text); } } //新增 public void addData(int position) { mData.add(position, "Insert One"); notifyItemInserted(position); } //刪除 public void removeData(int position) { mData.remove(position); notifyItemRemoved(position); } }
5.新增點選監聽，長按監聽。寫一個介面類。
public interface OnItemClickListener {
void onItemClick(View view, int position);
void onItemLongClick(View view , int position);
}
6.BaseAdapter中已經使用了這個介面，在activity呼叫。
adapter.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
view.startAnimation(animation);
Toast.makeText(mContext, position + " click",
Toast.LENGTH_SHORT).show();
}
@Override
public void onItemLongClick(View view, int position) {
view.startAnimation(animation);
Toast.makeText(mContext, position + " long click",
Toast.LENGTH_SHORT).show();
}
});
7.效果圖
二、網格的RecyclerView。
1.只需要修改兩處程式碼
//設定為水平網格樣式
recycler_view.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.HORIZONTAL));//如果需要垂直，改為垂直即可
////使用的是自定義的網格分割線
recycler_view.addItemDecoration(new DividerGridItemDecoration(mContext));
2.有一個DividerGridItemDecoration這個類需要自定義，網格分割線，程式碼如下：
public class DividerGridItemDecoration extends RecyclerView.ItemDecoration{
private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
private Drawable mDivider;
public DividerGridItemDecoration(Context context)
{
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)
{
drawHorizontal(c, parent);
drawVertical(c, parent);
}
private int getSpanCount(RecyclerView parent)
{
// 列數
int spanCount = -1;
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
spanCount = ((StaggeredGridLayoutManager) layoutManager)
.getSpanCount();
}
return spanCount;
}
public void drawHorizontal(Canvas c, RecyclerView parent)
{
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getLeft() - params.leftMargin;
final int right = child.getRight() + params.rightMargin
+ mDivider.getIntrinsicWidth();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
public void drawVertical(Canvas c, RecyclerView parent)
{
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin;
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
int childCount)
{
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
if ((pos + 1) % spanCount == 0)// 如果是最後一列，則不需要繪製右邊
{
return true;
}
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL)
{
if ((pos + 1) % spanCount == 0)// 如果是最後一列，則不需要繪製右邊
{
return true;
}
} else
{
childCount = childCount - childCount % spanCount;
if (pos >= childCount)// 如果是最後一列，則不需要繪製右邊
return true;
}
}
return false;
}
private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
int childCount)
{
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
childCount = childCount - childCount % spanCount;
if (pos >= childCount)// 如果是最後一行，則不需要繪製底部
return true;
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
// StaggeredGridLayoutManager 且縱向滾動
if (orientation == StaggeredGridLayoutManager.VERTICAL)
{
childCount = childCount - childCount % spanCount;
// 如果是最後一行，則不需要繪製底部
if (pos >= childCount)
return true;
} else
// StaggeredGridLayoutManager 且橫向滾動
{
// 如果是最後一行，則不需要繪製底部
if ((pos + 1) % spanCount == 0)
{
return true;
}
}
}
return false;
}
@Override
public void getItemOffsets(Rect outRect, int itemPosition,
RecyclerView parent)
{
int spanCount = getSpanCount(parent);
int childCount = parent.getAdapter().getItemCount();
if (isLastRaw(parent, itemPosition, spanCount, childCount))// 如果是最後一行，則不需要繪製底部
{
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
} else if (isLastColum(parent, itemPosition, spanCount, childCount))// 如果是最後一列，則不需要繪製右邊
{
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else
{
outRect.set(0, 0, mDivider.getIntrinsicWidth(),
mDivider.getIntrinsicHeight());
}
}
}
3.效果圖
三、用RecyclerView做的四級聯動。這部分程式碼比較多，也比較複雜，請看demo吧
1.效果圖
四、帶重新整理的RecyclerView,這個需要引入一個新的庫，XRecyclerView，用github搜尋一下，用第一個就行。
1.引入XRecyclerView的庫，compile 'com.jcodecraeer:xrecyclerview:1.3.2'，下載地址https://github.com/jianghejie/XRecyclerView
2.在佈局中使用XRecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<com.jcodecraeer.xrecyclerview.XRecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</com.jcodecraeer.xrecyclerview.XRecyclerView>
3.其他的都跟一類似，重新整理時，使用
recycler_view.setLoadingListener(new XRecyclerView.LoadingListener() {
@Override
public void onRefresh() {
refresh();
}
@Override
public void onLoadMore() {
loadMore();
}
});
4.注意重新整理完成，無論上拉還是下拉，完成之後都要執行recycler_view.refreshComplete();，如果下拉載入更多，已經沒有更多了，那麼，需要執行recycler_view.loadMoreComplete();
5.效果圖：
五、用RecyclerView做瀑布流，
1.只需要更改兩處即可
//設定為垂直3列
recycler_view.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));
////item間隔16
recycler_view.addItemDecoration(new SpacesItemDecoration(16));
2.其中SpacesItemDecoration這個類的是為了新增間距，程式碼如下。
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
private int space;
public SpacesItemDecoration(int space) {
this.space=space;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.left=space;
outRect.right=space;
outRect.bottom=space;
if(parent.getChildAdapterPosition(view)==0){
outRect.top=space;
}
}
}
3.這裡還添加了，增加還刪除單項操作，點選增加第一項，長按刪除第二項。因為新增過預設動畫，所以會有效果。
adapter.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
view.startAnimation(animation);
Toast.makeText(mContext, position + " 新增A",
Toast.LENGTH_SHORT).show();
adapter.addData(0);
}
@Override
public void onItemLongClick(View view, int position) {
view.startAnimation(animation);
Toast.makeText(mContext, position + " 刪除B",
Toast.LENGTH_SHORT).show();
adapter.removeData(2);
}
});
4.效果圖
六、多個item的RecyclerView。
1.新建一個DifferentItemAdapter,程式碼如下
public class DifferentItemAdapter extends RecyclerView.Adapter {
private Context mContext;
private List<String> mData;
private static final int CASE1=1;
private static final int CASE2=2;
public DifferentItemAdapter(Context mContext, List<String> mData) {
this.mContext = mContext;
this.mData = mData;
}
//自定義點選事件和長按事件
private OnItemClickListener mOnItemClickListener;
public void setOnItemClickListener(OnItemClickListener mOnItemClickListener)
{
this.mOnItemClickListener = mOnItemClickListener;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
switch (viewType){
case CASE1:
return new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_base, parent, false));
case CASE2:
return new DifferentHolder(LayoutInflater.from(mContext).inflate(R.layout.item_different,parent,false));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if(position%2==0){
DifferentHolder holder1= (DifferentHolder) holder;
holder1.tv_text.setText(mData.get(position));
}else{
MyViewHolder holder2= (MyViewHolder) holder;
holder2.tv_text.setText(mData.get(position));
}
setClickListener(holder,position);
}
@Override
public int getItemCount() {
return mData.size();
}
//這個非常重要，根據這個選擇不同的佈局
@Override
public int getItemViewType(int position) {
if(position%2==0){
return CASE2;
}else{
return CASE1;
}
}
//初始化佈局資訊
class MyViewHolder extends RecyclerView.ViewHolder{
TextView tv_text;
public MyViewHolder(View itemView) {
super(itemView);
tv_text = (TextView) itemView.findViewById(R.id.tv_text);
}
}
class DifferentHolder extends RecyclerView.ViewHolder{
TextView tv_text;
public DifferentHolder(View itemView) {
super(itemView);
tv_text = (TextView) itemView.findViewById(R.id.tv_text);
}
}
//設定點選事件
private void setClickListener(final RecyclerView.ViewHolder holder, int position) {
if(mOnItemClickListener!=null){
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int pos = holder.getLayoutPosition();
mOnItemClickListener.onItemClick(holder.itemView, pos);
}
});
}
holder.itemView.setOnLongClickListener(new View.OnLongClickListener()
{
@Override
public boolean onLongClick(View v)
{
int pos = holder.getLayoutPosition();
mOnItemClickListener.onItemLongClick(holder.itemView, pos);
return true;//返回true可以遮蔽點選監聽的響應
}
});
}
}`
