Android RecyclerView 实现支付宝首页效果

虽然我本人不喜欢支付宝的,但是这个网格本身其实还是不错的,项目更新中更改了一个布局为网格模式,类似支付宝.(估计是产品抄袭的=.=,我不管设计,只管实现就好.)

RecyclerView的功能已经模块化了,如下所示:

类名	描述
RecyclerView.Adapter	托管数据集合，为每个Item创建视图
RecyclerView.ViewHolder	承载Item视图的子视图
RecyclerView.LayoutManager	负责Item视图的布局
RecyclerView.ItemDecoration	为每个Item视图添加子视图，在Demo中被用来绘制Divider
RecyclerView.ItemAnimator	负责添加、删除数据时的动画效果

今天的重点是RecyclerView.ItemDecoration毕竟是来定义分隔线的,那就开始画吧 =.=

首先是模拟数据

public List<GridTabEntity> getData() {

        List<GridTabEntity> data=new ArrayList<GridTabEntity>();

        TypedArray typedArray = getResources().obtainTypedArray(R.array.image_home_arr);//这里是图表

        String[] nameStr=new String[]{

                "提现",

                "自助上单",

                "商品管理",

                "全民营销",

                "消费统计",

                "评价管理",

                "经营管理"

        };

        for (int i = 0; i < nameStr.length; i++) {

            data.add(new GridTabEntity(nameStr[i],false,0,typedArray.getResourceId(i,0)));

        }

        return data;

 }

addItemDecoration 定制分隔线

mGridTab = ((RecyclerView) findViewById(R.id.re_grid));

        mGridTab.setLayoutManager(new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false));

        //dp转px

        final int offset = DisplayUtil.dp2px(this, 1.3f);

        //这里是开始,定制分隔线

        mGridTab.addItemDecoration(new RecyclerView.ItemDecoration() {

            @Override

            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView

                    .State state) {

                super.getItemOffsets(outRect, view, parent, state);

                int childLayoutPosition = parent.getChildLayoutPosition(view);

                if (childLayoutPosition%3!=0){

                    outRect.right=offset/2;

                    outRect.bottom=offset/2;

                }else {

                    outRect.left=offset/2;

                    outRect.right=offset/2;

                    outRect.bottom=offset/2;

                }

            }

            @Override

            public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

                //始化一个Paint

                Paint paint = new Paint();

//                paint.setColor(Color.parseColor("#B8B8B8"));

                paint.setColor(Color.parseColor("#D8D8D8"));

                paint.setStrokeWidth(offset);

                //获得RecyclerView中条目数量

                int childCount = parent.getChildCount();

                //遍历

                for (int i = 0; i < childCount; i++) {

                    //获得子View，也就是一个条目的View，准备给他画上边框

                    View childView = parent.getChildAt(i);

                    //先获得子View的长宽，以及在屏幕上的位置

                    float x = childView.getX();

                    float y = childView.getY();

                    int width = childView.getWidth();

                    int height = childView.getHeight();

                    if (i % 3==2){

                        //h bottom

                        c.drawLine(x, y + height, x + width, y + height, paint);

                        continue;

                    }else {

                        c.drawLine(x + width, y, x + width, y + height, paint);

                        //h bottom

                        c.drawLine(x, y + height, x + width, y + height, paint);

                        continue;

                    }

//                    //根据这些点画条目的四周的线 h:水平 v:垂直

//                    //h top

//                    c.drawLine(x, y, x + width, y, paint);

//                    //v left

//                    c.drawLine(x, y, x, y + height, paint);

//                    //v right

//                    c.drawLine(x + width, y, x + width, y + height, paint);

//                    //h bottom

//                    c.drawLine(x, y + height, x + width, y + height, paint);

                }

                super.onDraw(c, parent, state);

            }

        });

        GridTabAdapter mAdapter = new GridTabAdapter(data);

        mGridTab.setAdapter(mAdapter);

好吧,不要打我,将就着点看,这只是个demo,所以代码很乱,注释是后来加的,应该能看懂吧.

画线的时候注意下,不是所以的"方块"都需要画上下左右的,例如中间的那个方块如果四个方向都画那么必定会有线叠加在一起,那样很难的.(>﹏<。)～

效果:

这是demo效果:

这是实际的效果: