iOS UITableView/UICollectionView的嵌套和懸停的解決方案

應(yīng)用情景

情景一:

情景一

說(shuō)明:是不是和tableView的Plain類(lèi)型一樣驳规,其實(shí)這個(gè)是由兩個(gè)列表實(shí)現(xiàn)的

情景二:

情況二

說(shuō)明:此時(shí)冒滩,就可以發(fā)現(xiàn)和普通的列表有些不一樣了

情景三:

情景三

說(shuō)明:筆者最初就是為了實(shí)現(xiàn)這種情況,由于項(xiàng)目需求绒疗,需要防QQ空間油挥,不同的是需要類(lèi)型的切換,當(dāng)時(shí)沒(méi)想到好的解決方案番捂,最后受同事啟發(fā),在其demo上進(jìn)行修改江解,使得tableView可以滿足大部分的懸停需求


思路說(shuō)明

1设预、由于是兩個(gè)tableView嵌套實(shí)現(xiàn),所以首要就是兼容手勢(shì)犁河,使得我們的拖拽手勢(shì)可以向下傳遞

2鳖枕、通過(guò)改變列表的contentOffset來(lái)讓列表是否"滾動(dòng)"

3魄梯、子列表默認(rèn)不滾動(dòng),當(dāng)父列表滾動(dòng)到需要懸停的位置時(shí)宾符,父列表"停止"滾動(dòng)酿秸,子列表開(kāi)始滾動(dòng)

4、當(dāng)子列表下拉魏烫,contentOffset.y小于0時(shí)辣苏,子列表"停止?jié)L動(dòng)",父列表開(kāi)始"滾動(dòng)"

5哄褒、使用通知來(lái)接收滾動(dòng)消息


主要實(shí)現(xiàn)過(guò)程(代碼)

首先繼承UITableView新建LolitaTableView類(lèi)稀蟋,并定義三種類(lèi)型

typedef NS_ENUM(NSInteger , LLNestedTableViewType) {
    LLNestedTableViewTypeNormal, //該類(lèi)型和 UITableView 一致,未做其他設(shè)置
    LLNestedTableViewTypeMain, //主列表的類(lèi)型
    LLNestedTableViewTypeSub //子列表的類(lèi)型
};

1呐赡、兼容手勢(shì)

/// 向下傳遞手勢(shì)退客,觸發(fā)主列表的滾動(dòng)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    if (self.typeNested == LLNestedTableViewTypeMain) {   // 主table類(lèi)型的需要兼容手勢(shì)
        return YES;
    }
    return NO;
}

2、注冊(cè)通知

// 監(jiān)聽(tīng)列表滾動(dòng)的通知
[NSNotificationCenter.defaultCenter addObserverForName:LLNestedTableViewStopNotification object:nil queue:NSOperationQueue.mainQueue usingBlock:^(NSNotification * _Nonnull note) {
    // 這里觸發(fā)手動(dòng)控制主從列表的滾動(dòng)與否
}];

3罚舱、重寫(xiě)setContentOffset方法

/// 重寫(xiě)井辜,參與滾動(dòng)事件
-(void)setContentOffset:(CGPoint)contentOffset{
    [super setContentOffset:contentOffset];
    if (self.typeNested == LLNestedTableViewTypeNormal) {
        return; // 普通類(lèi)型不做修改
    }
    CGFloat y = contentOffset.y;
    switch (self.typeNested) {

            // 主列表類(lèi)型
        case LLNestedTableViewTypeMain:
        {
            CGFloat stayPosition = 0;
            // 獲取到停留的位置
            if ([self.delegateNested respondsToSelector:@selector(llNestedTableViewStayPosition:)]) {
                stayPosition = [self.delegateNested llNestedTableViewStayPosition:self];
            }
            if (self.canScroll) {
                // 當(dāng)主列表滾動(dòng)位置超過(guò)預(yù)設(shè)時(shí),我們發(fā)出通知管闷,讓子列表不能滾動(dòng)
                if (y > stayPosition) {
                    contentOffset.y = stayPosition;
                    [super setContentOffset:contentOffset];
                    self.canScroll = NO;
                    [NSNotificationCenter.defaultCenter postNotificationName:LLNestedTableViewStopNotification object:self];
                } else {
                    [super setContentOffset:contentOffset];
                }
            } else {
                contentOffset.y = stayPosition; // 讓其“停止”在預(yù)設(shè)位置粥脚,取消動(dòng)畫(huà),否則會(huì)因?yàn)闀r(shí)間差一直循環(huán)
                [super setContentOffset:contentOffset animated:NO];
            }

        }
            break;

            // 子列表類(lèi)型
        case LLNestedTableViewTypeSub:
        {
            if (self.canScroll) {
                // 當(dāng)子列表被下拉到最初位置時(shí)包个,我們讓其“停止”刷允,并發(fā)送通知,讓主列表可以滾動(dòng)
                if (y < 0) {
                    [super setContentOffset:CGPointZero];
                    self.canScroll = NO;
                    [NSNotificationCenter.defaultCenter postNotificationName:LLNestedTableViewStopNotification object:self];
                } else {
                    [super setContentOffset:contentOffset];
                }
            } else {
                [super setContentOffset:CGPointZero];
            }
        }
            break;
        default:
            break;
    }
}

4碧囊、通知處理

// 這里觸發(fā)手動(dòng)控制主從列表的滾動(dòng)與否
LLNestedTableView* table = note.object;
if (self.typeNested == LLNestedTableViewTypeNormal ||
    ![table isKindOfClass:UITableView.class]||
    (self.flag.length && ![self.flag isEqualToString:table.flag]))
{ return; }

// 當(dāng)發(fā)送通知方和當(dāng)前對(duì)象不一致树灶,則表示當(dāng)前對(duì)象需要開(kāi)啟滾動(dòng)
if (self != table) { self.canScroll = YES; }

// 把其他所有的sub都移動(dòng)到頂部,除去主的,其他table皆不能滾動(dòng)
if (table.typeNested == LLNestedTableViewTypeSub && self.typeNested == LLNestedTableViewTypeSub) {
    [self setContentOffset:CGPointZero];
    self.canScroll = NO;
}

使用

1糯而、父類(lèi)tableView

@property (strong ,nonatomic) LLNestedTableView *mainTable;
// 初始化父類(lèi)列表
-(LLNestedTableView *)mainTable{
    if (_mainTable==nil) {
        _mainTable = [[LLNestedTableView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64) style:UITableViewStyleGrouped];
        _mainTable.delegate = self;
        _mainTable.dataSource = self;
        _mainTable.delegateNested = self;  // 懸停代理
        _mainTable.tableFooterView = [UIView new];
        _mainTable.showsVerticalScrollIndicator = NO;
        _mainTable.typeNested = LLNestedTableViewTypeMain; // 列表類(lèi)型
    }
    return _mainTable;
}

注:需要將子列表加到列表上天通,最好是最后一個(gè)section的cell上,這樣比較靈活熄驼;其他位置也可以添加像寒,主要是需要配合懸停的位置使用

// !!!: 懸停的位置
- (CGFloat)llNestedTableViewStayPosition:(LLNestedTableView *)tableView{
    return tableView.tableHeaderView.frame.size.height;
}

2、子類(lèi)列表

-(LLNestedTableView *)table{
    if (_table==nil) {
        _table = [[LLNestedTableView alloc] initWithFrame:CGRectZero];
        _table.delegate = self;
        _table.dataSource = self;
        _table.showsVerticalScrollIndicator = NO;
        _table.tableFooterView = [UIView new];
        _table.typeNested = LLNestedTableViewTypeSub; // 除了類(lèi)型要設(shè)置為子類(lèi)瓜贾,用法和系統(tǒng)類(lèi)型一樣
    }
    return _table;
}

Demo地址


2019-12-16 補(bǔ)充:

支持了 Cocoapods 诺祸,方便集成 : pod 'LLNestedTableView'
修復(fù)了 iOS 13 下滾動(dòng)異常的問(wèn)題祭芦;
新增了聯(lián)動(dòng)的標(biāo)識(shí)筷笨,防止多個(gè)頁(yè)面錯(cuò)誤通知;
新增了 KVO 的形式進(jìn)行聯(lián)動(dòng)。


2020-07-27 補(bǔ)充:

重構(gòu)了 LLNestedTableView胃夏,支持 列表視圖 + 集合視圖 的聯(lián)動(dòng)轴或。

tableView_CollectionView.gif

注意:

1、懸停位置的設(shè)置改用回調(diào)的方式實(shí)現(xiàn)
2构订、如果你的內(nèi)容視圖非上述兩個(gè)視圖侮叮,如 UIScrollView,請(qǐng)自行轉(zhuǎn)換成上述兩個(gè)視圖悼瘾,或者根據(jù) 列表視圖 或者 集合視圖實(shí)現(xiàn)的方式自行實(shí)現(xiàn),大體思路不變
3审胸、關(guān)于內(nèi)容視圖 和 主列表 同時(shí)滾動(dòng)的問(wèn)題亥宿,目前解決方案是,手動(dòng)禁止某些滾動(dòng)視圖的滾動(dòng)事件砂沛。PS:另一種思路是改寫(xiě)關(guān)鍵方法 -gestureRecognizer: shouldRecognizeSimultaneouslyWithGestureRecognizer: 的值烫扼,筆者目前還沒(méi)有踩坑,只提供一種思路
4碍庵、UITableView/UICollectionView 需要彈性效果映企,UITableView 豎直方向默認(rèn)是開(kāi)啟的,UICollectionView 在數(shù)量少静浴,內(nèi)容視圖小于可見(jiàn)視圖時(shí)堰氓,彈性是關(guān)閉的,你需要設(shè)置 alwaysBounceVertical 為 YES/true

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末苹享,一起剝皮案震驚了整個(gè)濱河市双絮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌得问,老刑警劉巖囤攀,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異宫纬,居然都是意外死亡焚挠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)漓骚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蝌衔,“玉大人,你說(shuō)我怎么就攤上這事认境∨呶” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵叉信,是天一觀的道長(zhǎng)亩冬。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么硅急? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任覆享,我火速辦了婚禮,結(jié)果婚禮上营袜,老公的妹妹穿的比我還像新娘撒顿。我一直安慰自己,他們只是感情好荚板,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布凤壁。 她就那樣靜靜地躺著,像睡著了一般跪另。 火紅的嫁衣襯著肌膚如雪拧抖。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1 285
  • 那天免绿,我揣著相機(jī)與錄音唧席,去河邊找鬼。 笑死嘲驾,一個(gè)胖子當(dāng)著我的面吹牛淌哟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辽故,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼徒仓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了榕暇?” 一聲冷哼從身側(cè)響起蓬衡,我...
    開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎彤枢,沒(méi)想到半個(gè)月后狰晚,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡缴啡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年壁晒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片业栅。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡秒咐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出碘裕,到底是詐尸還是另有隱情携取,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布帮孔,位于F島的核電站雷滋,受9級(jí)特大地震影響不撑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晤斩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一焕檬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧澳泵,春花似錦实愚、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至幢妄,卻和暖如春兔仰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蕉鸳。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忍法,地道東北人潮尝。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像饿序,于是被迫代替她去往敵國(guó)和親勉失。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)原探、插件乱凿、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評(píng)論 4 62
  • 7:00市場(chǎng)采購(gòu) 10:00完成二次加工 愛(ài)與美食的誘惑 懂比吃更重要
    Q同學(xué)會(huì)閱讀 239評(píng)論 0 0
  • 千人千面徒蟆,你看到的也許根本就不是真的。 ——喬安 ...
    喬安同學(xué)閱讀 243評(píng)論 0 1
  • 生活型型,我沒(méi)有辦法做到面面具全段审,沒(méi)有辦法永遠(yuǎn)的忍讓和壓抑,沒(méi)有辦法為了別人開(kāi)心而開(kāi)心闹蒜,因?yàn)槿松虝骸乙?..
    kany閱讀 189評(píng)論 0 0
  • 我家在西南的一個(gè)小鎮(zhèn) 她是一個(gè)美麗的姑娘 她有藍(lán)藍(lán)的天空和綠綠的青山 她還有美麗的白云 她如此美麗 我怎能不愛(ài)她 ...
    一朵小云兒閱讀 449評(píng)論 11 8