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效果:

这是实际的效果:

Android RecyclerView 实现支付宝首页效果的更多相关文章

  1. iOS仿支付宝首页效果

    代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...

  2. Android -- RecyclerView实现顶部吸附效果

    1,先来看一下今天实现的效果: 2,这次的效果是使用ItemDecoration来实践的,来看一看我们的实现吧 第一步:首先添加依赖,由于我们这些数据是请求网络的,所以一下我们添加网络框架依赖.Rec ...

  3. android支付宝首页、蚂蚁森林效果、视频背景、校园电台、载入收缩动画等源码

    Android精选源码 android实现蚂蚁森林效果源码 android仿支付宝首页应用管理(拖拽排序,添加删除) android校园网络电台客户端源码 android实现按钮伸缩效果源码 一款仿i ...

  4. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  5. android实现类似于支付宝余额快速闪动的效果

    效果如下:   此图片不会动,但实际上是会快速跳动的.  之前看到有支付宝的效果非常牛逼.就是进去看到余额呼噜噜的直接上蹿下跳到具体数字,效果帅,但不知道怎么实现,最近终于知道了. 思路: 首先经常用 ...

  6. iOS仿支付宝首页的刷新布局效果

    代码地址如下:http://www.demodashi.com/demo/12753.html XYAlipayRefreshDemo 运行效果 动画效果分析 1.UI需要变动,向上滑动的时候,顶部部 ...

  7. iOS支付宝 9.x 版本首页效果

    http://www.jianshu.com/p/7516eb852cca 支付宝 9.x 版本首页效果 对于新版支付宝首页的产品功能这里就不说什么了,一大堆人吐槽,我们只想要一个好好的支付工具,阿里 ...

  8. Android 滑动定位+吸附悬停效果实现

    在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...

  9. GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)

    GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...

随机推荐

  1. ASP.NET MVC 请求路径相关参数的获取

    Request.ApplicationPath / Request.CurrentExecutionFilePath /Home/Index Request.FilePath /Home/Index ...

  2. LeetCode-5LongestPalindromicSubstring(C#)

    # 题目 5. Longest Palindromic Substring Given a string S, find the longest palindromic substring in S. ...

  3. 【.net 深呼吸】程序集的热更新

    当一个程序集被加载使用的时候,出于数据的完整性和安全性考虑,程序集文件(在99.9998%的情况下是.dll文件)会被锁定,如果此时你想更新程序集(实际上是替换dll文件),是不可以操作的,这时你得把 ...

  4. Linux常用指令指南,终端装逼利器

    最近搞了台Macbook Pro,就学习了一下Linux命令,在网上查了些资料,看了本书叫<快乐的 Linux 命令行>,里面涉及到了各个方面的命令. 在此将常用的整理出来,以备将来使用. ...

  5. [C#] C# 知识回顾 - 序列化

    C# 知识回顾 -  序列化 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902005.html 目录 序列化的含义 通过序列化保存对象数据 众 ...

  6. JavaWeb——Servlet

    一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互. 这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求 ...

  7. YII 2.x 模板文件的 beginBlock、beginContent、beginCache

    echo '-----------beginBlock--------------------- <br />'; $this->beginBlock('block1', false ...

  8. 【夯实Mysql基础】MySQL性能优化的21个最佳实践 和 mysql使用索引

    本文地址 分享提纲: 1.为查询缓存优化你的查询 2. EXPLAIN 你的 SELECT 查询 3. 当只要一行数据时使用 LIMIT 1 4. 为搜索字段建索引 5. 在Join表的时候使用相当类 ...

  9. 使用Git Bash远程添加分支和简单部署你的静态页面

    新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...

  10. 28个你必须知道的HTML5的新特性,技巧以及技术

    崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<f ...