iOS:懸浮式停窗

目的

大家好我是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;
}
  • 主要處理childViewControllerUITableView的滑動監(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詳情并且話題可點擊,雖然聽起來很簡單,但是我還是愿意把我在實現過程中遇到的問題分享給大家
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容