ios - uicollectionviewcontroller - Crear un UICollectionView mediante programación

uicollectionviewcell indexpath

Question

Estoy buscando una guía o tutorial que me muestre cómo configurar un UICollectionView simple usando solo código.

Estoy vagando por la documentación en el sitio de Apple , y estoy usando el manual de referencia también.

Pero realmente me beneficiaría de una guía simple que puede mostrarme cómo configurar UICollectionView sin tener que usar Storyboards o archivos XIB / NIB, pero desafortunadamente cuando busco, todo lo que puedo encontrar son tutoriales que incluyan Storyboard.

Answer 1

1. Basándose en la respuesta de @ Warewolf, el siguiente paso es crear su propia celda personalizada.

   Vaya a File -> New -> File -> User Interface -> Empty -> Call este plumín "customNib" .

2. En su customNib arrastre una celda UICollectionView . Dele reutilización de identificador de celda @"Cell" .

3. File -> New -> File -> Cocoa Touch Class -> Class llamada subclase "CustomCollectionViewCell" si UICollectionViewCell .

4. Regrese a la punta personalizada, haga clic en la celda y "CustomCollectionViewCell" esta clase personalizada "CustomCollectionViewCell" .

5. Vaya a su viewDidLoad viewcontroller y en lugar de

   [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];

   tener

   UINib *nib = [UINib nibWithNibName:@"customNib" bundle:nil]; [_collectionView registerNib:nib forCellWithReuseIdentifier:@"Cell"];

6. Además, cambie (a su nuevo identificador de celda)

   UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

Answer 2

Archivo de cabecera:--

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
{
UICollectionView *_collectionView;
}

Archivo de Implementación: -

- (void)viewDidLoad
{
[super viewDidLoad];
self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
_collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
[_collectionView setDataSource:self];
[_collectionView setDelegate:self];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
[_collectionView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:_collectionView];
// Do any additional setup after loading the view, typically from a nib.
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 15;
}
// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
cell.backgroundColor=[UIColor greenColor];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(50, 50);
}

Salida---

Answer 3

Documentos de Apple:

- (id)initWithFrame:(CGRect)frame
collectionViewLayout:(UICollectionViewLayout *)layoutParameters

Utilice este método al inicializar un objeto de vista de colección mediante programación. Si especifica nil para el parámetro de diseño, debe asignar un objeto de diseño a la propiedad collectionViewLayout antes de mostrar la vista de colección en pantalla. Si no lo hace, la vista de colección no podrá presentar ningún elemento en la pantalla.

Este método es el inicializador designado.

Este método se usa para inicializar UICollectionView . aquí proporciona frame y un objeto UICollectionViewLayout .

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];

Al final, agregue UICollectionView como una subview a su vista.

Ahora la vista de colección se agrega pro gramaticalmente. Puedes seguir aprendiendo
¡¡Feliz aprendizaje!! Espero que te ayude

Answer 4

Puede manejar la celda personalizada en la vista de uicollection vea el código a continuación.

- (void)viewDidLoad
{
UINib *nib2 = [UINib nibWithNibName:@"YourCustomCell" bundle:nil];
[CollectionVW registerNib:nib2 forCellWithReuseIdentifier:@"YourCustomCell"];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setItemSize:CGSizeMake(200, 230)];
flowLayout.minimumInteritemSpacing = 0;
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[CollectionVW setCollectionViewLayout:flowLayout];
[CollectionVW reloadData];
}
#pragma mark - COLLECTIONVIEW
#pragma mark Collection View CODE
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return Array.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"YourCustomCell";
YourCustomCell *cell = (YourCustomCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.MainIMG.image=[UIImage imageNamed:[Array objectAtIndex:indexPath.row]];
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
}
#pragma mark Collection view layout things
// Layout: Set cell size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize mElementSize;
mElementSize=CGSizeMake(kScreenWidth/3.4, 150);
return mElementSize;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 5.0;
}
// Layout: Set Edges
- (UIEdgeInsets)collectionView: (UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
if (isIphone5 || isiPhone4)
{
return UIEdgeInsetsMake(15,15,5,15); // top, left, bottom, right
}
else if (isIphone6)
{
return UIEdgeInsetsMake(15,15,5,15); // top, left, bottom, right
}
else if (isIphone6P)
{
return UIEdgeInsetsMake(15,15,5,15); // top, left, bottom, right
}
return UIEdgeInsetsMake(15,15,5,15); // top, left, bottom, right
}

Answer 5

Swift 3

class TwoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let flowLayout = UICollectionViewFlowLayout()
let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: flowLayout)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "collectionCell")
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.cyan
self.view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
return 20
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.green
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
return CGSize(width: 50, height: 50)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
{
return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}
}

Answer 6

examen de vista de colección

#import "CollectionViewController.h"
#import "BuyViewController.h"
#import "CollectionViewCell.h"
@interface CollectionViewController ()
{
NSArray *mobiles;
NSArray *costumes;
NSArray *shoes;
NSInteger selectpath;
NSArray *mobilerate;
NSArray *costumerate;
NSArray *shoerate;
}
@end
@implementation CollectionViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.title = self.receivename;
mobiles = [[NSArray alloc]initWithObjects:@"7.jpg",@"6.jpg",@"5.jpg", nil];
costumes = [[NSArray
alloc]initWithObjects:@"shirt.jpg",@"costume2.jpg",@"costume1.jpg", nil];
shoes = [[NSArray
alloc]initWithObjects:@"shoe.jpg",@"shoe1.jpg",@"shoe2.jpg", nil];
mobilerate = [[NSArray alloc]initWithObjects:@"10000",@"11000",@"13000",
nil];
costumerate = [[NSArray alloc]initWithObjects:@"699",@"999",@"899", nil];
shoerate = [[NSArray alloc]initWithObjects:@"599",@"499",@"300", nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - UICollectionview Data Source
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView
*)collectionView
{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView
numberOfItemsInSection:(NSInteger)section
{
return 3;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellId = @"cell";
UICollectionViewCell *cell = [collectionView
dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];
UIImageView *collectionImg = (UIImageView *)[cell viewWithTag:100];
if ([self.receivename isEqualToString:@"Mobiles"])
{
collectionImg.image = [UIImage imageNamed:[mobiles
objectAtIndex:indexPath.row]];
}
else if ([self.receivename isEqualToString:@"Costumes"])
{
collectionImg.image = [UIImage imageNamed:[costumes
objectAtIndex:indexPath.row]];
}
else
{
collectionImg.image = [UIImage imageNamed:[shoes
objectAtIndex:indexPath.row]];
}
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView
didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
selectpath = indexPath.row;
[self performSegueWithIdentifier:@"buynow" sender:self];
}

pragma mark - Navegación

 // In a storyboard-based application, you will often want to do a little

- (void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) remitente {

if ([segue.identifier isEqualToString:@"buynow"])
{
BuyViewController *obj = segue.destinationViewController;
if ([self.receivename isEqualToString:@"Mobiles"])
{
obj.reciveimg = [mobiles objectAtIndex:selectpath];
obj.labelrecive = [mobilerate objectAtIndex:selectpath];
}
else if ([self.receivename isEqualToString:@"Costumes"])
{
obj.reciveimg = [costumes objectAtIndex:selectpath];
obj.labelrecive = [costumerate objectAtIndex:selectpath];
}
else
{
obj.reciveimg = [shoes objectAtIndex:selectpath];
obj.labelrecive = [shoerate objectAtIndex:selectpath];
}
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
}
@end

.h

@interface CollectionViewController :
UIViewController<UICollectionViewDelegate,UICollectionViewDataSource>
@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;
@property (strong,nonatomic) NSString *receiveimg;
@property (strong,nonatomic) NSString *receivecostume;
@property (strong,nonatomic)NSString *receivename;
@end

Answer 7

Para Swift 2.0

En lugar de implementar los métodos necesarios para dibujar CollectionViewCells :

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake(50, 50);
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets
{
return UIEdgeInsetsMake(5, 5, 5, 5); //top,left,bottom,right
}

Use UICollectionViewFlowLayout

func createCollectionView() {
let flowLayout = UICollectionViewFlowLayout()
// Now setup the flowLayout required for drawing the cells
let space = 5.0 as CGFloat
// Set view cell size
flowLayout.itemSize = CGSizeMake(50, 50)
// Set left and right margins
flowLayout.minimumInteritemSpacing = space
// Set top and bottom margins
flowLayout.minimumLineSpacing = space
// Finally create the CollectionView
let collectionView = UICollectionView(frame: CGRectMake(10, 10, 300, 400), collectionViewLayout: flowLayout)
// Then setup delegates, background color etc.
collectionView?.dataSource = self
collectionView?.delegate = self
collectionView?.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellID")
collectionView?.backgroundColor = UIColor.whiteColor()
self.view.addSubview(collectionView!)
}

A continuación, implemente los métodos UICollectionViewDataSource según sea necesario:

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 20;
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell:UICollectionViewCell=collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath) as UICollectionViewCell;
cell.backgroundColor = UIColor.greenColor();
return cell;
}
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}

Answer 8

Para el usuario de swift4: -

class TwoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: flowLayout)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "collectionCell")
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.cyan
self.view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
return 20
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
var cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.green
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSize(width: 50, height: 50)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets
{
return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}
}

Answer 9

 #pragma mark -
#pragma mark - UICollectionView Datasource and Delegates
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return Arr_AllCulturalButtler.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *coll=@"FromCulturalbutlerCollectionViewCell";
FromCulturalbutlerCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:coll forIndexPath:indexPath];
cell.lbl_categoryname.text=[[Arr_AllCulturalButtler objectAtIndex:indexPath.row] Category_name];
cell.lbl_date.text=[[Arr_AllCulturalButtler objectAtIndex:indexPath.row] event_Start_date];
cell.lbl_location.text=[[Arr_AllCulturalButtler objectAtIndex:indexPath.row] Location_name];
[cell.Img_Event setImageWithURL:[APPDELEGATE getURLForMediumSizeImage:[(EventObj *)[Arr_AllCulturalButtler objectAtIndex:indexPath.row] Event_image_name]] placeholderImage:nil usingActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
cell.button_Bookmark.selected=[[Arr_AllCulturalButtler objectAtIndex:indexPath.row] Event_is_bookmarked];
[cell.button_Bookmark addTarget:self action:@selector(btn_bookmarkClicked:) forControlEvents:UIControlEventTouchUpInside];
cell.button_Bookmark.tag=indexPath.row;
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
[self performSegueWithIdentifier:SEGUE_CULTURALBUTLER_KULTURELLIS_DETAIL sender:self];
}
// stroy board navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([segue.identifier isEqualToString:@"Overview_Register"])
{
WDRegisterViewController *obj=(WDRegisterViewController *)[segue destinationViewController];
obj.str_Title=@"Edit Profile";
obj.isRegister=NO;
}
}
[self performSegueWithIdentifier:@"Overview_Measure" sender:nil];
UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
WDPeekViewController *Peek = (WDPeekViewController *)[sb instantiateViewControllerWithIdentifier:@"WDPeekViewController"];
[self.navigationController pushViewController:tabBarController animated:YES];