iOS開發UI篇 -- UICollectionView

標籤：

專業九宮格開發好幾年。。。 必須使用這控制項

這裡以某易的“       產品推薦       ”介面做介紹。

一、UICollectionView的使用

1、註冊cell(告訴collectionView將來建立怎樣的cell)[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"product"];2、從緩衝池中取出cell- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"product" forIndexPath:indexPath];    return cell;}  3、重寫init方法,建立布局參數 -- 》 這裡重寫init方法是因為我們在BaseViewController中都使用的是init方法，為了統一，所以重寫了init方法- (id)init{    // 1.流水布局        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];    // 2.每個cell的尺寸        layout.itemSize = CGSizeMake(100, 100);    return [super initWithCollectionViewLayout:layout];}4、UICollectionViewFlowLayout稱為”流水布局”, 用來約束cell的顯示常見屬性Cell的尺寸@property (nonatomic) CGSize itemSize;cell之間的水平間距@property (nonatomic) CGFloat minimumInteritemSpacing;cell之間的垂直間距@property (nonatomic) CGFloat minimumLineSpacing;四周的內邊距@property (nonatomic) UIEdgeInsets sectionInset;

二、上demo -- 某易的“       產品推薦       ”介面
#import  “BJProductViewController.h”

#define BJProductID @"product"#import "BJProductViewController.h"#import "BJProduct.h"#import "BJCollectionCell.h"@interface BJProductViewController ()@property(nonatomic,strong)NSMutableArray *products;@end@implementation BJProductViewControllerstatic NSString * const reuseIdentifier = @"Cell";- (instancetype)init{        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];    layout.itemSize = CGSizeMake(85, 85);    layout.minimumInteritemSpacing = 0;    layout.minimumLineSpacing = 20;    layout.sectionInset = UIEdgeInsetsMake(layout.minimumLineSpacing,10,0,10);    return [super initWithCollectionViewLayout:layout];}- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];    if (self) {        // Custom initialization    }    return self;}- (NSArray *)products{    if(_products == nil){        NSString *path = [[NSBundle mainBundle] pathForResource:@"products.json" ofType:nil];        NSData *json = [NSData dataWithContentsOfFile:path];        NSArray *dictArray = [NSJSONSerialization JSONObjectWithData:json options:NSJSONReadingMutableContainers error:nil];                NSMutableArray *mutArray = [NSMutableArray array];        for (NSDictionary *dict in dictArray) {            BJProduct *product = [BJProduct productWithDict:dict];            [mutArray addObject:product];        }                _products = mutArray;    }    //    NSLog(@"%@",_products);    return  _products;}- (void)viewDidLoad{    [super viewDidLoad];    self.collectionView.backgroundColor = [UIColor whiteColor];    // Uncomment the following line to preserve selection between presentations    // self.clearsSelectionOnViewWillAppear = NO;    UINib *nib = [UINib nibWithNibName:@"BJCollectionCell" bundle:nil];    [self.collectionView registerNib:nib forCellWithReuseIdentifier:BJProductID];    // Register cell classes//    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];        // Do any additional setup after loading the view.}#pragma mark <UICollectionViewDataSource>- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 1;}- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{        return self.products.count;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{        BJCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:BJProductID forIndexPath:indexPath];        // Configure the cell    cell.product = self.products[indexPath.item];            //    cell.backgroundColor = [UIColor orangeColor];    return cell;}@end

#import BJCollectionCell.h

#import <UIKit/UIKit.h>@class BJProduct;@interface BJCollectionCell : UICollectionViewCell@property(nonatomic,strong)BJProduct *product;@end

#import BJCollectionCell.m

#import "BJCollectionCell.h"#import "BJProduct.h"@interface BJCollectionCell()@property (weak, nonatomic) IBOutlet UIImageView *iconImage;@property (weak, nonatomic) IBOutlet UILabel *nameLable;@end@implementation BJCollectionCell- (void)awakeFromNib // 這裡使用的是xib，在這裡載入資料，還有需要注意cell的父類和ID{    // Initialization code    self.iconImage.layer.cornerRadius = 6;    self.iconImage.layer.masksToBounds = YES;}- (void)setProduct:(BJProduct *)product{    _product = product;        self.iconImage.image = [UIImage imageNamed:product.icon];    self.nameLable.text = product.title;}@end

#import BJProduct.h

#import <Foundation/Foundation.h>@interface BJProduct : NSObject@property(nonatomic,copy)NSString *icon;@property(nonatomic,copy)NSString *title;+ (instancetype)productWithDict:(NSDictionary *)dict;+ (instancetype)initWithDict:(NSDictionary *)dict;@end

#import BJProduct.m

#import "BJProduct.h"@implementation BJProduct+ (instancetype)productWithDict:(NSDictionary *)dict{    BJProduct *product = [[self alloc] init];    product.icon = dict[@"icon"];    product.title = dict[@"title"];    return product;}+ (instancetype)initWithDict:(NSDictionary *)dict{    return [self productWithDict:dict];}@end

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

iOS開發UI篇 -- UICollectionView