UICollectionView 簡單介紹
執行效果:
類似這樣多行多排的 cell
用 UICollectionView
來實現還是很方便的,之前不太常常用到,對 api
比較生疏,寫了一個最基礎的 demo
。
demo .m 所有的程式碼
#import "ViewController.h"
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) UICollectionViewFlowLayout *layout;
@end
@implementation ViewController
#pragma mark - Life Circle
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.collectionView];
[self.collectionView setFrame:CGRectMake(0,
0,
self.view.frame.size.width,
self.view.frame.size.height)];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
#pragma mark - Delegates
#pragma mark UICollectionViewDelegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 4;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCell"
forIndexPath:indexPath];
[cell setBackgroundColor:[UIColor redColor]];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"哎呀,點我");
}
- (UICollectionReusableView *) collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
UICollectionReusableView *reusableview = nil;
if (kind == UICollectionElementKindSectionHeader) {
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"HeaderView"
forIndexPath:indexPath];
[headerView setBackgroundColor:[UIColor yellowColor]];
reusableview = headerView;
}
if (kind == UICollectionElementKindSectionFooter) {
UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"FooterView"
forIndexPath:indexPath];
[footerview setBackgroundColor:[UIColor orangeColor]];
reusableview = footerview;
}
return reusableview;
}
#pragma mark - Getters & Setters
- (UICollectionView *)collectionView {
if (_collectionView == nil) {
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero
collectionViewLayout:self.layout];
[_collectionView setBackgroundColor:[UIColor whiteColor]];
[_collectionView setDelegate:self];
[_collectionView setDataSource:self];
[_collectionView registerClass:[UICollectionViewCell class]
forCellWithReuseIdentifier:@"UICollectionViewCell"];
[_collectionView registerClass:[UICollectionReusableView class]
forSupplementaryViewOfKind:@"UICollectionElementKindSectionHeader"
withReuseIdentifier:@"HeaderView"];
[_collectionView registerClass:[UICollectionReusableView class]
forSupplementaryViewOfKind:@"UICollectionElementKindSectionFooter"
withReuseIdentifier:@"FooterView"];
}
return _collectionView;
}
- (UICollectionViewFlowLayout *)layout {
if (_layout == nil) {
_layout = [[UICollectionViewFlowLayout alloc] init];
_layout.minimumInteritemSpacing = 16.0f;
_layout.minimumLineSpacing = 16.0f;
_layout.itemSize = CGSizeMake((self.view.frame.size.width - 48.0f)/2,
100.0f);
_layout.sectionInset = UIEdgeInsetsMake(16.0f,
16.0f,
16.0f,
16.0f);
_layout.scrollDirection = UICollectionViewScrollDirectionVertical;
_layout.headerReferenceSize = CGSizeMake(self.view.frame.size.width,
100.0f);
_layout.footerReferenceSize = CGSizeMake(self.view.frame.size.width,
100.0f);
}
return _layout;
}
相關文章
- UICollectionView(一)簡介UIView
- UICollectionView(二)實現一個最簡單的UICollectionViewUIView
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- SCSS 簡單介紹CSS
- css簡單介紹CSS
- RPC簡單介紹RPC
- Webpack 的簡單介紹Web
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- Python簡單介紹Python
- <svg>元素簡單介紹SVG
- Git_簡單介紹Git
- JSON簡單介紹JSON
- 簡單介紹克隆 JavaScriptJavaScript
- 簡單介紹 ldd 命令
- javascript物件簡單介紹JavaScript物件
- CSS OOCSS簡單介紹CSS
- CSS SMACSS簡單介紹CSSMac
- CSS BEM簡單介紹CSS
- javascript this指向簡單介紹JavaScript
- javascript加密簡單介紹JavaScript加密
- nodejs簡單介紹NodeJS
- Promise的簡單介紹Promise
- CFRunloopObserverRef 的簡單介紹OOPServer
- SQL JOIN 簡單介紹SQL
- oracle lob 簡單介紹Oracle
- Oracle鎖簡單介紹Oracle
- ORACLE 鎖簡單介紹Oracle
- 簡單介紹JavaScript閉包JavaScript
- 檔案管理簡單介紹
- jQuery Validate簡單介紹jQuery
- canvas標籤簡單介紹Canvas
- JSON物件簡單介紹JSON物件