最近看到越来越多的App里出现了一种比较流行的UI设计,就是在Scrolling View(尤其是TableView)的上方出现一个menu view,这个View会随着滑动的操作进行变化,最常见的变化就是,上滑时隐藏菜单,下滑时展示菜单。所以就尝试着扩展UIViewController写了一个BFScrollMenu的category,用来提供一个通用的,创建随着滑动操作而进行变化的框架。
具体代码地址在这里:GitHub - BFScrollMenu
思路
整个代码很简单,只有1个.h和1个.m文件。核心思想是借鉴了MJRefresh的做法,
- 使用Method swizzling将用户常规的scrollview delegate method 替换成BFScrolling method
- 使用AssociatedObject动态关联对象给UIViewController增加必要的成员属性
- 在滑动时对操作进行判断处理
- 提供滑动时的ActionBlock和滑动停止时的StopAction,并且提供额外的对action进行与判断的conditionBlock。
使用方法很简单,只需要在代理Class中(一般为实现scrolling delegate的ViewController)进行初始化设定即可:
- (void)setUpDelegateClass:(Class _Nonnull)delegateClass
MenuView:(UIView * _Nonnull )menuView
conditionBlock:(BFConditionBlock _Nullable)condition
scrollActionBlock:(BFActionBlock _Nullable)scrollAction
stopActionBlock:(BFActionBlock _Nullable)stopAction;
Example:
在UIViewController中:
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 21, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
// ... Create your own table view
[self.view addSubview:self.tableView];
// Config the menu view to be manipulated ...
self.menuView = [[UIView alloc] initWithFrame:CGRectMake(0, 21, [UIScreen mainScreen].bounds.size.width, 80)];
// ...
[self.view addSubview:self.menuView];
__weak typeof(self) weakSelf = self;
BFActionBlock scroll = ^(BFScrollingDirection lastDirection) {
NSLog(@"lastDirection = %ld", lastDirection);
if (lastDirection == BFScrollingDirectionUP) {
[UIView animateWithDuration:0.5 animations:^{
weakSelf.menuView.frame = CGRectMake(0, 21, [UIScreen mainScreen].bounds.size.width, 0);
//NSLog(@"animating hidden...");
}];
}
else if (lastDirection == BFScrollingDirectionDown) {
[UIView animateWithDuration:0.5 animations:^{
weakSelf.menuView.frame = CGRectMake(0, 21, [UIScreen mainScreen].bounds.size.width, 80);
//NSLog(@"animating showing...");
}];
}
};
[self setUpDelegateClass:[self class] MenuView:self.menuView conditionBlock:nil scrollActionBlock:scroll stopActionBlock:nil];
}
最终效果如下:
BFScrollMenu.gif如果你喜欢,请帮忙在git上给一个star ~~ 谢谢!欢迎大家指正做commit!
2016.6.10 完稿于南京
网友评论