Android UI設計之RecyclerView

轉載自 http://lib.csdn.net/article/android/39879

RecyclerView簡介

RecyclerView是繼ListView和GridView後Google又一力作,它不僅可以很方便的實現瀑布流效果,而且大幅度降低了視圖的耦合性,在設計上有很高的自由度。

本文主要分析RecyclerView的使用技巧以及優化。

使用前請自行添加依賴:

compile 'com.android.support:recyclerview-v7:23.3.0'

RecyclerView原理

RecyclerViewRecyclerView與ListView原理是類似的,都是僅僅維護少量的View並且可以展示大量的數據集,此外通過Google提供的方法可以快捷管理RecyclerView的風格樣式。

  • LayoutManager控制每個Item的排列方式
  • ItemDecoration控制每個Item的修飾
  • ItemAnimator設置Item的增刪動畫
  • Adapter爲每個Item提供對應的數據

LayoutManager:用來確定每一個item如何進行排列擺放,何時展示和隱藏。回收或重用一個View的時候,LayoutManager會向適配器請求新的數據來替換舊的數據,這種機制避免了創建過多的View和頻繁的調用findViewById方法(與ListView原理類似)。

目前SDK中提供了三種自帶的LayoutManager: 
LinearLayoutManager 
GridLayoutManager 
StaggeredGridLayoutManager(錯列網格佈局)

RecyclerView四步走

//設置佈局樣式
mRecyclerView.setLayoutManager();
//設置adapter
mRecyclerView.setAdapter()
//設置Item增加、移除動畫
mRecyclerView.setItemAnimator();
//添加分割線
mRecyclerView.addItemDecoration();

OK,基本就是這麼個流程,下面來逐步進行實踐


ItemDecoration

官方提供了分割線接口ItemDecoration,實現該方法可以自定義你所需要的分割線。

一個很好的重寫Demo,有愛自取,來源於翔哥文章 
使用:

mRecyclerView.addItemDecoration(new DividerLinearItemDecoration(this, LinearLayout.HORIZONTAL));
mRecyclerView.addItemDecoration(new DividerLinearItemDecoration(this, LinearLayout.VERTICAL));

分別添加橫線和豎線

線性佈局分割線

public class DividerLinearItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;

    public DividerLinearItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }


    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();

        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 left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

自定義效果: 
上面代碼已經對分割線做了很好的繪製,注意到還都是用了系統的默認分割線android.R.attr.listDivider,基於此我們可以很容易的去自定義的分割線的效果。

自定義流程: 
在style文件中添加如下代碼:

<style name="AppTheme" parent="AppBaseTheme">
      <item name="android:listDivider">@drawable/divider_bg</item>  
    </style>

然後自己利用代碼繪製一個drawable對象作爲分割線底色即可。比如

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent"/>
</shape>


不會用的請移步Android中的Drawable

setItemAnimator

Itme增刪動畫效果,官方提供了一個默認的動畫效果,直接添加即可,

recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默認動畫

當然你也可以去自行定製。

嗯,自定義的終究難以滿足各位的需求,來一個我目前所知最全面的RecyclerView動畫庫,有愛自取,嗯。RecyclerView Animators

RecyclerView.Adapter

RecyclerView的適配器默認要求必須實現系統提供的RecyclerView.ViewHolder接口,

寫法:

public class AnimationAdapter extends RecyclerView.Adapter<AnimationAdapter.MyViewHolder>{

    @Override
    public AnimationAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    //請首先實現RecyclerView.ViewHolder
    public class MyViewHolder extends RecyclerView.ViewHolder{

        public MyViewHolder(View itemView) {
            super(itemView);
        }
    }
}

顯然,要求必須實現三個方法,在此之前需要先實現RecyclerView.ViewHolder


LayoutManager

RecyclerView的關鍵,決定佈局的樣式。 
前面已經提到主要有三類佈局形式,線性佈局、網格佈局和瀑布流佈局,它們分別對應着LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager。

通過這三中佈局管理我們可以很容易的動態調整界面設計,比如我們默認顯示一個線性佈局

mRecyclerView.setLayoutManger(new           LinearLayoutManger(Context,LinearLayoutManger.VERTICAL,false);

當發生界面旋轉或其他需求需要顯示網格樣式佈局那麼可以直接重設LayoutManger爲我們想要的佈局
mRecyclerView.setLayoutManger(new GridLayoutManager(this,
3,GridLayoutManager.VERTICAL,false));
添加和移除Item的實現
//添加Item
    public void addItem(int position) {
        Animation animation;
        animation = animationList.get((int)(Math.random()*9));
        animationList.add(position, animation);
        //使總position+1
        notifyItemInserted(position);
    }
    //移除Item
    public void delItem(int position) {
        animationList.remove(position);
        //使總position-1
        notifyItemRemoved(position);
    }

實現RecyclerView的Item監聽

實現監聽主要有兩種方式:

  • 在適配器中創建回調接口
  • 覆寫addOnItemTouchListener方法

在適配器中創建回調接口

第一步:

//爲Item創建監聽接口
    public interface OnRecyclerViewItemClickListener {
        void onItemClick(View view , Data data);
    }
view和data分別對應當前Item的View視圖和數據。 
第二步:
 //實例化接口接收外部設置的listener
    private OnRecyclerViewItemClickListener mOnItemClickListener;

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

第三步:在onBindViewHolder中添加如下代碼
// 如果設置了回調,則設置點擊事件
    if (mOnItemClickLitener != null)
    {
        holder.itemView.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                int position = holder.getLayoutPosition();
                mOnItemClickLitener.onItemClick(holder.itemView, position);
            }
        });
    }

其實,你也可以在onCreateViewHolder爲所有Item設置好監聽,但相比於這種方式,靈活度卻要低了一點。

so,這樣就爲每個Item設定了回調監聽,當然你完全可以爲holder.itemView設置其他任何你所需要的觸摸監聽。

覆寫addOnItemTouchListener方法

大致看一下實現吧

 mRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            @Override
            public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
                return false;
            }

            @Override
            public void onTouchEvent(RecyclerView rv, MotionEvent e) {

            }

            @Override
            public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

            }
        });

每個方法都對應着不同的用法,不懂得請速速參考郭霖或者鴻洋大神的博客。懶人鏈接


基於此,做了一個小Demo,效果如下: 
線性佈局 
這裏寫圖片描述

網格佈局 
這裏寫圖片描述

瀑布流 
這裏寫圖片描述

圖片太大,請原諒用了三個圖。


關於監聽事件的測試(點擊後刪除點擊位置元素):

這裏寫圖片描述

ps: 
- notifyItemChanged(int position):當Item數據改動時回調onBindViewHolder即可更新數據。 
- notifyItemRangeChanged(int positionStart, int 
itemCount):刷新從positionStart開始itemCount數量的item 
- notifyItemInserted(int position):插入Item,(記得更新數據表) 
- notifyItemMoved(int fromPosition, int toPosition):從fromPosition移動到toPosition爲止的時候可以使用這個方法刷新 
- notifyItemRangeInserted(int positionStart, int itemCount):批量添加。 
- notifyItemRemoved(int position):第position個被刪除的時候刷新,同樣會有動畫。 
- notifyItemRangeRemoved(int positionStart, int itemCount):批量刪除。 
- notifyDataSetChanged():更新數據表和Item位置信息











發佈了32 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章