IOS应用开发14——使用UICollectionView实现图片列表显示

最新推荐文章于 2018-02-24 14:38:00 发布

VIP文章 Ably_Clove

最新推荐文章于 2018-02-24 14:38:00 发布

阅读量3.7k

点赞数

分类专栏： ios Mac OC OSX

本文链接：https://blog.csdn.net/ably_clove/article/details/39397621

版权

除了UITableView列表形式外，还常常会用到UICollectionView来显示九宫格样式的结构，也可以用以实现瀑布流。这里先简单的实现基本的UICollectionView，其他的后续记录。有时候我们会实现如下图的界面样式。

是一个典型的UICollectionView结构。那我们就来实现它吧。主要步骤如下：

1.实例化一个UICollectionView对象，设置代理方法等。

2.定制UICollectionViewCell样式。

3.从网络获取图片。

部分代码示例如下：

1.定制一个UICollectionView加入视图中

@interface PictureViewController ()<
UICollectionViewDelegate,
UICollectionViewDataSource>

// 加载collectionView
- (void)loadCollectionView;

@end

@implementation PictureViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // 设置标题
        [self setNavigationBarTitle:@"图片"];
        self.view.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

- (void)viewDidLoad{
    [super viewDidLoad];
    
    // 加载collectionView
    [self loadCollectionView];
}
#pragma  mark - 初始化、加载方法

// 加载collectionView
- (void)loadCollectionView{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置每个cell的大小
    layout.itemSize = CGSizeMake(155 , 250);

    CGFloat paddingY = 10;
    //CGFloat paddingX = 10;
    layout.sectionInset = UIEdgeInsetsMake(paddingY, 0, 0, 0);
    // 上左下右

    layout.minimumLineSpacing = paddingY;
    
    _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, kMarginTop, kScreenWidth, kScreenHeight - kTabBarHeight-kMarginTop)
                                         collectionViewLayout:layout];
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    _collectionView.backgroundColor = [UIColor whiteColor];
    // 注册cell,否则会报错
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"pictureC