高性能異構(gòu)滾動視圖

參考文檔
鏈接文章是天貓開源的一個異構(gòu)滾動視圖,并在天貓?zhí)O果端實現(xiàn),其涉及高效復(fù)用,學(xué)習(xí)后簡單碼一下。

異構(gòu)滾動視圖是相對于TableView的同構(gòu)滾動視圖而言。普通ScrollView視圖較少時不用考慮復(fù)用題,但當(dāng)數(shù)量不斷增加后復(fù)用就顯得很必要。

STEP1.

    TMMuiLazyScrollView *scrollview = [[TMMuiLazyScrollView alloc]init];
    scrollview.frame = self.view.bounds;
    //設(shè)置contentSize
    scrollview.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds), 1230);
    scrollview.dataSource = self;
    [self.view addSubview:scrollview];
    
    
    //Here is frame array for test.
    //LazyScrollView must know every rect before rending.
    //必須先設(shè)置每個Item相對于滾動視圖的絕對坐標(biāo)
    rectArray  = [[NSMutableArray alloc] init];
    
    //單列Item
    //Create a single column layout with 5 elements;
    for (int i = 0; i < 5 ; i++) {
        [rectArray addObject:[NSValue valueWithCGRect:CGRectMake(10, i *80 + 2 , self.view.bounds.size.width-20, 80-2)]];
    }
    //雙列item
    //Create a double column layout with 10 elements;
    for (int i = 0; i < 10 ; i++) {
        [rectArray addObject:[NSValue valueWithCGRect:CGRectMake((i%2)*self.view.bounds.size.width/2 + 3, 410 + i/2 *80 + 2 , self.view.bounds.size.width/2 -3, 80 - 2)]];
    }
    //三列item
    //Create a trible column layout with 15 elements;
    for (int i = 0; i < 15 ; i++) {
        [rectArray addObject:[NSValue valueWithCGRect:CGRectMake((i%3)*self.view.bounds.size.width/3 + 1, 820 + i/3 *80 + 2 , self.view.bounds.size.width/3 -3, 80 - 2)]];
    }
    
    //STEP 3 reload LazyScrollView
    //相當(dāng)于再走一遍代理方法
    [scrollview reloadData];

STEP2.

//第二步 實現(xiàn)代理方法
// implement datasource delegate.
- (NSUInteger)numberOfItemInScrollView:(TMMuiLazyScrollView *)scrollView
{
    return rectArray.count;
}
//根據(jù)index返回rectModel
- (TMMuiRectModel *)scrollView:(TMMuiLazyScrollView *)scrollView rectModelAtIndex:(NSUInteger)index
{
    CGRect rect = [(NSValue *)[rectArray objectAtIndex:index]CGRectValue];
    TMMuiRectModel *rectModel = [[TMMuiRectModel alloc]init];
    
    //兩個屬性,一個相對于異構(gòu)視圖的絕對位置,一個唯一ID
    rectModel.absoluteRect = rect;
    rectModel.muiID = [NSString stringWithFormat:@"%ld",index];
    return rectModel;
}
//根據(jù)MuiID返回對應(yīng)的view,view與rectModel數(shù)量一致
- (UIView *)scrollView:(TMMuiLazyScrollView *)scrollView itemByMuiID:(NSString *)muiID
{
    //Find view that is reuseable first.
    //首先取出復(fù)用的Item
    LazyScrollViewCustomView *label = (LazyScrollViewCustomView *)[scrollView dequeueReusableItemWithIdentifier:@"testView"];
    
    //索引用的標(biāo)識,在異構(gòu)視圖中唯一
    NSInteger index = [muiID integerValue];
    NSLog(@"========%ld",index);
    //如果不存在則新建
    if (!label)
    {
        label = [[LazyScrollViewCustomView alloc]initWithFrame:[(NSValue *)[rectArray objectAtIndex:index] CGRectValue]];
        label.textAlignment = NSTextAlignmentCenter;
        label.reuseIdentifier = @"testView"; //重用ID
    }
    
    label.frame = [(NSValue *)[rectArray objectAtIndex:index]CGRectValue];
    label.text = [NSString stringWithFormat:@"%lu",(unsigned long)index];
    label.backgroundColor = [self randomColor];
    label.userInteractionEnabled = YES;
    
    [scrollView addSubview:label];

    [label addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(click:)]];
    
    return label;
}

PS: GitHub 上提供的這個Demo更多地展示的是高效復(fù)用,也許是因為很少有相應(yīng)的需求場景,感覺靈性有些欠缺,后期需要不斷嘗試實踐。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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