美文网首页高级UI
RecyclerView 暂无数据 点击重新加载(一)

RecyclerView 暂无数据 点击重新加载(一)

作者: 三月四晴 | 来源:发表于2019-11-22 20:40 被阅读0次

    开发过程中往往会有 列表没有数据就显示 暂无数据点击刷新的需求

    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) {
            super.onDraw(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

    到此就结束

    相关文章

      网友评论

        本文标题:RecyclerView 暂无数据 点击重新加载(一)

        本文链接:https://www.haomeiwen.com/subject/bmnqwctx.html