RecyclerView实现仿支付宝应用管理

前言

由于公司项目有一个应用管理的功能和支付宝的应用管理功能非常像,所有的信息都是从服务端拉去的数据动态生成,有不同的应用分类,有标题等等信息。对于实现这种效果可以用ListView 或者RecyclerView通过加载多种布局来实现。我们首先需要分析怎么把效果图拆分成几种布局

效果图

从上面的图片中我们可以把布局分为三种类型,其中第一种布局le是

第二种布局类型是:

第三种布局类型

使用RecyclerView加载多种布局,很多人都会,但是这里每排显示的子应用数量是不同的,而所有的数据都是来自同一个数据集合,而且所有的都是现实都是动态生成,所以不可能写死。这个时候是时候来了解GridLayoutManager的setSpanSizeLookup()方法了。具体使用方法我就不介绍啦,贴上官方文档链接

核心代码:

mLayoutManager = new GridLayoutManager(this, 4);

 mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  @Override
  public int getSpanSize(int position) {
  ApplicationBean applicationBean = mDataList.get(position);
  if (applicationBean.getType() == ApplicationBean.Type.TypeOne) {
   return 4;
  } else if (applicationBean.getType() == ApplicationBean.Type.TypeTwo) {
   return 2;
  } else if (applicationBean.getType() == ApplicationBean.Type.TypeThree) {
   return 1;
  } else {
   return 0;
  }
  }
 });
 mRecyclerView.setLayoutManager(mLayoutManager);
 mAdapter = new ApplicationAdapter(mDataList, this);
 mRecyclerView.setAdapter(mAdapter);

adapter代码

package com.huangjie.recyclerview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by huangjie on 2017/11/12.
 */

public class ApplicationAdapter extends RecyclerView.Adapter {
 //布局类型
 private static final int VIEW_TYPE_ONE = 1;
 private static final int VIEW_TYPE_TWO = 2;
 private static final int VIEW_TYPE_THREE = 3;
 private LayoutInflater inflater;
 private Context mContext;
 private ArrayList<ApplicationBean> mDataList;

 public ApplicationAdapter(ArrayList<ApplicationBean> mDataList, Context context) {
 this.mDataList = mDataList;
 mContext = context;
 inflater = LayoutInflater.from(mContext);
 }

 @Override
 public int getItemViewType(int position) {

 if (mDataList.get(position).getType() == ApplicationBean.Type.TypeOne) {
  return VIEW_TYPE_ONE;
 } else if (mDataList.get(position).getType() == ApplicationBean.Type.TypeTwo) {
  return VIEW_TYPE_TWO;
 } else if (mDataList.get(position).getType() == ApplicationBean.Type.TypeThree) {
  return VIEW_TYPE_THREE;
 } else {
  return 0;
 }
 }

 @Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 RecyclerView.ViewHolder viewHolder = null;
 switch (viewType) {
  case VIEW_TYPE_ONE:
  viewHolder = new ViewHolderOne(inflater.inflate(R.layout.item_one, parent, false));
  break;
  case VIEW_TYPE_TWO:
  viewHolder = new ViewHolderTwo(inflater.inflate(R.layout.item_two, parent, false));
  break;
  case VIEW_TYPE_THREE:
  viewHolder = new ViewHolderThree(inflater.inflate(R.layout.item_three, parent, false));
  break;
 }
 return viewHolder;
 }

 @Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

 switch (getItemViewType(position)) {
  case VIEW_TYPE_ONE:
  Log.e("huangjie", mDataList.get(position).getTitle());
  ((ViewHolderOne) holder).title.setText(mDataList.get(position).getTitle());
  break;
  case VIEW_TYPE_TWO:
  ((ViewHolderTwo) holder).title.setText(mDataList.get(position).getName());
  ((ViewHolderTwo) holder).information.setText(mDataList.get(position).getInformation());
  ((ViewHolderTwo) holder).icon.setImageDrawable(
   mContext.getResources().getDrawable(mDataList.get(position).getIcon()));
  break;
  case VIEW_TYPE_THREE:
  ((ViewHolderThree) holder).title.setText(mDataList.get(position).getName());
  ((ViewHolderThree) holder).icon.setImageDrawable(
   mContext.getResources().getDrawable(mDataList.get(position).getIcon()));

  break;
 }
 }

 @Override
 public int getItemCount() {
 return mDataList.size();
 }

 /**
 * 第一种布局类型ViewHolder
 */
 public static class ViewHolderOne extends RecyclerView.ViewHolder {
 private TextView title;

 public ViewHolderOne(View itemView) {
  super(itemView);
  title = (TextView) itemView.findViewById(R.id.text);
 }
 }

 /**
 * 第二种布局类型ViewHolder
 */
 public static class ViewHolderTwo extends RecyclerView.ViewHolder {
 private ImageView icon;
 private TextView title;
 private TextView information;

 public ViewHolderTwo(View itemView) {
  super(itemView);
  icon = (ImageView) itemView.findViewById(R.id.image);
  title = (TextView) itemView.findViewById(R.id.title);
  information = (TextView) itemView.findViewById(R.id.infor);
 }
 }

 /**
 * 第三种布局类型viewholder
 */
 public static class ViewHolderThree extends RecyclerView.ViewHolder {
 private ImageView icon;
 private TextView title;

 public ViewHolderThree(View itemView) {
  super(itemView);
  icon = (ImageView) itemView.findViewById(R.id.image);
  title = (TextView) itemView.findViewById(R.id.title);
 }
 }
}

源码下载链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android中RecyclerView布局代替GridView实现类似支付宝的界面
  • Android自定义控件实现支付宝记账饼图
  • Android使用view仿支付宝月账单
  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效
  • Android仿支付宝的头部伸缩动画效果
  • Android app第三方支付宝支付接入教程
  • Android仿支付宝支付从底部弹窗效果
  • Android支付宝和微信支付集成
  • Android接入支付宝实现支付功能实例
(0)

相关推荐

  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

    今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

  • Android仿支付宝支付从底部弹窗效果

    我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

  • Android仿支付宝的头部伸缩动画效果

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟

  • Android支付宝和微信支付集成

    场景 随着移动支付的兴起,在我们的app'中,会经常有集成支付的需求.这时候一般都会采用微信和支付宝的sdk 来集成 (一)支付宝支付 在使用支付宝支付的过程中,我们是在服务器端生成订单,客户端访问接口,并得到订单信息,调用接口支付,支付成功后支付宝会分别 异步调用服务器端,并向客户端返回支付结果. 开发步骤: ①注册支付宝账号--进行实名认证--提交审核资料--审核通过 支付宝无线快捷支付接口: b.alipay.com/order/productDetail.htm?productId=20

  • Android自定义控件实现支付宝记账饼图

    本文实例为大家分享了Android实现支付宝记账饼图,点击旋转到最下面,供大家参考,具体内容如下 代码: package com.example.a_102.myapplication7.ui; import java.util.ArrayList; import java.util.List; import android.animation.Animator; import android.animation.ValueAnimator; import android.annotation.

  • Android接入支付宝实现支付功能实例

    我本来是想直接讲Android支付这一块的,包括支付宝,微信,其他第三方整合支付等,但是微信开放平台他对我的账号做了限制,所有我今天就先把重心放在支付宝的支付上,也算是写得尽可能详细些吧,毕竟是第三方的SDK,只要我们耐心的阅读文档和开发引导,这个其实不是很难的,我也是没有用过支付宝的支付,但是我相信,你看完这篇博客,也会对他了如指掌的,好的,我们正文开始 一.准备步骤 1.登录官网 他的官网就是蚂蚁金服的开放平台了,我们可以访问 蚂蚁金服开放平台 ,并且注册账号进行登录 创建应用 如果你是现有

  • Android app第三方支付宝支付接入教程

    支付宝的接入相对比较简单,看看支付宝官网的文档基本都能搞定,但是切记一点让你们的后台也要搞清楚支付宝的流程,重中之重. 1.注意事项 开发前一定要阅读支付宝官方文档 强烈建议签名等处理在后台处理,我这个是测试是在自己本地写的,不要吐槽 想获取支付宝合作商户ID,及支付宝公钥请点击支付宝链接,生成密钥及PKCS8转码工具在文档中 添加Android.permission.INTERNET权限和android.permission.ACCESS_NETWORK_STATE权限 要导入支付宝的包 2.

  • Android中RecyclerView布局代替GridView实现类似支付宝的界面

    单纯使用GridView 通用的两种给GridView 添加分割线的方法:http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers 给Gridview 添加分割线,也就是实现网格布局,不清楚谷歌为什么没有给Gridview 添加一个类似 ListView 的Divider 属性,因此就需要我们自己去添加分割线, 目前两种方法,第一种是 利用GridView 的  android:horizontalSpac

  • Android使用view仿支付宝月账单

    前言 昨夜同门云集推杯又换盏,今朝茶凉酒寒豪言成笑谈.半生累,尽徒然,碑文完美有谁看,隐居山水之间誓与浮名散. 简介 今天给大家带来的是支付宝的月账单view的实现,看到标题,你可能会觉得是自定义view的相关实现,这里可能要让你失望了,因为这里我们用的是github上的一个开源项目. 1. 效果图 2. MPAndroidChart 我们用的是MPAndroidChart打开链接来实现的效果,它可以实现柱状图,饼状图等. 使用方法 1. 添加依赖 你可以选择在build.gradle中添加依赖

  • RecyclerView实现仿支付宝应用管理

    前言 由于公司项目有一个应用管理的功能和支付宝的应用管理功能非常像,所有的信息都是从服务端拉去的数据动态生成,有不同的应用分类,有标题等等信息.对于实现这种效果可以用ListView 或者RecyclerView通过加载多种布局来实现.我们首先需要分析怎么把效果图拆分成几种布局 效果图 从上面的图片中我们可以把布局分为三种类型,其中第一种布局le是 第二种布局类型是: 第三种布局类型 使用RecyclerView加载多种布局,很多人都会,但是这里每排显示的子应用数量是不同的,而所有的数据都是来自

  • Android仿支付宝微信支付密码界面弹窗封装dialog

    一,功能效果 二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性  android:overScrollMode=&quo

  • Android仿qq分组管理的第三方库

    本文实例为大家分享了Android仿qq分组管理的第三方库,供大家参考,具体内容如下 下面先看效果 我们点击展开与折叠分组的功能在库里面是已经封装好的,只能把它已入到项目中,就可以直接用了,十分的方便. 下面直接上核心代码 首先定义分组的对象,相当于上面红色字体的对象,跟分组下每个item的对象: 创建分组的ViewHolder继承第三方库的ParentViewHolder,代码如下(由于父类没有无参构造,所以必须实现父类的一个有参构造,传入的参数相信大家也很清楚): /** * 分组的View

  • IOS 仿支付宝支付屏幕亮度变化机制

    1.首先,在需要实现的界面viewDidLoad中先保存亮度没有变化之前的亮度,因为这个界面消失之后还要变回原来的亮度,变化亮度也相当于用户的一种设置,所以也要保存一下这个状态,因为之后当APP在active和非active切换时候需要知道是否需要为用户做这个功能 // 保存原来的亮度 [[NSUserDefaults standardUserDefaults] setObject:@([UIScreen mainScreen].brightness) forKey:@"brightness&q

  • angular仿支付宝密码框输入效果

    项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款jq仿支付宝密码输入框,于是我模仿编写了个指令模块. 效果如下: 完整代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <met

  • Android 仿支付宝中的余额宝收益进度条

    一. 看效果 二.上代码 package com.framework.widget; import android.app.Activity; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import androi

  • JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

  • Android仿支付宝中余额宝的数字动画效果

    实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

随机推荐