iOS
UICollectionView

Utwórz programowo widok kolekcji

Szybki

func createCollectionView() {
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height), collectionViewLayout: layout)
    collectionView.dataSource = self
    collectionView.delegate = self
    view.addSubview(collectionView)
}

Cel C

- (void)createCollectionView {
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:layout];
    [collectionView setDataSource:self];
    [collectionView setDelegate:self];
    [self.view addSubview:collectionView];
}

Swift - UICollectionViewDelegateFlowLayout

// MARK: - UICollectionViewDelegateFlowLayout
extension ViewController: UICollectionViewDelegateFlowLayout {
    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)
    }
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 5.0
    }
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 5.0
    }
}

Utwórz UICollectionView

Zainicjuj UICollectionView za pomocą ramki CGRect :

Szybki:

let collection = UICollectionView(frame: CGRect(x: 0, y: 0, width: 200, height: 21))

Cel C:

UICollectionView *collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 200, 21)];

Możesz także utworzyć UICollectionView w Konstruktorze interfejsów

UICollectionView - Źródło danych

Każdy widok kolekcji musi mieć obiekt Datasource . Obiekt Datasource to treść, którą aplikacja wyświetli w UICollectionView . Co najmniej wszystkie obiekty Datasource muszą implementować metody collectionView:numberOfItemsInSection: i collectionView:cellForItemAtIndexPath: metody.

Wymagane metody

Szybki

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // Return how many items in section
    let sectionArray = _data[section]
    return sectionArray.count
}
    
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

   let cell = collectionView.dequeueReusableCellWithReuseIdentifier(MyCellID) 
   // If you use a custom cell class then cast the cell returned, like:
   // as! MyCollectionViewCellClass
   // or you will have errors when you try to use features of that class.

   //Customize your cell here, default UICollectionViewCells do not contain any inherent
   //text or image views (like UITableView), but some could be added, 
   //or a custom UICollectionViewCell sub-class could be used
   return cell
}

Cel C

- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section {
    // Return how many items in section
    NSArray *sectionArray = [_data objectAtIndex:section];
    return [sectionArray count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath {
   // Return a cell
   UICollectionViewCell *newCell = [self.collectionView 
                                       dequeueReusableCellWithReuseIdentifier:MyCellID                                                                             
                                                                 forIndexPath:indexPath];
   //Customize your cell here, default UICollectionViewCells do not contain any inherent
   //text or image views (like UITableView), but some could be added, 
   //or a custom UICollectionViewCell sub-class could be used
   return newCell;
}

Podstawowy szybki przykład widoku kolekcji

Utwórz nowy projekt

Może to być tylko aplikacja z pojedynczym widokiem.

Dodaj kod

Utwórz nowy plik Cocoa Touch Class (Plik> Nowy> Plik ...> iOS> Cocoa Touch Class). Nazwij to MyCollectionViewCell . Ta klasa będzie przechowywać wyloty widoków, które dodajesz do komórki w serii ujęć.

import UIKit
class MyCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var myLabel: UILabel!
}

Podłączymy to gniazdko później.

Otwórz ViewController.swift i upewnij się, że masz następującą treść:

import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
    var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
    
    
    // MARK: - UICollectionViewDataSource protocol
    
    // tell the collection view how many cells to make
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }
    
    // make a cell for each cell index path
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell
        
        // Use the outlet in our custom class to get a reference to the UILabel in the cell
        cell.myLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.yellowColor() // make cell more visible in our example project
        
        return cell
    }
    
    // MARK: - UICollectionViewDelegate protocol
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}

Notatki

• UICollectionViewDataSource i UICollectionViewDelegate to protokoły, których przestrzega widok kolekcji. Możesz także dodać protokół UICollectionViewDelegateFlowLayout , aby programowo zmienić rozmiar widoków, ale nie jest to konieczne.
• Po prostu umieszczamy proste ciągi w naszej siatce, ale z pewnością możesz zrobić zdjęcia później.

Skonfiguruj scenorys

Przeciągnij widok kolekcji do kontrolera widoku w swojej serii ujęć. Możesz dodać ograniczenia, aby wypełnić widok nadrzędny, jeśli chcesz.

Upewnij się, że domyślne są również ustawienia w Inspektorze atrybutów

• Pozycje: 1
• Układ: przepływ

Małe pole w lewym górnym rogu widoku kolekcji to komórka widoku kolekcji. Użyjemy go jako naszej prototypowej komórki. Przeciągnij etykietę do komórki i wyśrodkuj ją. Jeśli chcesz, możesz zmienić rozmiar granic komórki i dodać wiązania, aby wyśrodkować etykietę.

Wpisz „komórkę” (bez cudzysłowów) w polu Identyfikator Inspektora atrybutów dla komórki widoku kolekcji. Zauważ, że jest to ta sama wartość, co let reuseIdentifier = "cell" w ViewController.swift.

W Inspektorze tożsamości dla komórki ustaw nazwę klasy na MyCollectionViewCell , naszą niestandardową klasę, którą stworzyliśmy.

Podłączyć gniazda

• Hook etykiecie w komórce kolekcję do myLabel w MyCollectionViewCell klasie. (Możesz przeciągnąć z wciśniętym klawiszem Control ).
• Zaczep kolekcję View delegate i dataSource do kontrolera widoku. (Kliknij prawym przyciskiem myszy Widok kolekcji w konspekcie dokumentu. Następnie kliknij i przeciągnij strzałkę plus w górę do kontrolera widoku.)

Skończone

Oto jak to wygląda po dodaniu wiązań do wyśrodkowania etykiety w komórce i przypięciu widoku kolekcji do ścian elementu nadrzędnego.

Dokonywanie ulepszeń

Jeśli chcesz poprawić wygląd, zobacz oryginalny post, z którego pochodzi ten przykład .

Dalsze badanie

• Prosty samouczek UICollectionView
• UICollectionView Tutorial Część 1: Pierwsze kroki
• UICollectionView Tutorial Część 2: Widoki wielokrotnego użytku i wybór komórek

Przeprowadzanie aktualizacji wsadowych

Można animować złożone zmiany w widoku kolekcji za pomocą metody performBatchUpdates . Wewnątrz bloku aktualizacji można określić kilka modyfikacji, aby wszystkie były animowane jednocześnie.

collecitonView.performBatchUpdates({
    // Perform updates
}, nil)

Wewnątrz bloku aktualizacji można wstawiać, usuwać, przenosić i ponownie ładować. Oto, jak określić, którego indeksu Ścieżka należy użyć:

Powinieneś wywoływać przeładowanie tylko w komórkach, które się nie poruszyły, ale ich zawartość się zmieniła. Ważne jest, aby pamiętać, że ruch nie odświeży zawartości komórki, a jedynie przeniesie jej lokalizację.

Aby sprawdzić, czy aktualizacja wsadowa zostanie wykonana poprawnie, upewnij się, że zestaw ścieżek indexPath do deletion , move-from i reload jest unikalny, a zestaw ścieżek indexPath do insertion , move-to i reload jest unikalny.

Oto przykład poprawnej aktualizacji wsadowej:

let from = [1, 2, 3, 4, 5]
let to = [1, 3, 6, 4, 5]

collecitonView.performBatchUpdates({
    collectionView.insertItemsAtIndexPaths([NSIndexPath(forItem: 2, inSection: 0)])
    collectionView.deleteItemsAtIndexPaths([NSIndexPath(forItem: 1, inSection: 0)])
    collectionView.moveItemAtIndexPath(NSIndexPath(forItem: 2, inSection: 0), 
                                       toIndexPath: NSIndexPath(forItem: 1, inSection:0))
}, nil)

UICollectionViewDeleguj konfigurację i wybór elementu

Czasami, jeśli akcja powinna zostać powiązana z zaznaczeniem komórki widoku kolekcji, musisz zaimplementować protokół UICollectionViewDelegate .

Załóżmy, że widok kolekcji znajduje się w UIViewController MyViewController .

Cel C

W MyViewController.h oświadcza, że implementuje protokół UICollectionViewDelegate , jak poniżej

@interface MyViewController : UIViewController <UICollectionViewDelegate, .../* previous existing delegate, as UICollectionDataSource *>

Szybki

W swoim MyViewController.swift dodaj następujące elementy

class MyViewController : UICollectionViewDelegate {
}

Cel C

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
}

Szybki

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
{
}

Cel C

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
}

Szybki

class MyViewController : UICollectionViewDelegate {
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
    {
        var cell : UICollectionViewCell = collectionView.cellForItemAtIndexPath(indexPath)!
        cell.backgroundColor = UIColor.greenColor()
    }
}

Zarządzaj widokiem wielu kolekcji za pomocą DataSource i Flowlayout

Tutaj zarządzamy wieloma kolekcjami tam delegujemy metody ze zdarzeniami didselect.

extension ProductsVC: UICollectionViewDelegate, UICollectionViewDataSource{
        
        // MARK: - UICollectionViewDataSource
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            guard collectionView == collectionCategory else {
                return arrOfProducts.count
            }
            return arrOfCategory.count
        }
        
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            
            guard collectionView == collectionProduct else {
                  let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ProductCategoryCell", for: indexPath) as! ProductCategoryCell
                  cell.viewBackground.layer.borderWidth = 0.5
                  //Do some thing as per use
                  return cell
            }
            
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! ProductCell
            cell.contentView.layer.borderWidth = 0.5
            cell.contentView.layer.borderColor = UIColor.black.cgColor
            let json = arrOfProducts[indexPath.row]
            //Do something as per use
    
            return cell
        }
        
        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
            guard collectionView == collectionCategory else {
                let json = arrOfProducts[indexPath.row]
                // Do something for  collectionProduct here
                return
            }
            let json = arrOfCategory[indexPath.row] as [String: AnyObject]
            let id = json["cId"] as? String ?? ""
            // Do something
        }
    }
    
    extension ProductsVC: UICollectionViewDelegateFlowLayout{
        
        // MARK: - UICollectionViewDelegateFlowLayout
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            
            let collectionWidth = collectionView.bounds.width
            guard collectionView == collectionProduct else {
                var itemWidth = collectionWidth / 4 - 1;
                
                if(UI_USER_INTERFACE_IDIOM() == .pad) {
                    itemWidth = collectionWidth / 4 - 1;
                }
                return CGSize(width: itemWidth, height: 50)
            }
            
            var itemWidth = collectionWidth / 2 - 1;
            if(UI_USER_INTERFACE_IDIOM() == .pad) {
                itemWidth = collectionWidth / 4 - 1;
            }
            return CGSize(width: itemWidth, height: 250);
        }
        
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
            return 1
        }
        
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
            return 1
        }
        
    }