代码地址如下:
http://www.demodashi.com/demo/12776.html

首先看一下效果



状态栏红色是因为使用手机录屏的原因。

1.问题分析

1.导航栏A有两组控件,随着tableView的向上滑动,这一组控件的透明度从1到0,然后另一组控件透明度从0到1,如此反复。

2.导航栏下面的一组控件B,随着tableView向上滑动,也往上滑动,但是滑动值小于tableView的滑动值。透明度逐渐变成0,然后消失。

3.tableView的头部有一个控件C,跟随tableView一起滑动,滑动值相同。(很流畅,无卡顿)

4.tableView即控件D的右侧滚动条从中间开始。

5.滑动控件B,C,D,tableView均能做出反应。

6.如果tableView滑动较少时,导航栏下面的控件B会根据滑动的多少自动折叠或者完全展开。

很多人看到第4条时,可能会认为tableView从中间开始,其实不一定是这样。scrollview有一个属性scrollIndicatorInsets可以设置滚动条的偏移。

我的思路

将控件B,C都加在tableView的视图上面,这样滑动的时候,可以直接跟随tableView滚动(滑动的时候绝度丝滑),另外由于B,C是tableView的子视图,当滑动的时候无法响应滑动手势,然后传递给tableView滑动手势响应,这应解决了问题3,5。这样需要给tableView设置偏移,否则会被B,C挡住一部分。

然后给tableView的scrollIndicatorInsets设置偏移,这样有一种tableView从中间开始的假象。解决了问题4。

创建各个组件的代码

  1. - (void)initView {
  2. CustrmNav * nav = [CustrmNav custrmNav];
  3. //navBShadowView 背后不响应事件,只是上划的时候显示
  4. NavBarBottomView * navBShadowView = [NavBarBottomView navBarBottomView];
  5. navBShadowView.frame = CGRectMake(0, CGRectGetMaxY(nav.frame), Screen_Width, 80);
  6. [self.view addSubview:navBShadowView];
  7. //navBottom 响应事件,在滑动 tableView下滑动到0以后出现
  8. NavBarBottomView * navBottom = [NavBarBottomView navBarBottomView];
  9. navBottom.frame = CGRectMake(0, -320, Screen_Width, 80);
  10. TabHeaderView * tabHeader = [TabHeaderView tabHeaderView];
  11. tabHeader.frame = CGRectMake(0, -240, Screen_Width, 240);
  12. CGFloat backH = nav.height + navBottom.height;
  13. CGFloat contentY = tabHeader.height + navBottom.height;
  14. //增加背景色View
  15. UIView * backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, Screen_Width, backH)];
  16. backView.backgroundColor = MP_RGBColor(27, 107, 200);
  17. [self.view insertSubview:backView atIndex:0];
  18. _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(nav.frame), Screen_Width, Screen_Height-nav.height-MP_TabBarHeight) style:UITableViewStylePlain];
  19. _tableView.delegate = self;
  20. _tableView.dataSource = self;
  21. //设置偏移量
  22. [_tableView setContentInset:UIEdgeInsetsMake(contentY , 0, 0, 0)];
  23. //假装tableView 从TabHeaderView 的下部开始的
  24. _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(contentY, 0, 0, 0);
  25. //背景透明
  26. _tableView.backgroundColor = [UIColor clearColor];
  27. [self.view addSubview:_tableView];
  28. [_tableView addSubview:navBottom];
  29. [_tableView addSubview:tabHeader];
  30. //放在顶层的 nav 应在在最外层的view
  31. [self.view addSubview:nav];
  32. MJRefreshNormalHeader *mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
  33. [self refershAction];
  34. }];
  35. _tableView.mj_header = mj_header;
  36. [[SlideManger shareSlideManger] slideMangerCustomNav:nav navBottm:navBottom tabHeader:tabHeader navBottomShadowView:navBShadowView];
  37. }

1.解决第一个问题,自定义导航栏,可以通过检测tableView的滑动值,来改变A控件内的视图的透明度来实现。

自定义导航栏代码Xib布局

  1. #import "CustrmNav.h"
  2. @interface CustrmNav ()
  3. @property (weak, nonatomic) IBOutlet UISearchBar *searchBar;
  4. @property (weak, nonatomic) IBOutlet UIImageView *plusup;
  5. @property (weak, nonatomic) IBOutlet UIImageView *firend;
  6. @property (weak, nonatomic) IBOutlet UIImageView *sao;
  7. @property (weak, nonatomic) IBOutlet UIImageView *pay;
  8. @property (weak, nonatomic) IBOutlet UIImageView *search;
  9. @property (weak, nonatomic) IBOutlet UIImageView *get;
  10. @property (weak, nonatomic) IBOutlet UIImageView *plusdown;
  11. @end
  12. @implementation CustrmNav
  13. + (id)custrmNav {
  14. NSString * className = NSStringFromClass([self class]);
  15. UINib * nib = [UINib nibWithNibName:className bundle:nil];
  16. CustrmNav * nav = [nib instantiateWithOwner:nil options:nil].firstObject;
  17. [nav updateAlpha:0.0];
  18. nav.frame = CGRectMake(0, 0, Screen_Width, MP_NavBarHeight);
  19. return nav;
  20. }
  21. - (void)updateAlpha:(float)alpha {
  22. //上部分
  23. _sao.alpha = (alpha-0.5) * 2;
  24. _pay.alpha = (alpha-0.5) * 2;
  25. _plusup.alpha = (alpha-0.5) * 2;
  26. _get.alpha = (alpha-0.5) * 2;
  27. _search.alpha = (alpha-0.5) * 2;
  28. //下部分
  29. _searchBar.alpha = 1 - alpha * 2;
  30. _plusdown.alpha = 1 - alpha * 2;
  31. _firend.alpha = 1 - alpha * 2;
  32. //当滑到一定的位置,背景变成有色
  33. if (alpha >= 1.0) {
  34. self.backgroundColor = MP_RGBColor(27, 107, 200);
  35. } else {
  36. self.backgroundColor = [UIColor clearColor];
  37. }
  38. }

2.解决问题二,我是为B控件又创建了一个分身B1放到tabelView的背后视图上。当向上滑动的时候,B隐藏B1显示,然后根据tableView的滑动距离,改变B1的Y值。另外改变里面的小组件的透明度

处理各个组件的透明度以及动画效果管理类

  1. #import "SlideManger.h"
  2. #import <UIKit/UIKit.h>
  3. #import "CustrmNav.h"
  4. #import "NavBarBottomView.h"
  5. @interface SlideManger ()<NSCopying, NSMutableCopying>
  6. @property(nonatomic,weak)NavBarBottomView * navBottmView;
  7. @property(nonatomic,weak)NavBarBottomView * navBShadowView;
  8. @property(nonatomic,weak)UIView * tabHeader;
  9. @property(nonatomic,weak)CustrmNav * customNav;
  10. @end
  11. static SlideManger * _slideManger = nil;
  12. @implementation SlideManger
  13. + (id)shareSlideManger {
  14. return [[self alloc] init];
  15. }
  16. + (id)allocWithZone:(struct _NSZone *)zone {
  17. static dispatch_once_t onceToken;
  18. dispatch_once(&onceToken, ^{
  19. if (_slideManger == nil) {
  20. _slideManger = [super allocWithZone:zone];
  21. }
  22. });
  23. return _slideManger;
  24. }
  25. - (id)copyWithZone:(NSZone *)zone {
  26. return _slideManger;
  27. }
  28. - (id)mutableCopyWithZone:(NSZone *)zone {
  29. return _slideManger;
  30. }
  31. - (void)slideMangerCustomNav:(UIView *)customNav navBottm:(UIView *)navBottmView tabHeader:(UIView *)tabHeader navBottomShadowView:(UIView *)navBShadowView {
  32. if (navBottmView) {
  33. _navBottmView = (NavBarBottomView *)navBottmView;
  34. }
  35. if (tabHeader) {
  36. _tabHeader = tabHeader;
  37. }
  38. if (customNav) {
  39. _customNav = (CustrmNav *)customNav;
  40. }
  41. if (navBShadowView) {
  42. _navBShadowView = (NavBarBottomView *)navBShadowView;
  43. }
  44. }
  45. //滑动的时候
  46. - (void)tableViewSlide:(CGFloat)slide {
  47. if (_navBShadowView && _tabHeader) {
  48. //得到真实的偏移量,让slideY从0开始算起
  49. CGFloat slideY = slide + _navBShadowView.height + _tabHeader.height;
  50. // NSLog(@"******%f",slideY);
  51. [self handleTabHeader:slideY];
  52. [self handleCustomNavNavBottom:slideY];
  53. }
  54. }
  55. //tableView 停止的时候
  56. - (void)tabViewEndSlide:(CGFloat)slide scrollView:(UIScrollView *)scrollView {
  57. if (_navBShadowView && _tabHeader) {
  58. //得到真实的偏移量
  59. CGFloat slideY = slide + _navBShadowView.height + _tabHeader.height;
  60. if (slideY > 0) {
  61. if (slideY >= _navBShadowView.height/2 && slideY < _navBShadowView.height) {
  62. //自动滑到上面
  63. [scrollView setContentOffset:CGPointMake(0, -_tabHeader.height) animated:YES];
  64. } else if (slideY < _navBShadowView.height/2) {
  65. //自动滑下去
  66. [scrollView setContentOffset:CGPointMake(0, -(_navBShadowView.height + _tabHeader.height)) animated:YES];
  67. }
  68. }
  69. }
  70. }
  71. //处理 TabHeader 跟随 tableView 滑动
  72. - (void)handleTabHeader:(CGFloat)slide {
  73. static BOOL isDown = NO;
  74. if (slide <= 0) {
  75. _navBottmView.hidden = NO;
  76. _navBShadowView.hidden = YES;
  77. //tableView往下滑的时候,禁止 _tabHeader与_navBottmView一起下滑
  78. _tabHeader.y = -_tabHeader.height + slide;
  79. _navBottmView.y = -(_navBShadowView.height + _tabHeader.height) + slide;
  80. isDown = YES;
  81. } else {
  82. _navBottmView.hidden = YES;
  83. _navBShadowView.hidden = NO;
  84. if (isDown) {
  85. _tabHeader.y = -_tabHeader.height;
  86. isDown = NO;
  87. }
  88. }
  89. }
  90. //处理customnav 的渐变色问题 以及navbottom 影子 的位置 渐变色问题
  91. - (void)handleCustomNavNavBottom:(CGFloat)slide {
  92. if (slide >= 0) {
  93. CGFloat halfNavBottomH = _navBShadowView.height/2;
  94. CGFloat alpValue = (_navBShadowView.height - slide)?(_navBShadowView.height - slide):0;
  95. [_navBShadowView updateAlpha:alpValue/_navBShadowView.height];
  96. [_customNav updateAlpha:slide/_navBShadowView.height];
  97. if (slide<= _navBShadowView.height) {
  98. _navBShadowView.y = _customNav.height - slide/2;
  99. } else {
  100. _navBShadowView.y = _customNav.height - halfNavBottomH;
  101. }
  102. } else {
  103. [_navBShadowView updateAlpha:1.0];
  104. [_customNav updateAlpha:0.0];
  105. _navBShadowView.y = _customNav.height;
  106. }
  107. }
  108. @end

6.解决问题六,主要是scrollView的 代理的滚动停止的方法和拖拽停止的方法确定不会再滚动的时候。依据滚动停止tableView滑动量来确定是展开还是折叠。

  1. //tableView 停止的时候
  2. - (void)tabViewEndSlide:(CGFloat)slide scrollView:(UIScrollView *)scrollView {
  3. if (_navBShadowView && _tabHeader) {
  4. //得到真实的偏移量
  5. CGFloat slideY = slide + _navBShadowView.height + _tabHeader.height;
  6. if (slideY > 0) {
  7. if (slideY >= _navBShadowView.height/2 && slideY < _navBShadowView.height) {
  8. //自动滑到上面
  9. [scrollView setContentOffset:CGPointMake(0, -_tabHeader.height) animated:YES];
  10. } else if (slideY < _navBShadowView.height/2) {
  11. //自动滑下去
  12. [scrollView setContentOffset:CGPointMake(0, -(_navBShadowView.height + _tabHeader.height)) animated:YES];
  13. }
  14. }
  15. }
  16. }

项目结构图

iOS仿支付宝首页效果

代码地址如下:
http://www.demodashi.com/demo/12776.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

iOS仿支付宝首页效果的更多相关文章

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

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

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

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

  3. iOS 仿支付宝密码支付

    代码地址如下:http://www.demodashi.com/demo/11484.html 一.准备工作 xcode 主要实现输入密码的时候不可见 二.程序实现 实现思路怎样 在支付宝输入密码的时 ...

  4. Android RecyclerView 实现支付宝首页效果

    Android RecyclerView 实现支付宝首页效果 [TOC] 虽然我本人不喜欢支付宝的,但是这个网格本身其实还是不错的,项目更新中更改了一个布局为网格模式,类似支付宝.(估计是产品抄袭的= ...

  5. iOS仿支付宝芝麻信用仪表盘效果

    概述 自定义View之高仿支付宝芝麻信用分数仪表盘动画效果 详细 代码下载:http://www.demodashi.com/demo/10654.html 仿支付宝芝麻信用仪表盘效果 一.主要思路 ...

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

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

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

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

  8. [ios仿系列]仿支付宝手势解码

    呀~.这么快就转到ios阵营了???.android还有那么多坑呢???为此我也仅仅能啃着馒头留下屈辱的眼泪了. . 本次因为开发公司产品的android版,继而ios版也负责一部分.当中一部分就是手 ...

  9. Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现

    Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现 2015-03-10 22:38 28419人阅读 评论(17) 收藏 举报  分类: Android ...

随机推荐

  1. iOS_自定义毛玻璃效果

    http://www.2cto.com/kf/201408/329969.html 最终效果图: 关键代码: UIImage分类代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  2. 实现自己的系统调用针对linux-2.6.34【转】

    转自:http://biancheng.dnbcw.net/linux/303362.html 在linux下实现自己的系统调用.主要功能是:遍历系统的进程,并将相关的进程信息存放在自己定义的结构体中 ...

  3. android hook 框架 libinject 如何实现so注入

    前面两篇 android hook 框架 libinject2 简介.编译.运行 android hook 框架 libinject2 如何实现so注入 实际运行并分析了 Android中的so注入( ...

  4. Python’s super() considered super!

    如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...

  5. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  6. 解决svn 异常:svn: E155027: Tree conflict can only be resolved to working state; {0} not resolved

    以前很少使用svn进行代码管理,时间长了之后也忘得差不多了,但现在公司使用的是svn进行版本管理,使用过程中出现了问题,顺带记一下. 异常情况:切换svn地址之后,发现项目代码无法合并代码,也无法提交 ...

  7. bring to front 必须在右边的form上才生效。

  8. Appium+python自动化19-iOS模拟器(iOS Simulator)安装自家APP【转载】

    前言 做过iOS上app测试的小伙伴应该都知道,普通用户安装app都是从appstore下载安装,安装测试版本的app,一般就是开发给的二维码扫码安装, 或者开发给个.ipa的安装包文件,通过itoo ...

  9. 制作servlet模板

    制作servlet模板 选中window-->preference--->搜索template--->选中java下面的template new一个 Name的设置,当你在eclip ...

  10. 第一章:1-22、长度为100字节的应用层数据交给运输层传送,需加上20字节的TCP首部。再交给网络层传送,需加上20字节的IP首部。最后交给数据链路层的以太网传送,加上首部和尾部18字节。试求数据的传输效率。  若应用层数据长度为1000字节,数据的传输效率是多少?

    <计算机网络>谢希仁著第四版课后习题答案答: 数据长度为100字节时 传输效率=100/(100+20+20+18)=63.3% 数据长度为1000字节时, 传输效率=1000/(1000 ...