表格横向布局及分页实现原理

简介: 表格横向布局及分页实现原理

第一种方法:采用ZJScrollPageView组件。

1.采用ZJScrollPageView组件;

2.对数据进行横向分页;

3.建立支持ZJScrollPageViewChildVcDelegate协议的页面;

4.在父页面实现childViewController,子UIViewController为第三步建立多个页面。

5.添加底部滑动条。

演示视频下载地址。

第二种方法:采用UICollectionView。我做了不分页的情况。据说通过scrollViewDidScroll可以控制一次滑一屏幕,我没有试过。若不分页的情况,这种方案最简单。不过滑动条是系统自带的,滑动结束滑动条消失,若想实现滑动进度条需要自己实现,通过scrollViewDidScroll计算滑动距离显示滑动进度条,实现滑动进度条比较麻烦。具体用那种方法根据具体场景计算。

想实现横向滑动布局最关键的设置代码是:

flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

其次:表格要设计为多section,每个section的个数为1;

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 1;//isCommonUnitEmptyArray(self.model.photosArr) ? 1 : self.model.photosArr.count+1;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return isCommonUnitEmptyArray(self.model.photosArr) ? 1 : self.model.photosArr.count+1;
}

注意:不能像纵向布局UICollectionView那样设置referenceSizeForHeaderInSection和referenceSizeForFooterInSection。一般不设置就可以若想设置就设置高度为1.0f / [UIScreen mainScreen].scale。

具体代码:

- (UICollectionView *)collectionView {
    if(!_collectionView)
    {
        //创建布局
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];

        //创建CollectionView
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(45, (FULL_HEIGHT - kNavBarAndStatusBarHeight-30-30-36-15-18-15-18-(40 - itemDetailViewInterval/2)-24 -25-60 -15-18-(45 - itemDetailViewInterval/2)-24-15-18-(55+24+15+18-itemDetailViewInterval)*2)/2 +30+30+36+15+18+15+18+(40 - itemDetailViewInterval/2)+24 +25-10, (kUIScreenWidth-475-45*2), 60+15+18+20) collectionViewLayout:flowLayout];
        _collectionView.dataSource = self;
        _collectionView.delegate = self;
        _collectionView.showsHorizontalScrollIndicator = YES;
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
//        _collectionView.alwaysBounceVertical = YES;
        if (@available(iOS 11.0, *)) {
            _collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        }
        _collectionView.backgroundColor = [UIColor clearColor];//BGColorHex(F9F9F9);
        [_collectionView registerClass:[JCTItemDetailListCell class] forCellWithReuseIdentifier:NSStringFromClass([JCTItemDetailListCell class])];
//        [_collectionView registerClass:[PPFeaturedItemtListCell class] forCellWithReuseIdentifier:NSStringFromClass([PPFeaturedItemtListCell class])];
//        [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([PPChooseSongHeadView class])];
//        [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([PPFeaturedItemsHeadView class])];
        [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//        _collectionView.alwaysBounceHorizontal = YES;
//        _collectionView.alwaysBounceVertical = NO;

        //定义每个UICollectionView 的大小
        flowLayout.itemSize = CGSizeMake(111, 60);
        //定义每个UICollectionView 横向的间距
        flowLayout.minimumLineSpacing = BG_1PX;
        //定义每个UICollectionView 纵向的间距
        flowLayout.minimumInteritemSpacing = BG_1PX;
        //定义每个UICollectionView 的边距距
        //    flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);//上左下
    }
    return _collectionView;
}
目录
相关文章
|
4天前
|
前端开发 JavaScript
如何实现瀑布流排列方式
如何实现瀑布流排列方式
10 0
|
29天前
表格高度根据内容自适应的瀑布流
表格高度根据内容自适应的瀑布流
22 1
|
1月前
|
前端开发 搜索推荐 容器
div+css的布局较table布局有什么优缺点?
div+css的布局较table布局有什么优缺点?
原生表格-滚动-合并功能
原生表格-滚动-合并功能
|
1月前
原生表格纵向滚动条
原生表格纵向滚动条
|
7月前
|
小程序 JavaScript
小程序实现竖行布局视图(类表格)
小程序实现竖行布局视图(类表格)
49 0
|
8月前
|
存储 前端开发 容器
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
50 0
|
8月前
32EasyUI 数据网格- 自定义分页
32EasyUI 数据网格- 自定义分页
19 0
|
8月前
|
前端开发 容器
41EasyUI 数据网格- 扩展行显示细节
41EasyUI 数据网格- 扩展行显示细节
27 0
|
8月前
|
JSON 数据格式
44EasyUI 数据网格- 添加分页组件
44EasyUI 数据网格- 添加分页组件
21 0