IOS應用開發14——使用UICollectionView實現圖片列表顯示

除了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:@"pictureCellIdentifier"];
    
    [self.view addSubview:_collectionView];
}

#pragma mark - collectionView代理方法

// 每個sectioin多少個item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}

// cell內容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pictureCellIdentifier"
                                                                  forIndexPath:indexPath];
    
    return cell;
    
}
@end

2.自定義cell

@interface PictureCell : UICollectionViewCell

@property (nonatomic, strong)UIImageView *photoView;
@property (nonatomic, strong)UIImageView *pictureCountView;

@property (nonatomic, strong)UILabel *pictureCount;
@property (nonatomic, strong)UILabel *titleLabel;
@property (nonatomic, strong)UIButton *nameBtn;
@property (nonatomic, strong)UILabel *visitCount;
@property (nonatomic, strong)UIButton *likeBtn;

@end

---------------------------------------------------------------
#define kPictureCellTitleHeight 40
#define kPictureCellFlagWidth   50
#define kPictureCellFlagHeight  20
@implementation PictureCell

- (id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self initSubViews]; 
    }
    
    return self;
}
- (void)initSubViews{
     // 圖片
        _photoView          = [UIImageView new];
        _pictureCountView   = [UIImageView new];
        _pictureCount       = [UILabel new];
        _titleLabel         = [UILabel new];
        _nameBtn            = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        _visitCount         = [UILabel new];
        _likeBtn            = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        
        // 圖像
        //_photoView.backgroundColor  = [UIColor greenColor];
        _photoView.layer.borderWidth = 0.5f;
        _photoView.layer.borderColor = [[UIColor grayColor] CGColor];
        
        // 圖像數量提示
        _pictureCountView.image = [UIImage imageNamed:@"picturebutten"];
        _pictureCount.font      = [UIFont fontWithName:nil size:16];
        _pictureCount.textColor = [UIColor whiteColor];
        //_pictureCount.backgroundColor = [UIColor redColor];
        _pictureCount.textAlignment = NSTextAlignmentCenter;
        
        // 標題
        _titleLabel.font = [UIFont fontWithName:nil size:17];
        
        // 名稱等
        _nameBtn.titleLabel.font = [UIFont fontWithName:nil size:11];
        _nameBtn.backgroundColor = [UIColor grayColor];
        _nameBtn.tag             = 222;
        _nameBtn.contentEdgeInsets = UIEdgeInsetsMake(0,5, 0, 0);
        _nameBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        [_nameBtn setTintColor:[UIColor blackColor]];
        [_nameBtn addTarget:self action:@selector(btnIsClicked:) forControlEvents:UIControlEventTouchUpInside];
        
        [_likeBtn setBackgroundImage:[UIImage imageNamed:@"picturebu4"] forState:UIControlStateNormal];
        [_likeBtn addTarget:self action:@selector(btnIsClicked:) forControlEvents:UIControlEventTouchUpInside];
        _likeBtn.tag = 111;
        
        _visitCount.font = [UIFont fontWithName:nil size:14];
        
        [self addSubview:_photoView];
        [self addSubview:_titleLabel];
        [self addSubview:_nameBtn];
        [self addSubview:_likeBtn];
        [self addSubview:_visitCount];
        [_photoView addSubview:_pictureCountView];
        [_pictureCountView addSubview:_pictureCount];
}

- (void)layoutSubviews{
    _photoView.frame = CGRectMake(0, 0, self.width, self.height - 60);
    _pictureCountView.frame = CGRectMake(_photoView.width - kPictureCellFlagWidth-5,
                                         _photoView.bottom - kPictureCellFlagHeight,
                                         kPictureCellFlagWidth,
                                         kPictureCellFlagHeight);
    _pictureCount.frame = CGRectMake(0,0,kPictureCellFlagWidth/2 ,18 );
    _titleLabel.frame = CGRectMake(0,self.height - 60,_photoView.width,kPictureCellTitleHeight);
    _nameBtn.frame = CGRectMake(0, _titleLabel.bottom+2, 80, 18);
    _likeBtn.frame = CGRectMake(_nameBtn.right+20, self.height -18, 20, 17.3);
    _visitCount.frame = CGRectMake(_likeBtn.right, self.height -20, 40, 20);
}
@end

3.從網絡下載圖片，使用SDWebImage實現

// 因爲是測試，下面就從網上找了10張圖片，一個數組存縮略圖地址，一個數組存原圖地址

_imgArr =  @[@"http://image15-c.poco.cn/mypoco/myphoto/20131110/20/5242736920131110201542020_640.jpg",
                     @"http://b.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c5e7f960e85d6277f9f2ff8c0.jpg",
                     @"http://d.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18b5c6410fa9c2f07082938fefc.jpg",
                     @"http://g.hiphotos.baidu.com/image/pic/item/d50735fae6cd7b8928e0235c0d2442a7d8330e64.jpg",
                     @"http://f.hiphotos.baidu.com/image/pic/item/c75c10385343fbf2978bafe1b27eca8064388f48.jpg",
                     @"http://g.hiphotos.baidu.com/image/pic/item/8601a18b87d6277f103081ff2a381f30e824fcd3.jpg",
                     @"http://e.hiphotos.baidu.com/image/pic/item/b7003af33a87e95039ab96ad12385343faf2b4b6.jpg",
                     @"http://a.hiphotos.baidu.com/image/pic/item/d0c8a786c9177f3ebf1d2bfc72cf3bc79f3d5612.jpg",
                     @"http://a.hiphotos.baidu.com/image/pic/item/9e3df8dcd100baa12d04904a4510b912c8fc2e13.jpg",
                     @"http://b.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd55c7a3f0553da81cb39db3d12.jpg"];
_thumbArr = @[@"http://a.hiphotos.baidu.com/image/w%3D230/sign=f608906acc1b9d168ac79d62c3dfb4eb/314e251f95cad1c82748fe927d3e6709c83d5197.jpg",
                      @"http://b.hiphotos.baidu.com/image/w%3D230/sign=a2f7a9d40db30f24359aeb00f894d192/4bed2e738bd4b31c5e7f960e85d6277f9f2ff8c0.jpg",
                      @"http://d.hiphotos.baidu.com/image/w%3D230/sign=d40138a140a7d933bfa8e3709d4ad194/8ad4b31c8701a18b5c6410fa9c2f07082938fefc.jpg",
                      @"http://g.hiphotos.baidu.com/image/w%3D230/sign=86ff09f097cad1c8d0bbfb244f3c67c4/d50735fae6cd7b8928e0235c0d2442a7d8330e64.jpg",
                      @"http://f.hiphotos.baidu.com/image/w%3D230/sign=70618e0941166d223877129776220945/c75c10385343fbf2978bafe1b27eca8064388f48.jpg",
                      @"http://g.hiphotos.baidu.com/image/w%3D230/sign=ccb85fc4ca95d143da76e32043f18296/8601a18b87d6277f103081ff2a381f30e824fcd3.jpg",
                      @"http://e.hiphotos.baidu.com/image/w%3D230/sign=047b01cc249759ee4a5067c882fa434e/b7003af33a87e95039ab96ad12385343faf2b4b6.jpg",
                      @"http://a.hiphotos.baidu.com/image/w%3D230/sign=45021f3bad51f3dec3b2be67a4eff0ec/d0c8a786c9177f3ebf1d2bfc72cf3bc79f3d5612.jpg",
                      @"http://a.hiphotos.baidu.com/image/w%3D230/sign=da3ccf34e2fe9925cb0c6e5304a95ee4/9e3df8dcd100baa12d04904a4510b912c8fc2e13.jpg",
                      @"http://b.hiphotos.baidu.com/image/w%3D230/sign=6d963399cebf6c81f7372beb8c3fb1d7/7c1ed21b0ef41bd55c7a3f0553da81cb39db3d12.jpg"
                      ];
// 修改sectioin 的item個數
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _thumbArr.count;
}
// 修改cell 相關
註冊的cell要該爲自定義cell
[_collectionView registerClass:[PictureCell class]forCellWithReuseIdentifier:@"pictureCellIdentifier"];

PictureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pictureCellIdentifier"
                                                                  forIndexPath:indexPath];
設置cell屬性內容
[cell.photoView setImageURLStr:_thumbArr[indexPath.row] placeholder:nil];
[cell.photoView setImageURLStr:_thumbArr[indexPath.row] placeholder:nil];
cell.titleLabel.text = @"這是測試標題信息";
[cell.nameBtn setTitle:[NSString stringWithFormat:@"攝影師:%@",@"小飛俠"]
              forState:UIControlStateNormal];
cell.pictureCount.text = @"10";
cell.visitCount.text = @"1223";

這樣就實現了，親，是不是很簡單呢。