iOS：懸浮式停窗

目的

大家好我是iOS開發(fā)一枚，目前就職于暴雞電競(jìng)；由于老板很給力，融資了很多錢，老板們都想搞事，所以就苦了開發(fā)哥哥們了；在老板的大力規(guī)劃下，暴雞電競(jìng)APP快速迭代，每一次迭代時(shí)間都非常有限，容不得我精雕細(xì)琢，第一版都是盡早上線；然后交個(gè)運(yùn)營(yíng)推廣；接下去就是搶占市場(chǎng)打入目標(biāo)用戶；最后產(chǎn)品、設(shè)計(jì)同學(xué)覺得用戶體驗(yàn)不夠好就開始找研發(fā)哥哥一個(gè)一個(gè)優(yōu)化直到滿意為止；等優(yōu)化完成后下個(gè)版本又來了，這是一個(gè)非常有意思的循環(huán)過程。

接下來我要講的主要是暴雞電競(jìng)V2.20發(fā)現(xiàn)主頁滑動(dòng)到一定高度itemBar懸浮停窗優(yōu)化思路。

效果圖

效果圖1.jpeg
效果圖2.jpeg

思路+結(jié)構(gòu)

  • 整個(gè)主頁是一個(gè)UITableView
  • UITableView只有一個(gè)cell，頂部的banner和話題當(dāng)做tableHeaderView
  • cell的頂部是一個(gè)itemBar和一個(gè)scrollView組成
  • cell中的scrollView作為4個(gè)childViewController的容器
  • 項(xiàng)目采用的MVC結(jié)構(gòu)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 = @[@"最新",@"陪玩", @"約玩", @"關(guān)注"];
    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:^{
        /**刷新所需的數(shù)據(jù)*/
        /**未讀數(shù)字提醒*/
        [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的滑動(dòng)監(jiān)聽
  • 這里因?yàn)楦缚刂破骱妥涌刂破鞫加袀€(gè)tableView，滑動(dòng)時(shí)會(huì)有沖突，我解決的方法新建一個(gè)繼承與UITableView的父類，在父類.m文件里面添加下面代碼：
/*
 * 是否允許多個(gè)手勢(shì)識(shí)別器共同識(shí)別，一個(gè)控件的手勢(shì)識(shí)別后是否阻斷手勢(shì)識(shí)別繼續(xù)向下傳播，默認(rèn)返回NO；如果為YES，響應(yīng)者鏈上層對(duì)象觸發(fā)手勢(shì)識(shí)別后，如果下層對(duì)象也添加了手勢(shì)并成功識(shí)別也會(huì)繼續(xù)執(zhí)行，否則上層對(duì)象識(shí)別后則不再繼續(xù)傳播
 */
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return [gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]];
}
  • 這樣在滑動(dòng)主控制器的tableView時(shí)，可以設(shè)置子控制器的偏移量
    在子控制器這邊的代碼：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
   if (self.uid.length == 0 || self.uid == nil) {
       /**非動(dòng)態(tài)界面時(shí)滾動(dòng)時(shí)發(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;
    }
    
}
  • 注意的細(xì)節(jié)，通過網(wǎng)絡(luò)請(qǐng)求得到banner和話題數(shù)據(jù)，確定了maxOffset高度

結(jié)尾

  • 在優(yōu)化之前我查閱了網(wǎng)上很多案例，但是方法過于復(fù)雜，我做事喜歡能簡(jiǎn)單完成的絕不復(fù)雜化，包括我自己一開始我用了一個(gè)大scrollView包含一個(gè)小scrollView嵌套實(shí)現(xiàn)了效果，但是體驗(yàn)很差，待版本上線后我沉下心把他優(yōu)化了，新的效果要等到V2.3.0才能看到。
  • 采用主控制器包含一個(gè)UITbaleViewCell和子控制器結(jié)構(gòu)，既可以方便將來新功能接入，也可以快速實(shí)現(xiàn)需求。
  • 這里僅僅提供一個(gè)思路，如果本文反饋的人數(shù)達(dá)到一定量，再考慮出一個(gè)Demo吧
  • 下一期分享我個(gè)人使用YYKit實(shí)現(xiàn)添加話題、用系統(tǒng)的UISearchController搜索話題以及用YYLabel實(shí)現(xiàn)feed詳情并且話題可點(diǎn)擊，雖然聽起來很簡(jiǎn)單，但是我還是愿意把我在實(shí)現(xiàn)過程中遇到的問題分享給大家
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容