UICollectionView是iOS开发中很重要的控件容器，我的经验中如果需要横向滚动或者九宫格和瀑布流的页面都会用UICollectiongView来作为视图的容器
还是先提出需求，然后用OC和Swift纯手码给出解决方案，最后如果可以的话会分析下下.h的代理方法。
需求一：横向滚动（广告轮播图）
7.png
解决方案
OC
#define SCREENWIDTH [UIScreen mainScreen].bounds.size.width
#define SCREENHEIGHT [UIScreen mainScreen].bounds.size.height
/**< rgb值设置颜色 */
#define RGBCOLOR(r,g,b) [UIColor colorWithRed:(r)/255.0f green:(g)/255.0f blue:(b)/255.0f alpha:1]
/**< 16进制值设置颜色 */
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
/**< 16进制值设置颜色和透明度 */
#define UIColorFromRGBA(rgbValue,alph) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:alph]
/**< 随机颜色 */
#define randomColor RGBCOLOR(arc4random_uniform(255)%255, arc4random_uniform(255)%255, arc4random_uniform(255)%255)
@interface RootViewController : UIViewController<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) UICollectionView *collectionView;
@end
@implementation RootViewController
- (void)viewDidLoad{
[super viewDidLoad];
self.title = @"横向滚动";
self.view.backgroundColor = randomColor;
[self.view addSubview:self.collectionView];
}
#pragma mark==collectionView
- (UICollectionView *)collectionView{
if (!_collectionView) {
//layout --》collectionView的布局类
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
//最小行间距
layout.minimumLineSpacing = 0;
//最小列间距
layout.minimumInteritemSpacing = 0;
//滚动方向：横向和竖向
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//collectionView初始化
_collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.pagingEnabled = YES;
_collectionView.backgroundColor = randomColor;
//注册cell
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}
return _collectionView;
}
//collectionView's delegate and datasource:
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 3;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(SCREENWIDTH, SCREENHEIGHT);
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = randomColor;
return cell;
}
@end
#pragma mark==========MYFAppDelegate
@interface MYFAppDelegate : NSObject<UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
@implementation MYFAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
self.window = [[UIWindow alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH,SCREENHEIGHT)];
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:[[RootViewController alloc]init]];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}
@end
#pragma mark==========程序入口
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([MYFAppDelegate class]));
}
}
8.gif
Swift
let SCREENWIDTH = UIScreen.mainScreen().bounds.size.width
let SCREENHEIGHT = UIScreen.mainScreen().bounds.size.height
class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource{
var collectionView:UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
self.setupUI()
}
func setupUI() {
self.view.backgroundColor = UIColor.yellowColor()
self.title = "横向滚动"
//layout
let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.scrollDirection = .Horizontal
layout.itemSize = self.view.bounds.size
//collectionView
collectionView = UICollectionView.init(frame:self.view.bounds, collectionViewLayout:layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.pagingEnabled = true
collectionView.registerClass(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier: "cell")
collectionView.backgroundColor = UIColor.yellowColor()
self.view.addSubview(collectionView)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3;
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell:UICollectionViewCell! = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath)
let colorArray : [UIColor] = [UIColor.blueColor(),UIColor.redColor(),UIColor.yellowColor()]
cell.contentView.backgroundColor = colorArray[indexPath.row]
return cell
}
}
9.gif
需求二 内边距
通过设置collectionView的collectionViewLayout属性来设置collection的内边距
sectionn内边距
方案一
let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsetsMake(100, 40,100, 40);
10.gif
方案二
** 用section代替row**
11.gif
需求三：九宫格
Paste_Image.png
OC
#import "ViewController.h"
#define SCREENWIDTH [UIScreen mainScreen].bounds.size.width
#define SCREENHEIGHT [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) UICollectionView *collectionView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(SCREENWIDTH*0.3-33, SCREENWIDTH*0.3-33);
layout.minimumLineSpacing = 10;
layout.minimumInteritemSpacing = 10;
layout.sectionInset = UIEdgeInsetsMake(64, 20, 64, 20);
self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
self.collectionView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:self.collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 9;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1];
return cell;
}
@end
Swift
import UIKit
let SCREENWIDTH = UIScreen.mainScreen().bounds.size.width
let SCREENHEIGHT = UIScreen.mainScreen().bounds.size.height
class ViewController: UIViewController ,UICollectionViewDataSource,UICollectionViewDelegate{
var collectionView:UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.itemSize = CGSizeMake(SCREENWIDTH*0.33-33, SCREENWIDTH*0.33-33)
layout.minimumInteritemSpacing = 10
layout.minimumLineSpacing = 10
layout.sectionInset = UIEdgeInsetsMake(64, 20, 64, 20)
collectionView = UICollectionView.init(frame: self.view.bounds, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.registerClass(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier:"cell")
collectionView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(collectionView)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 9;
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell:UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath)
cell.backgroundColor = UIColor.init(red:CGFloat(arc4random_uniform(255))/255.0, green: CGFloat(arc4random_uniform(255))/255.0, blue: CGFloat(arc4random_uniform(255))/255.0, alpha: 1)
return cell
}
}
Paste_Image.png
需求四：瀑布流
瀑布流其实是不规则的九宫格
1.jpg
