美文网首页
iOS 瀑布流布局

iOS 瀑布流布局

作者: 木子李55 | 来源:发表于2022-12-26 22:42 被阅读0次
更具体的代码见文末demo地址

效果图

效果图.gif

使用方式

可以通过pod导入,也可以下载demo后把LYWaterFlowLayout文件夹导入。

pod 'LYWaterFlowLayout', '~> 0.0.2'
如果pod repo update后还pod search不到,可以运行如下命令清下缓存后应该就可以了。
rm ~/Library/Caches/CocoaPods/search_index.json
在使用的控制器中,
    
遵守代理<UICollectionViewDelegate, UICollectionViewDataSource,LYWaterFlowLayoutDelegate>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray *datas;

- (void)viewDidLoad{
    [super viewDidLoad];
    
    [self configData];
    [self creatUI];
    
    
}

-(void)configData{
    
    // 瀑布流假数据
    self.datas = [NSMutableArray array];
    for (int i = 0; i < 25; i++) {
        LYItemModel *itemModel = [[LYItemModel alloc] init];
        itemModel.title = [NSString stringWithFormat:@"测试标题%d", i];
        itemModel.itemSizeScale = i%3 + 0.5; // item比例
        [self.datas addObject:itemModel];
    }

}

-(void)creatUI{
    
    LYWaterFlowLayout *layout = [[LYWaterFlowLayout alloc] init];
    layout.columnMargin = 10;
    layout.rowMargin = 10;
    layout.columnCount = 3;
    layout.endgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
    layout.degelate = self;
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    self.collectionView.backgroundColor = [UIColor whiteColor];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[LYCollectionViewCell class] forCellWithReuseIdentifier:cellIndentifier];
    [self.view addSubview:self.collectionView];


}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.datas.count;
}
-(__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    LYCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIndentifier forIndexPath:indexPath];
    LYItemModel *itemModel = self.datas[indexPath.row];
    cell.backgroundColor = [UIColor yellowColor];
    cell.titleLable.text = itemModel.title;
    return cell;
}
-(CGFloat)Flow:(LYWaterFlowLayout *)Flow heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath{
    // width是根据列数和列间距计算好的item宽度,可以再根据item的比例来计算高度
    LYItemModel *itemModel = self.datas[indexPath.row];
    return width*itemModel.itemSizeScale;
}

demo下载https://github.com/zhuzi55/LYWaterFlowLayout.git

如对您有帮助,还请star一下。

相关文章

  • 关于自定义瀑布流的布局(Swift)

    瀑布流 UICollectionView Swift 最近整理以前iOS开发中用到的功能代码,发觉对瀑布流的布局有...

  • iOS瀑布流

    瀑布流 因为iOS提供UICollectionViewLayout的布局类不能实现瀑布流的效果,所以需要自定义一个...

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

网友评论

      本文标题:iOS 瀑布流布局

      本文链接:https://www.haomeiwen.com/subject/szcoqdtx.html