[iOS]UITableView实现简单瀑布流

最新推荐文章于 2021-12-04 22:51:33 发布

ttquaner

最新推荐文章于 2021-12-04 22:51:33 发布

阅读量1.1k

点赞数

文章标签：瀑布流 ios

本文链接：https://blog.csdn.net/ttquaner/article/details/37606297

版权

本文介绍如何利用UITableView和自定义UITableViewCell，在iOS平台上实现简单的瀑布流布局。通过设置三个UITableView，每个显示一列图片，并调整偏移量同步滚动。自定义的UITableViewCell内根据图片大小等比缩放UIImageView。采用一个数组存储所有图片资源，解决多列布局下图片对应数组位置的问题。

摘要由CSDN通过智能技术生成

使用UITableView + 自定义UITableViewCell可以实现瀑布流。

简单思路：根据图片的大小，等比缩小显示图片。我设计的是三列图片，用到三个UITableView，设置相同的偏移量，实现三个UITableView同时滚动。自定义UITableViewCell用来存放图片，根据图片的尺寸，等比缩小存放图片的UIImageView。用一个数组来存放所有图片的名字。

一共有三列，每行有三张图片，麻烦的是如何确定当前显示的图片是数组里哪一个（因为平常用的是一个UITableView，indexPath.row就是其在数组中的位置）。看一下下面的代码

    // 计算  是数组中哪一个图片
    NSInteger index = indexPath.row * 3;
    if (_middleView == tableView) {
        index++;
    }
    if (_rightView == tableView) {
        index += 2;
    }

我们可以这么做，让indexPath.row 乘以列数3，然后对所得的值index进行判断，视图分为左，中，右三个，左边一列在数组中的位置都是3的倍数，不用考虑。如果是中间的视图，就让index +1，右边的视图就让index + 2。这样，就获得了每张图片在数组中的位置。

下面来看一下代码吧

MainViewController.h

#import <UIKit/UIKit.h>

@interface MainViewController : UIViewController <UITableViewDataSource,UITableViewDelegate>
{
    UIScrollView *_scroll;
    UITableView *_leftView;
    UITableView *_middleView;
    UITableView *_rightView;
}

@property (nonatomic,retain) NSMutableArray *imagesArray;
@end

MainViewController.m

#import "MainViewController.h"
#import "CustomTableViewCell.h"
#import "DetailViewController.h"

@interface MainViewController ()

@end

@implementation MainViewController
- (void)dealloc{
    [_imagesArray release];
    _imagesArray = nil;
    [super dealloc];
}
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self =