• RecyclerView 添加自定义分割线


    默认的浅灰色的分割线在某些时候并不能满足我们的要求,这时就需要自定义分割线了。

    我们可以通过两种方式来实现:调用 DividerItemDecoration.setDrawable 方法或者继承实现 RecyclerView.ItemDecoration 类来实现。

    一、调用 DividerItemDecoration.setDrawable 方法

    实现分割线只需要调用 setDrawable(@NonNull Drawable drawable)方法,然后传入一个Drawable函数对象就可以了。

    现在可以用shape来编写一个分割线样式:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <gradient
            android:centerColor="#ff00ff00" //绿色
            android:endColor="#ff0000ff"    //蓝色
            android:startColor="#ffff0000"  //红色
            android:type="linear" />
        <size android:height="3dp" />
    
    </shape>

    添加分割线的代码改为如下:

    //添加自定义分割线
    DividerItemDecoration divider = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
    divider.setDrawable(ContextCompat.getDrawable(this,R.drawable.custom_divider));
    recyclerView.addItemDecoration(divider);

    运行起来之后,就可以看到一条多彩的分割线了:

    二、继承实现 RecyclerView.ItemDecoration 类

    这块就不多赘述了,直接贴代码:

    public class RecyclerViewDivider extends RecyclerView.ItemDecoration{
        private Paint mPaint;
        //分割线
        private Drawable mDivider;
        //分割线高度,默认是2px
        private int mDividerHeight = 2;
        //列表的方向:LinearLayoutManager.VERTICAL或LinearLayoutManager.HORIZONTAL
        private int mOrientation;
        
        private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    
        /**
         *
         * 默认分割线:高度为2px,颜色为灰色
         * 获取属性值,
         *
         * @param context
         * @param orientation  列表方向
         */
    
        public RecyclerViewDivider(Context context, int orientation){
            if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL) {
                throw new IllegalArgumentException("请输入正确的参数!");
            }
            mOrientation = orientation;
            final TypedArray array = context.obtainStyledAttributes(ATTRS);
            mDivider = array.getDrawable(0);
            array.recycle();
            mDividerHeight = mDivider.getIntrinsicHeight();
        }
    
        /**
         * 自定义分割线
         *
         * @param context
         * @param orientation 列表方向
         * @param drawableId  分割线图片
         */
        public RecyclerViewDivider(Context context, int orientation, int drawableId) {
            if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL) {
                throw new IllegalArgumentException("请输入正确的参数!");
            }
            mOrientation = orientation;
            
            mDivider = ContextCompat.getDrawable(context, drawableId);
            mDividerHeight = mDivider.getIntrinsicHeight();
        }
        
    
        /**
         * 自定义分割线
         *
         * @param context
         * @param orientation   列表方向
         * @param dividerHeight 分割线高度
         * @param dividerColor  分割线颜色
         */
        public RecyclerViewDivider(Context context, int orientation, int dividerHeight, int dividerColor) {
    
            if (orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL) {
                throw new IllegalArgumentException("请输入正确的参数!");
            }
            mOrientation = 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) {
            
            if (mOrientation == LinearLayoutManager.VERTICAL) {
                outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
            } else {
                outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
            }
    
            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){
                drawVerticalLine(c,parent);
            }else{
                drawHorizontalLine(c,parent);
            }
        }
    
        //为横方向item, 画分割线
        private void drawHorizontalLine(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);
                }
            }
        }
    
        //为竖方向item, 画分割线
        private void drawVerticalLine(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);
                }
            }
        }
    }
  • 相关阅读:
    react 安装脚手架过程
    微信小程序-分享功能
    echarts 实现多图联动显示tooltip
    dom 相同父节点查找
    js 给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果
    vue手写el-form组件
    vue组件传值、通信
    vue项目打包桌面应用 exe程序 以及打包为安装程序exe
    vue 使用echarts来制作图表
    前端数据可视化插件-图表
  • 原文地址:https://www.cnblogs.com/renhui/p/11465200.html
Copyright © 2020-2023  润新知