RecyclerView 暫無數據 點擊重新加載(一)

開發過程中往往會有 列表沒有數據就顯示 暫無數據點擊刷新的需求
image.png
局部刷新可以參考RecyclerView 暫無數據 點擊重新加載 (二)
image.png

可能大家會用一個RelativeLayout寫套一個listview 以及一個暫無數據的ui 有數據顯示就把暫無數據這個樣式隱藏 如果這種頁面多了 複製粘貼也是很煩的一件事情 今天就寫一個簡單的例子用自定義下RecyclerView 實現
直接繼承 RecyclerView 重寫onDraw方法
根據ui的效果要處理三個事情 第一個加載圖片的繪製 以及文字的繪製
先第一步畫一個圖片也就是 前提條件得判斷好getChildCount的數量 只有滿足爲0的時候才代表數據沒有 才進行繪製 重新加載的樣式
Canvas.drawBitmap方法
準備好一張圖片

public void setBitmap(Bitmap bitmap) {
        this.bitmap = bitmap;
    }

算出繪製的座標
image.png

注意的是 我這裏是圖片居中的效果 需要拿到RecyclerView的整體的寬高度減去圖片的寬高除2 就能得到了中心點了

第一步圖片完成了 就執行第二部 繪製文字
Canvas.drawText方法
位置於圖片的下方
image.png
注意的是 Paint 得設置好字體大小樣式等
image.png
setTextSize這個方法傳入得px 而textview得textsize是sp 想要達到textview同樣得大小需要吧sp轉成px

public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

這樣就可以展示了 先看下效果
image.png
ps.沒有圖片就拿隨便找了個圖
 爲了更好的邏輯 我們需要設定一個數據加載完了的標示 滿足這個條件纔去繪製我們的樣式
image.png
最好一步就是去處理點擊事件
重寫dispatchTouchEvent 並在手指離開屏幕進行接口回調
image.png
只要實現並傳遞接口就完工了


public class MyRecyclerView extends RecyclerView {
    Shuaxin shuaxin; //自己瞎寫的接口
    boolean complete;
    Bitmap bitmap;
    Paint paint;
    public MyRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setTextSize(DisplayUtils.sp2px(context,14));
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(Color.BLACK);
    }

    public void setShuaxin(Shuaxin shuaxin) {
        this.shuaxin = shuaxin;
    }

    public void setBitmap(Bitmap bitmap) {
        this.bitmap = bitmap;
    }
    //activity 告訴 recycleview 數據全給你了你自己看着辦
    public void  completeLoad(){
        complete =true;
        invalidate(); //重繪 
    }

    @Override
    public void onDraw(Canvas c) {
        Log.d("RecyclerView","onDraw");
        if(getChildCount()==0 && complete){
            c.drawColor(Color.GREEN);
            int x = (getWidth()-bitmap.getWidth()) /2;
            int y = (getHeight()-bitmap.getHeight()) /2;
            c.drawBitmap(bitmap,x,y,paint);
            c.drawText("暫無數據點擊重新加載",getWidth()/2,
                    (getHeight()/2)+bitmap.getHeight(),paint);


        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        switch (ev.getAction()){

            case    MotionEvent.ACTION_UP :
                if(getChildCount()==0&&this.shuaxin!=null){
                        shuaxin.shuaxin();

                   return true;
                }

        }
        return super.dispatchTouchEvent(ev);
    }
}

activity使用

image.png

到此就結束

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