iOS：悬浮式停窗

2018-03-07 本文已影响36人风与鸾

目的

大家好我是iOS开发一枚，目前就职于暴鸡电竞；由于老板很给力，融资了很多钱，老板们都想搞事，所以就苦了开发哥哥们了；在老板的大力规划下，暴鸡电竞APP快速迭代，每一次迭代时间都非常有限，容不得我精雕细琢，第一版都是尽早上线；然后交个运营推广；接下去就是抢占市场打入目标用户；最后产品、设计同学觉得用户体验不够好就开始找研发哥哥一个一个优化直到满意为止；等优化完成后下个版本又来了，这是一个非常有意思的循环过程。

接下来我要讲的主要是暴鸡电竞V2.20发现主页滑动到一定高度itemBar悬浮停窗优化思路。

效果图

效果图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];
        }
    }
    
    
    /**监听子控制器发出的通知*/
    [[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的滑动监听
这里因为父控制器和子控制器都有个tableView，滑动时会有冲突，我解决的方法新建一个继承与UITableView的父类，在父类.m文件里面添加下面代码：

/*
 * 是否允许多个手势识别器共同识别，一个控件的手势识别后是否阻断手势识别继续向下传播，默认返回NO；如果为YES，响应者链上层对象触发手势识别后，如果下层对象也添加了手势并成功识别也会继续执行，否则上层对象识别后则不再继续传播
 */
- (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) {
       /**非动态界面时滚动时发出通知*/
       [[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;
    }
    
}

注意的细节，通过网络请求得到banner和话题数据，确定了maxOffset高度

结尾

在优化之前我查阅了网上很多案例，但是方法过于复杂，我做事喜欢能简单完成的绝不复杂化，包括我自己一开始我用了一个大scrollView包含一个小scrollView嵌套实现了效果，但是体验很差，待版本上线后我沉下心把他优化了，新的效果要等到V2.3.0才能看到。
采用主控制器包含一个UITbaleViewCell和子控制器结构，既可以方便将来新功能接入，也可以快速实现需求。
这里仅仅提供一个思路，如果本文反馈的人数达到一定量，再考虑出一个Demo吧
下一期分享我个人使用YYKit实现添加话题、用系统的UISearchController搜索话题以及用YYLabel实现feed详情并且话题可点击，虽然听起来很简单，但是我还是愿意把我在实现过程中遇到的问题分享给大家

iOS：悬浮式停窗

目的

效果图

思路+结构

结尾

猜你喜欢

热点阅读