经常会有一些可以水平切换的多页面视图,如图,这里先不讨论大于3个页面的情况,专心解决2-3页面切换,顶部tabbar的问题。
避免重复的工作
顶部tabbar功能和显示基本都一样,按钮、指示器、状态、位置变化,封装一下,按需求配置一下标题、文字颜色、字体大小等等就可以。
滑动问题
在使用一些App的时候,往往是页面完全切换完成了,tabbar的指示器才切换过去,让人感觉像有延迟一样。解决方案就是监听scrollView的滑动事件,来控制指示器的滑动。既然,指示器是放在顶部tabbar里面,那就让顶部tabbar来处理这个问题。
使用的话写了一个小的demo
#import "XFTopbarDemoViewController.h"
#import <YYKit/YYKit.h>
#import "XFTopTabBar.h"
@interface XFTopbarDemoViewController () <XFTopTabBarDelegate>
@property (strong, nonatomic) XFTopTabBar *topbar;
@property (strong, nonatomic) UIScrollView *scrollView;
@property (strong, nonatomic) UIViewController *vc0;
@property (strong, nonatomic) UIViewController *vc1;
@property (strong, nonatomic) UIViewController *vc2;
@end
@implementation XFTopbarDemoViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeNone;
[self.scrollView addSubview:self.vc0.view];
[self.scrollView addSubview:self.vc1.view];
[self.scrollView addSubview:self.vc2.view];
[self.view addSubview:self.scrollView];
//scrollView的page必须和topbar的titles.count相同
self.topbar.scrollView = self.scrollView;
[self.view addSubview:self.topbar];
//必须配置完成才设置delegate
self.topbar.delegate = self;
}
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
self.topbar.frame = CGRectMake(0, 0, self.view.width, 45);
self.scrollView.frame = CGRectMake(0, self.topbar.bottom, self.view.width, self.view.height-self.topbar.height);
self.scrollView.contentSize = CGSizeMake(self.view.width*3,self.scrollView.height);
}
#pragma mark -
- (NSArray *)titlesForTopTabbar:(XFTopTabBar *)topTabBar {
return @[@"头条", @"美食", @"玩乐"];
}
#pragma mark - setter & getter
- (UIViewController *)vc0 {
if (_vc0 == nil) {
_vc0 = [[UIViewController alloc] init];
_vc0.view.frame = CGRectMake(0, 0, YYScreenSize().width, YYScreenSize().height-64-45);
_vc0.view.backgroundColor = [UIColor lightTextColor];
}
return _vc0;
}
- (UIViewController *)vc1 {
if (_vc1 == nil) {
_vc1 = [[UIViewController alloc] init];
_vc1.view.frame = CGRectMake(YYScreenSize().width, 0, YYScreenSize().width, YYScreenSize().height-64-45);
_vc1.view.backgroundColor = [UIColor yellowColor];
}
return _vc1;
}
- (UIViewController *)vc2 {
if (_vc2 == nil) {
_vc2 = [[UIViewController alloc] init];
_vc2.view.frame = CGRectMake(YYScreenSize().width*2, 0, YYScreenSize().width, YYScreenSize().height-64-45);
_vc2.view.backgroundColor = [UIColor greenColor];
}
return _vc2;
}
- (XFTopTabBar *)topbar {
if (_topbar == nil) {
_topbar = [[XFTopTabBar alloc] initWithFrame:CGRectMake(0, 0, YYScreenSize().width, 45)];
_topbar.backgroundColor = [UIColor whiteColor];
_topbar.normalStateColor = [UIColor grayColor];
_topbar.selectedStateFont = [UIFont systemFontOfSize:17];
_topbar.selectedStateColor = [UIColor greenColor];
}
return _topbar;
}
- (UIScrollView *)scrollView {
if (_scrollView == nil) {
_scrollView = [UIScrollView new];
_scrollView.pagingEnabled = YES;
_scrollView.backgroundColor = [UIColor orangeColor];
}
return _scrollView;
}
@end
效果是滑动scrollView的时候,上面的指示器跟着滑,scrollView触发了翻页,上面的按钮的选中状态也会改变。点击tabbar上面的按钮,scrollView和指示器都会跟着滑。
项目地址:https://github.com/xxdzyyh/XFFoundation
存在问题和未来扩展
- scrollView的page数必须和tabbar的titles数相同。这个问题在XFHSwipeViewController中已经解决了
- 指示器和按钮还不支持自定义
- tabbar显示不下需要滑动的问题
- XFFoundation在不同的项目中改来改去,可能会有一些兼容问题