目的
大家好我是iOS開發(fā)一枚,目前就職于暴雞電競;由于老板很給力,融資了很多錢,老板們都想搞事,所以就苦了開發(fā)哥哥們了;在老板的大力規(guī)劃下,暴雞電競APP快速迭代,每一次迭代時間都非常有限,容不得我精雕細琢,第一版都是盡早上線;然后交個運營推廣;接下去就是搶占市場打入目標用戶;最后產品、設計同學覺得用戶體驗不夠好就開始找研發(fā)哥哥一個一個優(yōu)化直到滿意為止;等優(yōu)化完成后下個版本又來了,這是一個非常有意思的循環(huán)過程。
接下來我要講的主要是暴雞電競V2.20發(fā)現主頁滑動到一定高度itemBar懸浮停窗優(yōu)化思路。
效果圖

效果圖1.jpeg

效果圖2.jpeg
思路+結構
- 整個主頁是一個
UITableView -
UITableView只有一個cell,頂部的banner和話題當做tableHeaderView -
cell的頂部是一個itemBar和一個scrollView組成 -
cell中的scrollView作為4個childViewController的容器 - 項目采用的MVC結構
UITableView``itemBar``scrollView的初始化放在parentViewController
以下部分代碼:
#pragma mark lazy init
- (UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] init];
_scrollView.frame = CGRectMake(0, PageMenuH + (PageMenuShadowH - 2), SCREEN_WIDTH, ScrollViewH);
_scrollView.delegate = self;
_scrollView.pagingEnabled = YES;
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.backgroundColor = COLORF7F9FA;
_scrollView.contentSize = CGSizeMake(SCREEN_WIDTH*self.titles.count, 0);
}
return _scrollView;
}
- (LLTableView *)tableView {
if (!_tableView) {
_tableView = [[LLTableView alloc] initWithFrame:CGRectMake(0, IS_IPHONEX?88:64, SCREEN_WIDTH, SCREEN_HEIGHT - (IS_IPHONEX?34+49+88:49+64)) style:UITableViewStylePlain];
_tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.showsVerticalScrollIndicator = NO;
_tableView.backgroundColor = COLORF7F9FA;
}
return _tableView;
}
- (LLMsgRemindHeaderView *)pageMenu
{
if(!_pageMenu)
{
_pageMenu = [[LLMsgRemindHeaderView alloc] initWithTitles:self.titles isBack:NO];
_pageMenu.delegate = self;
}
return _pageMenu;
}
- (void)configUI
{
/**scrollView和子控制器*/
self.titles = @[@"最新",@"陪玩", @"約玩", @"關注"];
for (NSInteger i = 0; i < self.titles.count; i++) {
DiscoverFeedNewsType feedType = FeedNewsNewest;
if (i == 0) {
feedType = FeedNewsNewest;
}
if (i == 1) {
feedType = FeedNewsPeiWan;
}
if (i == 2) {
feedType = FeedNewsYueWan;
}
if (i == 3) {
feedType = FeedNewsAttention;
}
LLDiscoverHomeChildController *childVC = [[LLDiscoverHomeChildController alloc] initFeedNewsType:feedType];
childVC.delegate = self;
[self addChildViewController:childVC];
[childVC didMoveToParentViewController:self];
if (i == 0) {
self.childVC = childVC;
childVC.view.frame = CGRectMake(i * SCREEN_WIDTH, 0, SCREEN_WIDTH, ScrollViewH);
[self.scrollView addSubview:childVC.view];
}
}
/**監(jiān)聽子控制器發(fā)出的通知*/
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(subTableViewDidScroll:) name:@"SubTableViewDidScroll" object:nil];
/**添加刷新*/
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
/**刷新所需的數據*/
/**未讀數字提醒*/
[self loadNoReadMessage];
[self.childVC refreshChildViewControllerWhenPull];
}];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([UITableViewCell class])];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:NSStringFromClass([UITableViewCell class])];
}
cell.contentView.backgroundColor = [UIColor whiteColor];
cell.separatorInset = UIEdgeInsetsMake(0, SCREEN_WIDTH, 0, 0);
cell.selectionStyle = UITableViewCellSelectionStyleNone;
/**添加懸浮菜單*/
[cell.contentView addSubview:self.pageMenu];
[cell.contentView addSubview:self.scrollView];
return cell;
}
- 主要處理
childViewController的UITableView的滑動監(jiān)聽 - 這里因為父控制器和子控制器都有個
tableView,滑動時會有沖突,我解決的方法新建一個繼承與UITableView的父類,在父類.m文件里面添加下面代碼:
/*
* 是否允許多個手勢識別器共同識別,一個控件的手勢識別后是否阻斷手勢識別繼續(xù)向下傳播,默認返回NO;如果為YES,響應者鏈上層對象觸發(fā)手勢識別后,如果下層對象也添加了手勢并成功識別也會繼續(xù)執(zhí)行,否則上層對象識別后則不再繼續(xù)傳播
*/
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return [gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]];
}
- 這樣在滑動主控制器的
tableView時,可以設置子控制器的偏移量
在子控制器這邊的代碼:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (self.uid.length == 0 || self.uid == nil) {
/**非動態(tài)界面時滾動時發(fā)出通知*/
[[NSNotificationCenter defaultCenter] postNotificationName:@"SubTableViewDidScroll" object:scrollView];
}
}
在主控制器這邊的代碼:
#pragma mark addObserver SEL
- (void)subTableViewDidScroll:(NSNotification *)notific
{
UIScrollView *scrollView = notific.object;
self.childVCScrollView = scrollView;
if (self.tableView.contentOffset.y < self.maxOffsetY) {
scrollView.contentOffset = CGPointZero;
} else {
self.tableView.contentOffset = CGPointMake(0, self.maxOffsetY + DistanceOffsetY);
}
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
if (self.scrollView == scrollView) {
self.tableView.scrollEnabled = NO;
}
if (self.tableView == scrollView) {
self.scrollView.scrollEnabled = NO;
}
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
withVelocity:(CGPoint)velocity
targetContentOffset:(inout CGPoint *)targetContentOffset
{
if (self.scrollView == scrollView) {
self.tableView.scrollEnabled = YES;
}
if (self.tableView == scrollView) {
self.scrollView.scrollEnabled = YES;
}
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (self.tableView == scrollView) {
if (scrollView.contentOffset.y >= 0) {
if (self.maxOffsetY != 0) {
CGFloat percentage = scrollView.contentOffset.y / self.maxOffsetY;
if (percentage >= 1.f) {
percentage = 1.f;
}
if (percentage <= 0.f) {
percentage = 0.f;
}
[self.pageMenu ll_layerShadow:[UIColor colorWithRGB:0x000000 alpha:0.05] offset:CGSizeMake(0, -2 * percentage) radius:PageMenuShadowH * percentage];
self.pageMenu.separatorColor = [UIColor colorWithRGB:0xE1E1E1 alpha:1 - percentage];
}
}
if (self.childVCScrollView && self.childVCScrollView.contentOffset.y > 0) {
self.tableView.contentOffset = CGPointMake(0, self.maxOffsetY + DistanceOffsetY);
}
if (self.tableView.contentOffset.y >= self.maxOffsetY) {
self.tableView.contentOffset = CGPointMake(0, self.maxOffsetY + DistanceOffsetY);
}
}
if (self.scrollView == scrollView) {
if (self.scrollView.contentOffset.x < 0 ||
self.scrollView.contentOffset.x > (self.titles.count - 1) * SCREEN_WIDTH) {
return;
}
CGFloat offsetX = scrollView.contentOffset.x;
}
}
- 注意的細節(jié),通過網絡請求得到
banner和話題數據,確定了maxOffset高度
結尾
- 在優(yōu)化之前我查閱了網上很多案例,但是方法過于復雜,我做事喜歡能簡單完成的絕不復雜化,包括我自己一開始我用了一個大
scrollView包含一個小scrollView嵌套實現了效果,但是體驗很差,待版本上線后我沉下心把他優(yōu)化了,新的效果要等到V2.3.0才能看到。 - 采用主控制器包含一個
UITbaleViewCell和子控制器結構,既可以方便將來新功能接入,也可以快速實現需求。 - 這里僅僅提供一個思路,如果本文反饋的人數達到一定量,再考慮出一個Demo吧
- 下一期分享我個人使用YYKit實現添加話題、用系統(tǒng)的
UISearchController搜索話題以及用YYLabel實現feed詳情并且話題可點擊,雖然聽起來很簡單,但是我還是愿意把我在實現過程中遇到的問題分享給大家