iOS头部渐变的表格视图设计(一)

简介: iOS头部渐变的表格视图设计



       今天再来给大家带来一个开发中常用到的视图控制器,在很多应用中,可能都会遇到这样的一个需求:表视图控制器最上方有一个头图控件,当表格视图滑动在顶部时,导航栏透明,当表格视图逐渐向下滑动时,导航栏渐渐出现,并且在滑动期间,头图会展示相关的渐变动画效果。以前经常会遇到这样的需求,但从没有整理与封装完善,这次将其封装成完整的控件,无论有无导航,都可以很好的支持,方便以后使用也提供给需要的朋友。

image.png

image.png








       在设计控件之前,我们应该先编写控件的头文件,头文件中将控件需要的属性和方法列举,之后再按定义好的接口一步步的来实现控件的编写设计,这样可以结构清晰,并且不会显得无从下手,控件的头文件设计如下:


//

//  YHBaseHeaderAnimatedViewController.h

//  YHBaseFoundationTest

//

//  Created by vip on 16/4/26.

//  Copyright © 2016年 jaki.zhang. All rights reserved.

/*

*  这个视图控制器创建出带缩放头图效果的视图控制器

*  tip:

*      1.这个视图控制器如果是被导航push出来的 则内部会使用假导航进行渐隐模拟

*      2.这个视图控制器如果是被present出来的 则不会出现假导航栏

*      3.这个视图控制器中自带一个TableView 设置TableView的头图不会影响原动画效果

*

*/


#import <UIKit/UIKit.h>

/**

*  这个枚举设置头图动画滑动的速度等级

*/

typedef enum {

   YHBaseHeaderAnimatedLevelSlow,

   YHBaseHeaderAnimatedLevelNormal,

   YHBaseHeaderAnimatedLevelFast

}YHBaseHeaderAnimatedLevel;

@interface YHBaseHeaderAnimatedViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>

@property(nonatomic,strong,readonly)UITableView * tableView;

/**

*  设置动画头图图片

*/

@property(nonatomic,strong)UIView * animatedHeaderView;

/**

*  设置TableView的头视图

*

*  注意:设置tableView的头视图不能够在使用tableHeatherView方法 要使用这个属性设置

*

*/

@property(nonatomic,strong)UIView * tableHeaderView;

/**

*  设置动画头图高度

*

*  这个属性如果不设置或者设置为0 则默认会使用设置的image图片比例

*

*/

@property(nonatomic,assign)CGFloat headerHeight;

/**

*

*  设置动画滑动速率

*/

@property(nonatomic,assign)YHBaseHeaderAnimatedLevel animatedlevel;

/**

*

*  设置头图可方法的最大scrollView偏移量 默认为40

*

*/

@property(nonatomic,assign)CGFloat maxScrollOffset;

/**

*  设置是否带渐隐效果

*

*/

@property(nonatomic,assign)BOOL alphaAnimated;

/**

*  设置最小渐变到的alpha渐隐值 <0 >1之间 默认为0.5

*

*/

@property(nonatomic,assign)CGFloat minAlpha;

/**

*

*  是否显示毛玻璃模糊效果

*

*/

@property(nonatomic,assign)BOOL bluerAnimated;

/**

*

*  设置最大小模糊度 默认为1

*

*/

@property(nonatomic,assign)CGFloat maxBluer;

/**

*  设置导航栏颜色 默认白色

*

*/

@property(nonatomic,strong)UIColor * naviColor;

/**

*  设置导航左侧按钮数组 如果不设置 会自动带一个返回按钮

*

*/

@property(nonatomic,strong)NSArray * leftBarButtons;

/**

*  设置导航左侧按钮数组 如果不设置 会自动带一个返回按钮

*

*/

@property(nonatomic,strong)NSArray * rightBarButtons;

/**

*  这个方法在修改了头图相关属性后 需要调用刷新

*

*  注意:如果重新设置了TableView的tableheaderView属性 也需要调用这个方法刷新

*

*/

-(void)reloadAnimatedView;

@end

     在设计这个控件时,我主要考虑两个需要优化的地方,第一是这个控制器在不同的场景下可能会有不同的结构,例如在导航结构中被push出来或者通过模态跳转被present出来,我在这个控件的实现时做了兼容,实际上无论有无导航,控件内部都没有使用系统的导航栏,而是模拟实现了一个自定义的导航栏来与系统的导航无缝衔接。

目录
相关文章
|
iOS开发
iOS开发-加在透明视图上的控件会透明
iOS开发-加在透明视图上的控件会透明
113 0
|
iOS开发
ios贝塞尔曲线表格视图
x轴和y轴都是可自定义,曲线的值也是对应的值
73 0
ios贝塞尔曲线表格视图
|
前端开发 小程序 数据处理
iOS上传图片视图的封装:用法 【下篇】
iOS上传图片视图的封装:用法 【下篇】
222 0
iOS上传图片视图的封装:用法 【下篇】
|
前端开发 API 数据处理
iOS小知识:封装上传图片视图(支持删除和添加)
iOS小知识:封装上传图片视图(支持删除和添加)
198 0
iOS小知识:封装上传图片视图(支持删除和添加)
|
安全 iOS开发
iOS 筛选视图的隐藏方案
iOS 筛选视图的隐藏方案
142 0
iOS 筛选视图的隐藏方案
|
监控 iOS开发
iOS视图置顶方案
iOS视图置顶方案
134 0
iOS视图置顶方案
|
API 开发工具 iOS开发
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
175 0
iOS视图置顶的应用:适配iOS12系统上日期控件被筛选视图遮挡问题
|
开发工具 iOS开发 git
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
130 0
iOS订单折扣视图应用于购物车界面(支持添加/删除/选择折扣)
|
iOS开发
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
404 0
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】
|
iOS开发
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)
197 0
iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)