UITableView in iOS

UITableView ist ein Ansichtstyp, der zum Anzeigen der Daten in Form einer Tabelle verwendet wird. Das UI-Steuerelement besteht aus einer Spalte und die Anzahl der Zeilen kann vom Benutzer angegeben werden. Es erbt von den Klassen UIView, UIResponder und NSObject. Das UITableView-Steuerelement ist in der Objektbibliothek in Xcode vorhanden. Es besteht aus einer Zelle vom Typ UITableViewCell, die die Zeilen bildet. Die Zelle besteht aus einer Inhaltsansicht und einer Zubehöransicht, die uns dabei helfen, Daten anzuzeigen und bestimmte Aktionen auszuführen. Derzeit gibt es zwei verschiedene Arten der Tabellenansicht: die einfache und die gruppierte Tabellenansicht.

In diesem Tutorial erfahren Sie, wie Sie UITableView in einer SingleView-Anwendung verwendenFüllen Sie die Daten in die Tabellenansicht ein, indem Sie die Anzahl der Zeilen und Abschnitte angeben, und führen Sie eine Aktion aus, wenn eine Zeile ausgewählt ist. Der Tabellenansichtsstil ist „Einfach“.

Die folgenden Konzepte werden in diesem Dokument behandelt.

  • Daten in Sammlungen speichern (hier verwenden wir NSMutableDictionary)
  • UITableViewDatasource-Protokollmethoden zum Auffüllen von Daten.
  • UITableViewDelegate-Protokollmethoden zum Ausführen einer Aktion, wenn eine Zelle ausgewählt wird.
  • Nehmen wir als Beispiel eine Einkaufsliste, die wir in einem Geschäft kaufen müssen. Listen Sie die Artikel in der Tabellenansicht auf, und sobald wir das Produkt gekauft haben, markieren wir das Produkt in der Tabellenansicht mit einem Häkchen. Das Häkchen ist ein Zubehörteil, das in UITableView verwendet werden kann.

    Single View-Anwendung in XCode

    • Erstellen Sie eine Einzelansichtsanwendung in Xcode und benennen Sie das Projekt als „UITableViewDemo“.
    • In Main.storyboard ist eine Ansicht im Viewcontroller vorhanden. Ziehen Sie eine UITableView per Drag & Drop aus der Objektbibliothek.

    addTableView

    Deklarieren Sie die Eigenschaften

    • Verbinden Sie die in der Schnittstelle vorhandene Tabellenansicht mit der Eigenschaft.
    • Deklarieren Sie die verbleibenden Eigenschaften als erforderlich.
    @interface ViewController : UIViewController
    @property (weak, nonatomic) IBOutlet UITableView *itemsTableView;
    @property (strong,nonatomic) NSMutableDictionary *itemDetailsList;
    @property  (strong,nonatomic) NSArray *allKeys;
    @end
    

    Speichern Sie Daten in NSMutableDictionary

    • Wir benötigen einige Daten, die in der Tabellenansicht angezeigt werden sollen. In diesem Beispiel speichern wir Daten in NSMutableDictionary. NSMutableDictionary ist ein Wörterbuch mit einem Schlüssel-Wert-Paar, das es ermöglicht, die im Wörterbuch vorhandenen Daten zu ändern. Es erbt von NSDictionary mit Änderungsoperationen. Im folgenden Code speichern wir den Artikelnamen als Schlüssel und „YES“ oder „NO“ als booleschen Wert, um zu identifizieren, ob der Artikel gekauft wurde oder nicht.
    • Wir weisen NSArray auch alle Schlüssel des Wörterbuchs zu, da wir in der Tabellenansicht nur Schlüssel anzeigen müssen.
    self.itemDetailsList = ((NSMutableDictionary alloc)init);
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Whole-wheat bread");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Brown rice");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Tomato sauce");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Red-wine vinegar");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Mustard");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Apples");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Cakes");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"eggs");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"Sunscreen");
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:@"broccoli");
    
    self.allKeys = ((NSArray alloc)initWithArray:(self.itemDetailsList allKeys));
    

    UITableViewDataSource-Protokoll

    UitableViewDataSource ist ein Protokoll, das zum Erstellen und Ändern der Tabellenansicht verwendet wird. Das Protokoll besteht aus vielen Methoden, die drei wichtigen Methoden sind:

  • numberOfSectionsInTableView: Die Methode wird verwendet, um die Anzahl der Abschnitte in der Tabellenansicht anzugeben. In unserem Beispiel haben wir nur einen Abschnitt. Basierend auf der Anzahl der Abschnitte wird die Tabellenansicht vertikal unterteilt. Die Methode ist Optional.
  • tableView:numberOfRowsInSection: Die Methode wird verwendet, um die Anzahl der Zeilen in jedem Abschnitt anzugeben. es ist ein erforderlich Methode im Protokoll.
  • tableView:cellForRowAtIndexPath: Die Methode wird verwendet, um die Zellen mit Daten zu füllen. Die Methode heißt Reichweitezeile und wir sind dafür verantwortlich, für jede Zelle die entsprechenden Daten bereitzustellen. es ist ein erforderlich Methode.
  • Wenn die Tabellenansicht neu geladen oder aktualisiert wird, ist die Datenquelle dafür verantwortlich, die Tabellenansicht mit den Daten zu füllen. Zuerst wird die Nummer des Abschnitts aufgerufen, um die Abschnitte zu erhalten, und dann die Nr. der Zeilen in einem Abschnitt und für jede Zeile wird cellForRowAtIndexPath aufgerufen.

    Um das Protokoll verwenden zu können, müssen wir uns an das Protokoll halten UITableViewDataSource in der .h-Datei und setzen Sie die Datenquelle der Tabellenansicht auf die aktuelle Instanz der Klasse (Selbst). Der Code ist unten angegeben.

    In ViewController.h

    @interface ViewController : UIViewController<UITableViewDataSource>
    

    In ViewController.m (der Code sollte unter der viewDidLoad-Methode vorhanden sein)

    self.itemsTableView.dataSource = self;
    

    Implementierung von UITableViewDataSource-Protokollmethoden

    • Da wir nur einen Abschnitt in der Tabellenansicht haben, wird der ganzzahlige Wert 1 zurückgegeben.
    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
    }
    
    • Die Anzahl der Zeilen entspricht den im Wörterbuch vorhandenen Elementen. Die Anzahl des Wörterbuchs wird als Anzahl der Zeilen zurückgegeben.
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return (self.itemDetailsList count);
    }
    
    • Laden Sie die Zellen mit Daten.
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = nil;
    cell = (tableView dequeueReusableCellWithIdentifier:CellIdentifier);
    
    if(cell == nil){
    cell = ((UITableViewCell alloc)initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier);
    }
    
    // Configure the cell...
    cell.textLabel.text =(self.allKeys objectAtIndex:indexPath.row);
    return cell;
    }
    
    • Erstellen Sie eine Instanz von UITableViewCell und setzen Sie sie auf Null. Bei der oben beschriebenen Methode zum Laden der Zellen versuchen wir, die bereits erstellten Zellen wiederzuverwenden, sodass der Speicher nicht erneut für die Zelle zugewiesen wird.
    • Wenn in unserem Beispiel die Tabellenansicht zum ersten Mal angezeigt wird, wird eine neue Tabellenansichtszelle für die zunächst im Simulator sichtbaren Zellen erstellt, außerdem wird Speicher für alle Zellen zugewiesen und der Inhalt der Zelle festgelegt. Wenn die Tabellenansicht gescrollt wird , werden dieselben Zellen wiederverwendet, indem einfach der Inhalt der Zelle geändert und somit der Speicher gespart wird. Auf diese Weise können wir den Speicher effektiv verwalten.
    • Erstellen Sie einen Bezeichner der Zelle vom Typ NSString, der verwendet wird, um einen Typ einer Zelle zu identifizieren, die Sie erstellen möchten. TableView prüft für die Zelle, ob die Zelle bereits erstellt wurde, indem Sie cellIdentifier als Parameter angeben und die Methode „dequeueReusablecellWithIdentifier“. Die Methode gibt die Zelle zurück, wenn sie bereits zuvor erstellt wurde, andernfalls gibt sie Null zurück.
    • Wenn es Null ist, weisen Sie einer Zelle Speicher zu, indem Sie den Zellenstil und den Bezeichner angeben.
    • Nachdem wir nun die Zelle haben, können wir die Eigenschaften der Zelle festlegen. Hier legen wir den Text für die Beschriftung fest, die in der Zelle vorhanden ist.
    • Normalerweise enthält die Zelle eine Inhaltsansicht und eine Zubehöransicht. Sie können nämlich auch andere Eigenschaften für die Zelle festlegen Textetikett für den Titel, detailTextLabel für den Untertitel und eine Bildansicht für die Miniaturansicht in der Inhaltsansicht.

    Führen Sie die Anwendung aus. Wir können die Tabellenansicht mit der Liste der Elemente sehen.

    Tabellenansichtbevölkert

    Implementierung von UITableViewDelegate-Protokollmethoden

    • Unsere nächste Anforderung besteht darin, die Artikel zu aktivieren und zu deaktivieren, indem wir die Zelle auswählen, die uns mitteilt, ob der Artikel gekauft wird oder nicht. Wenn der Artikel gekauft wird, wird der Wert des Artikels im Wörterbuch auf gesetzt JA andernfalls wird der Wert auf gesetzt NEIN. Um dies zu erreichen, müssen wir die in der Zelle vorhandene Zusatzansicht nutzen. Wir müssen das Zubehör für die Zelle festlegen, wenn der Benutzer in der Tabellenansicht auf die Zelle tippt oder diese auswählt.
    • Um eine Aktion auszuführen, wenn wir mit der Tabellenansicht interagieren, verwenden wir UITableViewDelegate Protokoll. Passen Sie das Protokoll in der .h-Datei an, wie unten gezeigt, und legen Sie den Delegaten auf die aktuelle Instanz (selbst) der ViewController-Klasse fest.

    In ViewController.h

    @interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>

    In ViewController.m (der Code sollte unter der viewDidLoad-Methode vorhanden sein)

    self.itemsTableView.delegate = self;
    
    • Im UITablveiwDeleagte-Protokoll sind mehrere Methoden vorhanden, die Methode „didSelectRowAtIndexpath„wird aufgerufen, wenn der Benutzer auf die Zelle tippt. Wir werden die Methode implementieren, um die von uns benötigte Funktionalität zu erreichen.
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = (tableView cellForRowAtIndexPath:indexPath);
    
    if(cell.accessoryType == UITableViewCellAccessoryCheckmark){
    (cell setAccessoryType:UITableViewCellAccessoryNone);
    (self.itemDetailsList setObject:(NSNumber numberWithBool:NO) forKey:(self.allKeys objectAtIndex:indexPath.row));
    }
    else{
    (cell setAccessoryType:UITableViewCellAccessoryCheckmark);
    (self.itemDetailsList setObject:(NSNumber numberWithBool:YES) forKey:(self.allKeys objectAtIndex:indexPath.row));
    }
    }
    
    • Ermitteln Sie im obigen Code beim Auswählen der Zelle, ob die Zelle ein Häkchen hat. Wenn sie ein Häkchen enthält, setzen Sie ihren Zubehörtyp auf „Keine“ und aktualisieren Sie das Wörterbuch, indem Sie den Elementwert auf „NEIN“ setzen, was uns mitteilt, dass das Element nicht vorhanden ist gekauft. Wenn die Zelle kein Häkchen hat, setzen Sie die Zubehöransicht auf „Zubehörhäkchen“ und aktualisieren Sie das Wörterbuch entsprechend.
    • Eine letzte Änderung sollte vorgenommen werden in „didSelectRowAtIndexPath” damit unsere Anwendung ordnungsgemäß funktioniert. Da wir die Zelle wiederverwenden, sollten wir beim Laden auch den Zubehörtyp der Zelle zusammen mit dem textLabel aktualisieren. Der vollständige Code für „didSelectRowAtIndexPath“ ist unten angegeben.
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = nil;
    cell = (tableView dequeueReusableCellWithIdentifier:CellIdentifier);
    
    if(cell == nil){
    cell = ((UITableViewCell alloc)initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier);
    }
    
    // Configure the cell.
    
    cell.textLabel.text =(self.allKeys objectAtIndex:indexPath.row);
    
    //Set the accessory type for the cell
    
    BOOL selectedVal = ((self.itemDetailsList objectForKey:(self.allKeys objectAtIndex:indexPath.row))boolValue);
    if(selectedVal == YES) {
    cell.accessoryType = UITableViewCellAccessoryCheckmark;
    }
    else{
    cell.accessoryType = UITableViewCellAccessoryNone;
    }
    
    return cell;
    }
    

    UITableView in der iOS-Demo

    finalApp

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen