RecycleView 分割線設置及監聽滾動狀態

一、RecycleView 分割線

ListView中的分割線可以通過屬性divider和dividerHeight分別設置顏色值/圖片及分割線高度。而RecycleView並沒有提供這兩個屬性設置分割線。
作爲ListView的升級版列表控件,當然也是支持分割線的設置的。RecycleView分割線需要通過addItemDecoration(ItemDecoration decor)設置;

ItemDecoration有3個方法,ItemDecoration並沒有對其實現,需要我們自己實現自定義的分割線;
onDraw:其繪製將會在每個Item被繪製之前進行;
onDrawOver:在繪製完Item後進行繪製;
getItemOffsets:通過outRect.set()爲每個item設置偏移量。

下面是網上提供的通用分割線實現類,可以根據自己不同需求做修改;

public class RecycleViewDivider extends RecyclerView.ItemDecoration {

    private Paint mPaint;
    private Drawable mDivider;
    private int mDividerHeight = 2;//分割線高度,默認爲2px
    private int mOrientation;//列表的方向:LinearLayoutManager.VERTICAL或LinearLayoutManager.HORIZONTAL
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    /**
     * 默認分割線:高度爲2px,顏色爲灰色
     *
     * @param context
     * @param orientation 列表方向
     */
    public RecycleViewDivider(Context context, int orientation) {
        if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager
                .HORIZONTAL) {
            throw new IllegalArgumentException("請輸入正確的參數!");
        }
        mOrientation = orientation;

        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
    }

    /**
     * 自定義分割線
     *
     * @param context
     * @param orientation 列表方向
     * @param drawableId  分割線圖片,高度默認爲圖片原始高度
     */
    public RecycleViewDivider(Context context, int orientation, int drawableId) {
        this(context, orientation);
        mDivider = ContextCompat.getDrawable(context, drawableId);
        mDividerHeight = mDivider.getIntrinsicHeight();
    }

    /**
     * 自定義分割線
     *
     * @param context
     * @param orientation 列表方向
     * @param drawable    分割線圖片,高度默認爲圖片原始高度
     */
    public RecycleViewDivider(Context context, int orientation, Drawable drawable) {
        this(context, orientation);
        mDivider = drawable;
        mDividerHeight = mDivider.getIntrinsicHeight();
    }

    /**
     * 自定義分割線
     *
     * @param context
     * @param orientation 列表方向
     * @param drawable    分割線圖片
     * @param drawableHeight    分割線圖片高度
     */
    public RecycleViewDivider(Context context, int orientation, Drawable drawable, int
            drawableHeight) {
        this(context, orientation);
        mDivider = drawable;
        mDividerHeight = drawableHeight;
    }

    /**
     * 自定義分割線
     *
     * @param context
     * @param orientation   列表方向
     * @param dividerHeight 分割線高度
     * @param dividerColor  分割線顏色
     */
    public RecycleViewDivider(Context context, int orientation, int dividerHeight, int
            dividerColor) {
        this(context, orientation);
        mDividerHeight = dividerHeight;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(dividerColor);
        mPaint.setStyle(Paint.Style.FILL);
    }


    //獲取分割線尺寸
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State
            state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(0, 0, 0, mDividerHeight);
    }

    //繪製分割線
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        if (mOrientation == LinearLayoutManager.VERTICAL) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    //繪製橫向 item 分割線
    private void drawHorizontal(Canvas canvas, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getMeasuredWidth() - parent.getPaddingRight();
        final int childSize = parent.getChildCount();
        for (int i = 0; i < childSize; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + layoutParams.bottomMargin;
            final int bottom = top + mDividerHeight;
            if (mDivider != null) {
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
            if (mPaint != null) {
                canvas.drawRect(left, top, right, bottom, mPaint);
            }
        }
    }

    //繪製縱向 item 分割線
    private void drawVertical(Canvas canvas, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
        final int childSize = parent.getChildCount();
        for (int i = 0; i < childSize; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + layoutParams.rightMargin;
            final int right = left + mDividerHeight;
            if (mDivider != null) {
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
            if (mPaint != null) {
                canvas.drawRect(left, top, right, bottom, mPaint);
            }
        }
    }
}

這裏設置橫向圖片分割線,分割線的高度默認爲圖片高度;

 mRecyclerView.addItemDecoration(new RecycleViewDivider(this, LinearLayoutManager
                .HORIZONTAL, R.mipmap.divier_img));

二、RecycleView 監聽滾動狀態、及頂部/末尾位置

還記得ListView是如何監聽滾動到頂部或末尾的嗎?通過設置setOnScrollListener實現的;

mListView.setOnScrollListener(new AbsListView.OnScrollListener() {

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        // TODO Auto-generated method stub
        if (scrollState==OnScrollListener.SCROLL_STATE_IDLE) {
            // 滾動停止
        }else if (scrollState==OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {
            // 手指滾動狀態
        }else if (scrollState==OnScrollListener.SCROLL_STATE_FLING) {
            // 手指不動了,但是屏幕還在滾動狀態,靠慣性滾動
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        // TODO Auto-generated method stub
        if (firstVisibleItem==0) {
            // 滾動到頂部
        }else if (firstVisibleItem+visibleItemCount>= totalItemCount) {
            // 滾動到尾部
        }
    }
});

在RecycleView中,可以通過線性佈局對象LinearLayoutManager監聽頂部/尾部位置;
其提供以下方法(主要區別是item是否完全顯示,還是存在一半被遮擋);
findFirstVisibleItemPosition() :第一個顯示的item位置;
findFirstCompletelyVisibleItemPosition() :第一個完全顯示的item位置;
findLastVisibleItemPosition() :最後一個顯示的item位置;
findLastCompletelyVisibleItemPosition():最後一個完全顯示的item位置。

接着設置滾動監聽setonScrollListener,然後對第一個顯示的item位置和末尾顯示的item位置判斷是否滾動到屏幕開始/末尾。

mRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            // TODO Auto-generated method stub
            if (!(mLayoutManager instanceof LinearLayoutManager)) {
                Toast.makeText(MainActivity.this, "不是線性的佈局結構", Toast.LENGTH_SHORT).show();
                return;
            }
            LinearLayoutManager linearLayoutManager = (LinearLayoutManager) mLayoutManager;
            if (linearLayoutManager.findFirstCompletelyVisibleItemPosition() == 0) {
                Toast.makeText(MainActivity.this, "滾動到頂部", Toast.LENGTH_SHORT).show();
            }
            if (linearLayoutManager.findLastCompletelyVisibleItemPosition() == mRecyclerView
                    .getAdapter().getItemCount() - 1) {
                Toast.makeText(MainActivity.this, "滾動到尾部", Toast.LENGTH_SHORT).show();
            }
        }

        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            // TODO Auto-generated method stub
            if (newState==RecyclerView.SCROLL_STATE_IDLE){
                Toast.makeText(MainActivity.this, "滾動停止", Toast.LENGTH_SHORT).show();
            }else if (newState == RecyclerView.SCROLL_STATE_DRAGGING){
                Toast.makeText(MainActivity.this, "手指拖動", Toast.LENGTH_SHORT).show();
            }else if (newState==RecyclerView.SCROLL_STATE_SETTLING){
                Toast.makeText(MainActivity.this, "手指離開屏幕,滑動", Toast.LENGTH_SHORT).show();
            }
        }
    });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章