iOS SDK: Erstellen eines benutzerdefinierten Accordion-Menüs

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie ein benutzerdefiniertes Accordion-Menü erstellen. In diesem animierten Menü können Sie Eingaben des Benutzers auf ansprechende und optimierte Weise sammeln. Lesen Sie weiter, um mehr zu erfahren!

Tutorial Vorschau

Über das Accordion-Menü

Die Anfangsposition des Accordion-Menüs befindet sich in der Mitte der Zielansicht, auf der es angezeigt wird. Wenn das Menü angezeigt wird, bewegt sich die Hälfte davon zum oberen Rand der Zielansicht, während sich die andere Hälfte zum unteren Rand der Ansicht bewegt und sich auf die volle zulässige Höhe ausdehnt. Während des Gebrauchs werden sowohl der Y-Ursprungspunkt als auch die Höhe so geändert, dass der gewünschte Effekt erzielt werden kann. Das Menü selbst besteht aus einer Tabellenansicht. Dies bietet uns große Flexibilität hinsichtlich der Anzahl der Optionen, die dem Menü hinzugefügt werden. Die Tabellenansicht wird als Unteransicht in einer Ansicht vorhanden sein und in einer Zielansicht angezeigt. Die Hauptansicht des Ansichts-Controllers des Accordion-Menüs dient als Abdeckung für die auf der Rückseite vorhandenen Unteransichten, sodass der Benutzer nur auf unsere Menüoptionen tippen kann.

Lassen Sie uns fortfahren und diese Idee zum Leben erwecken. Hier ist ein Bild davon, wie das Endprodukt aussehen wird.

1. Erstellen des Accordion-Menü-View-Controllers

Schritt 1

Als erstes müssen wir einen neuen Ansichts-Controller für unser Accordion-Menü erstellen. Zuvor erstellen wir eine neue Gruppe im Xcode, um alles ordentlich und ordentlich zu halten.

Klicken Sie im Bereich Projektnavigator auf der linken Seite des Xcodes bei gedrückter Ctrl-Taste (Rechtsklick) auf die CustomViewsDemo-Gruppe. Wählen Sie im Popup-Menü die Option Neue Gruppe.

Stellen Sie das Accordion-Menü als Namen ein.

Schritt 2

Lassen Sie uns nun den View-Controller erstellen. Strg + Klick (Rechtsklick) auf die Gruppe Accordion-Menü. Wählen Sie die Option Neue Datei... aus dem Popup-Menü.

Wählen Sie die Objective-C-Klasse als Vorlage für die neue Datei aus und klicken Sie auf Weiter.

Verwenden Sie den Namen AccordionMenuViewController im Klassenfeld und stellen Sie sicher, dass im Feld Unterklasse von der Wert UIViewController ausgewählt ist. Vergessen Sie nicht, die Option "Mit XIB für Benutzeroberfläche" aktiviert zu lassen.

Klicken Sie abschließend auf die Schaltfläche Erstellen. Stellen Sie sicher, dass das Accordion-Menü die ausgewählte Gruppe ist, wie im nächsten Bild gezeigt.

2. Konfigurieren Sie die Schnittstelle

Das erste, was wir mit unserem neuen View-Controller tun müssen, ist die Einrichtung der Schnittstelle im Schnittstelle-Ersteller, was ziemlich einfach sein sollte. Die meiste Arbeit wird im Code erledigt.

Schritt 1

Klicken Sie auf die Datei AccordionMenuViewController.xib, um den Schnittstelle-Ersteller zu aktivieren. Klicken Sie auf die Standardansicht und deaktivieren Sie die Autolayout-Funktion, damit sie unter iOS-Versionen vor 6 funktioniert.

Klicken Sie in der Xcode-Symbolleiste auf die Schaltfläche Dienstprogramme, um den Bereich Dienstprogramme anzuzeigen, wenn er nicht sichtbar ist.
Klicken Sie auf Dateiinspektor.
Scrollen Sie ein wenig nach unten und klicken Sie auf die Option "Autolayout verwenden", um es zu deaktivieren.

Wechseln Sie als Nächstes zum Attributinspektor. Setzen Sie im Abschnitt "Simulierte Metriken" den Wert "Größe" auf "Keine", damit er auch auf einem 3,5-Zoll-Bildschirm funktioniert.

Schritt 2

Fügen Sie eine neue Ansicht hinzu, stellen Sie jedoch sicher, dass Sie sie nicht als Unteransicht zur Standardansicht hinzufügen. Machen Sie Folgendes:

Wechseln Sie zum Abschnitt "Simulierte Metriken" des Attributinspektors und setzen Sie die Größe auf "Keine".
Ändern Sie die Hintergrundfarbe in dunkelgrau.

Schritt 3

Holen Sie sich eine Tabellenansicht aus der Objektbibliothek und fügen Sie sie als Unteransicht zu der Ansicht hinzu, die wir im vorherigen Schritt hinzugefügt haben. Schließen Sie die nächste Konfiguration im Abschnitt Attributinspektor ab.

Setzen Sie Horizontale Bildlaufleisten anzeigen auf aus.
Setzen Sie Vertikale Bildlaufleisten anzeigen auf aus.
Setzen Sie Blättern Aktiviert auf aus.
Ändern Sie die Hintergrundfarbe in klar.

So sollte Ihre Benutzeroberfläche an dieser Stelle aussehen.

3. Legen Sie die IBOutlet-Eigenschaften fest

Schritt 1

Als Nächstes erstellen wir zwei IBOutlet-Eigenschaften für die zusätzliche Ansicht und die Tabellenansicht, die wir zuvor zum Projekt hinzugefügt haben. Zuerst sollten wir den Assistenten-Editor anzeigen lassen. Klicken Sie auf die mittlere Schaltfläche im Editor-Bereich der Xcode-Symbolleiste, um sie anzuzeigen.

Schritt 2

Um die Ansicht mit einer neuen IBOutlet-Eigenschaft zu verbinden, gehen Sie zu Dokumentgliederung anzeigen > Strg + Klick (Rechtsklick) > Neue Referenzierungsstelle. Ziehen Sie sie in den Assistenten-Editor und legen Sie sie dort ab.

Ich habe die Eigenschaft viewAccordionMenu benannt und empfehle, dass Sie denselben Namen verwenden, um Probleme beim Codieren zu vermeiden. Setzen Sie die Speicher-Option auf Stark anstelle des Standardwerts Schwach.

Schritt 3

Fügen wir nun eine IBOutlet-Eigenschaft für die Tabellenansicht hinzu. Erstellen Sie wie oben beschrieben eine neue Eigenschaft mit dem Namen tblAccordionMenu. Setzen Sie die Speicher-Option ebenfalls auf Stark.

Hier sind die beiden IBOutlet-Eigenschaften.

1	@property (strong, nonatomic) IBOutlet UIView *viewAccordionMenu;
2	@property (strong, nonatomic) IBOutlet UITableView *tblAccordionMenu;

4. Führen Sie eine Code-Level-Einrichtung durch

So weit, ist es gut! Wir haben den Ansichts-Controller für das Accordion-Menü erstellt, die Benutzeroberfläche eingerichtet und die beiden erforderlichen IBOutlet-Eigenschaften für die Ansichten erstellt, die wir dem Builder hinzugefügt haben. Jetzt ist es Zeit, Code zu schreiben.

Schritt 1

Zunächst sollten wir unseren View Controller als Delegaten und Datenquelle der Tabellenansicht festlegen, die wir im Schnittstelle Ersteller erstellt haben. Unser View Controller sollte die entsprechenden Protokolle übernehmen. Klicken Sie auf die Datei AccordionMenuViewController.h und fügen Sie direkt neben dem @interface-Header Folgendes hinzu.

1	@interface AccordionMenuViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

Schritt 2

Klicken Sie auf die Datei AccordionMenuViewController.m und implementieren Sie eine einfache init-Methode. Legen Sie den Ansichtscontroller als Delegaten und Datenquelle der Tabellenansicht fest.

-(id)init{
    self = [super init];
    if (self) {
        [_tblAccordionMenu setDelegate:self];
        [_tblAccordionMenu setDataSource:self];
    }
    
    return self;
}

Fügen wir einen Rahmen hinzu, damit das Menü besser aussieht. Fügen Sie in der init den markierten Code hinzu.

...
if (self) {
        [_tblAccordionMenu setDelegate:self];
        [_tblAccordionMenu setDataSource:self];
        
        // Add some border around the tableview.
        [[_tblAccordionMenu layer] setBorderColor:[UIColor whiteColor].CGColor];
        [[_tblAccordionMenu layer] setBorderWidth:2.0];
    }
...

Stellen Sie sicher, dass Sie dies oben in der Datei hinzufügen.

1	#import <QuartzCore/QuartzCore.h>

Stellen Sie die Hintergrundfarbe der Standardansicht auf Hellgrau mit Transparenz ein.

...
if (self) {
        ...
        [self.view setBackgroundColor:[UIColor colorWithRed:0.33 green:0.33 blue:0.33 alpha:0.75]];
    }
...

Schritt 3

Es ist eine gute Idee, die Zeilenhöhe der Tabellenansicht als Konstante zu definieren. Abgesehen von der tableView: heightForRowAtIndexPath-Methode werden wir sie in anderen Methoden verwenden. Fügen Sie direkt nach den Befehlen #import Folgendes hinzu.

1	#define ROW_HEIGHT 40.0 // The height of each option of the accordion menu.

Das Accordion-Menü verwendet Animationen, um ein- und auszublenden. Wir können die Dauer der Animation als Konstante einstellen.

1	#define ANIMATION_DURATION 0.25 // The duration of the animation.

Wenn wir von nun an die Zeilenhöhe oder die Animationsdauer ändern möchten, werden wir dies einmal tun, ohne die Werte in jeder Methode zu ändern.

Schritt 4

Wir sollten zwei private Variablen und ein NSArray deklarieren. Die Variablen berücksichtigen die Breite und Höhe des Accordion-Menüs, d.h. die Breite und Höhe der übergeordneten Ansicht unserer Tabellenansicht. Das NSArray ist das Array, das die Menüoptionen beibehält, und es ist die Datenquelle der Tabellenansicht.

Fügen Sie oben in der Datei AccordionMenuViewController.m die nächsten Zeilen im Abschnitt @interface hinzu.

@interface AccordionMenuViewController (){
    CGFloat menuViewWidth;
    CGFloat menuViewHeight;
}

@property (nonatomic, strong) NSArray *optionsArray;

@end

Vergessen Sie nicht die geschweiften Klammern!

5. Implementieren Sie die öffentlichen Methoden

Es gibt mindestens drei öffentliche Methoden, die implementiert werden sollten, damit das Accordion-Menü ordnungsgemäß funktioniert. Die erste Methode wird verwendet, um die Optionen des Menüs festzulegen, die zweite Methode lässt das Accordion-Menü erscheinen und die dritte Methode lässt es verschwinden.

Schritt 1

Zunächst sollten wir die oben genannten Methoden in der .h-Datei deklarieren. Klicken Sie also auf die Datei AccordionMenuViewController.h und fügen Sie Folgendes hinzu.

1	-(void)setMenuOptions:(NSArray *)options;
2	-(void)showAccordionMenuInView:(UIView *)targetView;
3	-(void)closeAccordionMenuAnimated:(BOOL)animated;

Schritt 2

Lassen Sie uns die erste Methode implementieren. Klicken Sie auf die Datei AccordionMenuViewController.m und schreiben oder kopieren/fügen Sie den folgenden Code ein.

-(void)setMenuOptions:(NSArray *)options{
    NSMutableArray *tempArray = [NSMutableArray arrayWithArray:options];
    [tempArray addObject:@"Close"];
    
    _optionsArray = [[NSArray alloc] initWithArray:(NSArray *)tempArray copyItems:YES];
}

Auch wenn dies eine sehr einfache Methode ist, lassen Sie mich dies ein wenig erklären. Ich finde es für den Benutzer und den Programmierer einfacher, ein Array nur mit Menüoptionen bereitzustellen. Sie müssen sich keine Gedanken über die sogenannte Option zum Schließen des Menüs machen. Das ist wirklich nur nützlich, wenn jemand das Accodion-Menü in mehr als einem Fall verwenden wird. Ich verwende das veränderbare Array tempArray, um sowohl die Benutzeroptionen als auch die Schließoption zusammenzustellen. Wenn Sie wissen, dass das _optionsArray nicht veränderbar ist, werden Sie verstehen, dass es nach der Erstellung keine neuen Objekte akzeptieren kann. Ich initialisiere das Array _optionsArray. Sie können diese Logik vermeiden oder den Titel der Option zum Schließen des Menüs ändern.

Schritt 3

Fahren wir mit der nächsten Methode fort. Es betrifft die Art und Weise, wie das Accordion-Menü auf dem Bildschirm angezeigt wird. Darin finden viele verschiedene Schritte statt, daher werde ich es in Teilen präsentieren und diskutieren.

Zunächst müssen wir die Statusleiste berücksichtigen, wenn das Accordion-Menü angezeigt wird. Dies liegt daran, dass wir die Zielansicht, in der das Menü angezeigt wird, und den Rahmen als Basis für die Konfiguration unserer Ansichten verwenden. Daher ist es sehr wichtig, die Statusleiste korrekt zu behandeln. Wenn die Statusleiste ausgeblendet ist, gibt es überhaupt kein Problem. Wenn es jedoch sichtbar ist, wird ein leerer Bereich erstellt, der der Höhe der Statusleiste entspricht, wenn unsere Ansicht angezeigt wird. Als ersten Schritt müssen wir also überprüfen, ob die Statusleiste sichtbar ist, und ihre Höhe speichern, um den dadurch erzeugten Versatz zu korrigieren.

-(void)showAccordionMenuInView:(UIView *)targetView{
    // STEP 1: THE STATUS BAR OFFSET
    CGFloat statusBarOffset;
    
    if (![[UIApplication sharedApplication] isStatusBarHidden]) {
        CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
        if (statusBarSize.width < statusBarSize.height) {
            statusBarOffset = statusBarSize.width;
        }
        else{
            statusBarOffset = statusBarSize.height;
        }
    }
    else{
        statusBarOffset = 0.0;
    }
...

Dies ist der Ansatz, den wir im vorherigen Lernprogramm in der benutzerdefinierten Texteingabeansicht verfolgt haben.

Als nächstes sollten wir angeben, wie breit und hoch die Zielansicht in Abhängigkeit von der Ausrichtung ist. Abhängig von der Ausrichtung sollten wir "sagen", ob der Versatz, der von unserer Standardansicht verschoben werden soll, auf der X- oder der Y-Achse liegt.

-(void)showAccordionMenuInView:(UIView *)targetView{
    ...
    CGFloat width, height, offsetX, offsetY;
        
    if ([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft ||
        [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight) {
        // If the orientation is landscape then the width
        // gets the targetView's height value and the height gets
        // the targetView's width value.
        width = targetView.frame.size.height;
        height = targetView.frame.size.width;
        
        offsetX = -statusBarOffset;
        offsetY = 0.0;        
    }
    else{
        // Otherwise the width is width and the height is height.
        width = targetView.frame.size.width;
        height = targetView.frame.size.height;
        
        offsetX = 0.0;
        offsetY = -statusBarOffset;
    }
   ...

Der nächste Schritt ist einfach. Wir richten einfach die Standardansicht self.view ein, indem wir den Rahmen und den entsprechenden Versatz sowie den Alpha-Wert festlegen und sie schließlich als Unteransicht zur Zielansicht hinzufügen.

-(void)showAccordionMenuInView:(UIView *)targetView{
    ...
    // STEP 3 : SETUP THE SELF.VIEW
    
    [self.view setFrame:CGRectMake(targetView.frame.origin.x, targetView.frame.origin.y, width, height)];
    [self.view setFrame:CGRectOffset(self.view.frame, offsetX, offsetY)];
    [self.view setAlpha:0.0];
    [targetView addSubview:self.view];
    ...

Jetzt ist es Zeit, die Ansicht zu konfigurieren, die die Tabellenansicht enthält. Wir müssen hier seine Größe angeben, wobei zu berücksichtigen ist, dass er einen Teil des Bildschirms einnimmt. Ich habe seine Breite auf 260.0 px eingestellt, aber Sie können es nach Ihren Wünschen ändern. Die Höhe wird anhand der Gesamtoptionen und der Höhe jeder Zeile berechnet. Das bedeutet, dass die Höhe gleich der Gesamtzahl der Zeilen multipliziert mit der Höhe jeder Zeile ist. Bei zu vielen Optionen und einer Menühöhe, die in beiden Ausrichtungen größer als die Zielansichtshöhe ist, sollten wir das Menü manuell verkleinern und das Scrollen in der Tabellenansicht aktivieren. Um dies zu erreichen, verwenden wir eine temporäre Variable, die jeweils die Höhe beibehält.

Um den Accordion-Effekt zu erzielen, müssen wir den Rahmen zweimal einstellen. Zuerst geben wir ihm seinen normalen Rahmen und zentrieren ihn entsprechend dem Mittelpunkt der Zielansicht. Dann speichern wir den Y-Ursprungspunkt und setzen den Rahmen erneut. Dazu setzen wir den Y-Ursprungspunkt auf den Y-Ursprungspunkt seiner Mitte und seine Höhe auf 0,0. Wenn der Y-Ursprungspunkt und die Höhe auf ihre ursprünglichen Werte zurückgesetzt werden, haben wir einen großartigen Accordion-Effekt.

-(void)showAccordionMenuInView:(UIView *)targetView{
    ...
    // STEP 4: SETUP THE MENU VIEW
    
    menuViewWidth = 260.0;
    // The height is the height of each row multiplied by the number
    // of options.
    menuViewHeight = ROW_HEIGHT * [_optionsArray count];
    
    // Declare and use a local, temporary variable for the height of the menu view.
    CGFloat tempMenuHeight;
    if (menuViewHeight > height) {
        // If the menuViewHeight as set above is greater than the height of the target view
        // then set the menu view's height to targetview's height - 50.0.
        // Also enable scrolling on tableview.
        tempMenuHeight = height - 50.0;
        [_tblAccordionMenu setScrollEnabled:YES];
    }
    else{
        // Otherwise if the menu view height is not greater than the targetView's height
        // then the tempMenuHeight simply equals to the menuViewHeight.
        // The scrolling doesn't have to be enabled.
        tempMenuHeight = menuViewHeight;
        [_tblAccordionMenu setScrollEnabled:NO];
    }
    
    // Set the initial frame of the menu view. Note that we're not
    // interested in the x and y origin points because they'll be automatically
    // set right after, so set it to 0.0.
    [_viewAccordionMenu setFrame:CGRectMake(0.0, 0.0, menuViewWidth, tempMenuHeight)];
    
    // Set its center to the self.view's center.
    [_viewAccordionMenu setCenter:self.view.center];
    
    // Store temporarily the current y origin point of the menu view.
    CGFloat yPoint = _viewAccordionMenu.frame.origin.y;
    // Now set the center.y point as the y origin point of the menu view and its height to 0.0.
    [_viewAccordionMenu setFrame:CGRectMake(_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)];
    // Add the menu view to the targetView view.
    [targetView addSubview:_viewAccordionMenu];
    ...

Es ist Zeit, das Menü zu animieren. Hier gibt es wirklich nichts Besonderes zu besprechen. Wir ändern einfach den Alpha-Wert der self.view und setzen den endgültigen Frame auf die Menüansicht.

-(void)showAccordionMenuInView:(UIView *)targetView{
    ...
    // STEP 5: ANIMATE
    [UIView beginAnimations:@"" context:nil];
    [UIView setAnimationDuration:ANIMATION_DURATION];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    
    [self.view setAlpha:0.5];
    
    // Set the yPoint value as the y origin point of the menu view
    // and the tempMenuHeight value as its height.
    [_viewAccordionMenu setFrame:CGRectMake(_viewAccordionMenu.frame.origin.x,
                                            yPoint,
                                            _viewAccordionMenu.frame.size.width,
                                            tempMenuHeight)];
    
    [UIView commitAnimations];
    ...

Laden Sie abschließend die Tabellendaten neu, damit die Menüoptionen in der Tabellenansicht angezeigt werden. Beachten Sie, dass die Methode hier endet.

-(void)showAccordionMenuInView:(UIView *)targetView{
    ...
    // STEP 6: RELOAD THE TABLEVIEW DATA
    [_tblAccordionMenu reloadData];
    ...
}

Schritt 4

Schreiben wir die nächste Methode zum Schließen des Menüs. Hier muss ich wirklich nichts erwähnen. Ich werde nur betonen, dass es einen booleschen Parameter verwendet, der angibt, ob das Schließen animiert werden soll oder nicht.

-(void)closeAccordionMenuAnimated:(BOOL)animated{
    if (animated) {
        [UIView beginAnimations:@"" context:nil];
        [UIView setAnimationDuration:ANIMATION_DURATION];
        [UIView setAnimationCurve:UIViewAnimationCurveLinear];
        
        [self.view setAlpha:0.0];
        
        [_viewAccordionMenu setFrame:CGRectMake(_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)];
        
        [UIView commitAnimations];
        
        [_viewAccordionMenu performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:ANIMATION_DURATION + 0.5];
        [self.view performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:ANIMATION_DURATION + 0.5];
    }
    else{
        [_viewAccordionMenu removeFromSuperview];
        [self.view removeFromSuperview];
    }
}

6. Berücksichtigen Sie Orientierungsänderungen

Es ist uns gelungen, unser Menü beim Aufruf korrekt anzuzeigen. Was passiert jedoch, wenn der Benutzer das Gerät dreht? Nichts! Das liegt daran, dass wir nichts darüber geschrieben haben, also lass es uns jetzt tun. Wir implementieren die viewWillLayoutSubviews-Methode, die jedes Mal aufgerufen wird, wenn die Ausrichtung geändert wird. Weitere Informationen finden Sie auf der Entwickler-Website von Apple.

Hier ist die Kurzversion von dem, was wir tun werden. Zuerst legen wir den Rahmen der Menüansicht fest, basierend auf den zuvor festgelegten Variablen menuViewWidth und menuViewHeight. Wir zentrieren es entsprechend dem Mittelpunkt von self.view. Als Nächstes berechnen wir abhängig von der Geräteorientierung die Höhe der Übersicht. Schließlich prüfen wir, ob die Höhe der Ansicht größer als die Höhe der Übersicht ist. Wenn dies zutrifft, werden wir es manuell verkleinern und das Scrollen aktivieren, genau wie bei der Methode -(void)showAccordionMenuInView:(UIView *)targetView. Andernfalls schalten wir das Scrollen einfach aus.

-(void)viewWillLayoutSubviews{
    // Get the current orientation.
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    
    // Set the menu view frame and center it.
    [_viewAccordionMenu setFrame:CGRectMake(_viewAccordionMenu.frame.origin.x,
                                            _viewAccordionMenu.frame.origin.y,
                                            menuViewWidth,
                                            menuViewHeight)];
    
    [_viewAccordionMenu setCenter:self.view.center];
    
    
    // Get the superview's height. In landscape mode the height is the width.
    CGFloat height;
    if (orientation == UIInterfaceOrientationLandscapeLeft ||
        orientation == UIInterfaceOrientationLandscapeRight) {
        height = self.view.superview.frame.size.width;
    }
    else{
        height = self.view.superview.frame.size.height;
    }
    
    
    // Check if the menu view's height is greater than the superview's height.
    if (_viewAccordionMenu.frame.size.height > height) {
        // If that's true then set the menu view's frame again by setting its height
        // to superview's height minus 50.0.
        [_viewAccordionMenu setFrame:CGRectMake(_viewAccordionMenu.frame.origin.x,
                                                _viewAccordionMenu.frame.origin.y,
                                                menuViewWidth,
                                                height - 50.0)];
        // Center again.
        [_viewAccordionMenu setCenter:self.view.center];
        
        // Also allow scrolling.
        [_tblAccordionMenu setScrollEnabled:YES];
    }
    else{    
        // In that case the menu view's height is not greater than the superview's height
        // so set scrolling to NO.
        [_tblAccordionMenu setScrollEnabled:NO];
    }
}

7. Implementieren Sie die Tableview-Methoden

Schritt 1

Hier sind die minimal erforderlichen Methoden aufgeführt, damit die Tabellenansicht funktioniert. Beachten Sie, dass in der Methode -(UITableViewCell*)tableView:cellForRowAtIndexPath: überprüft wird, ob die aktuelle Zeile die letzte ist oder nicht.

-(int)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

-(int)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [_optionsArray count];
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    if ([indexPath row] < [_optionsArray count] - 1) {
        [[cell contentView] setBackgroundColor:[UIColor colorWithRed:204.0/255.0 green:204.0/255.0 blue:204.0/255.0 alpha:1.0]];
        [[cell textLabel] setTextColor:[UIColor blackColor]];
        [[cell textLabel] setShadowColor:[UIColor whiteColor]];
        [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)];
    }
    else{
        [[cell contentView] setBackgroundColor:[UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:104.0/255.0 alpha:1.0]];
        [[cell textLabel] setTextColor:[UIColor whiteColor]];
        [[cell textLabel] setShadowColor:[UIColor blackColor]];
        [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)];
    }
    
    
    [[cell textLabel] setFont:[UIFont fontWithName:@"Georgia" size:17.0]];
    
    [cell setSelectionStyle:UITableViewCellSelectionStyleGray];
    
    
    CGRect rect = CGRectMake(0.0, 0.0, self.view.bounds.size.width, [self tableView:tableView heightForRowAtIndexPath:indexPath]);
    [[cell textLabel] setFrame:rect];
    [[cell textLabel] setTextAlignment:NSTextAlignmentCenter];
    [[cell textLabel] setText:[_optionsArray objectAtIndex:[indexPath row]]];
    
    
    return cell;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return ROW_HEIGHT;
}

Schritt 2

Wir müssen auch das Tippen auf die Zeilen der Tabellenansicht behandeln. Beachten Sie in der folgenden Methode, dass wir die Auswahl aus der getippten Zeile entfernen.

1	-(void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath{
2	[[tableView cellForRowAtIndexPath:indexPath] setSelected:NO];
3	}

Wir werden ziemlich bald auf diese Methode zurückkommen.

8. Protokolldefinition

Wenn der Benutzer auf eine Zeile oder mit anderen Worten auf eine Menüoption tippt, soll der Anruferansichts-Controller über die ausgewählte Auswahl benachrichtigt werden.

Schritt 1

Klicken Sie auf die Datei AccordionMenuViewController.h und schreiben Sie den folgenden Code direkt vor dem @interface-Header.

1	@protocol AccordionMenuViewControllerDelegate
2	-(void)userSelectedOptionWithIndex:(NSUInteger)index;
3	@end

Schritt 2

Deklarieren Sie jetzt eine Delegate-Eigenschaft.

@interface AccordionMenuViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) id<AccordionMenuViewControllerDelegate> delegate;

@property (strong, nonatomic) IBOutlet UIView *viewAccordionMenu;
@property (strong, nonatomic) IBOutlet UITableView *tblAccordionMenu;

-(void)setMenuOptions:(NSArray *)options;
-(void)showAccordionMenuInView:(UIView *)targetView;
-(void)closeAccordionMenuAnimated:(BOOL)animated;

@end

Schritt 3

Wann sollte die Delegatenmethode userSelectedOptionWithIndex verwendet werden? Jedes Mal, wenn eine Menüoption ausgewählt wird. Gehen Sie zurück in die Methode -(void)tableView:didSelectRowAtIndexPath: und fügen Sie die folgenden Zeilen hinzu.

1	-(void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath{
2	[[tableView cellForRowAtIndexPath:indexPath] setSelected:NO];
3	[self.delegate userSelectedOptionWithIndex:[indexPath row]];
4	}

9. Das Accordion-Menü in Aktion

Das Accordion-Menü ist jetzt fertig. Es ist Zeit, es in Aktion zu sehen. Treffen Sie die erforderlichen Vorbereitungen in der ViewController-Klasse.

Schritt 1

Zunächst sollte die ViewController-Klasse das AccordionMenuViewControllerDelegate-Protokoll übernehmen. Öffnen Sie die Datei ViewController.h, importieren Sie die Klasse AccordionMenuViewController.h und fügen Sie das Protokoll in den Header @interface ein.

#import <UIKit/UIKit.h>
#import "CustomTextInputViewController.h"
#import "AccordionMenuViewController.h"

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, CustomTextInputViewControllerDelegate, AccordionMenuViewControllerDelegate>

Schritt 2

Öffnen Sie die Datei ViewController.m und wechseln Sie zum privaten Teil der @-interface oben in der Datei. Fügen Sie dort ein NSArray hinzu, das für die Optionen verwendet wird, mit denen das Accordion-Menü bereitgestellt wird, sowie ein AccordionMenuViewController-Objekt.

@interface ViewController (){
...
@property (nonatomic, strong) NSArray *menuOptionsArray;
@property (nonatomic, strong) AccordionMenuViewController *accordionMenu;

@end

Schritt 3

Innerhalb der viewDidLoad-Methode müssen wir sowohl das Array als auch das Objekt initialisieren, die wir im vorherigen Schritt deklariert haben.

- (void)viewDidLoad
{
    [super viewDidLoad];
    ...
    // Set the options that will appear in the accordion menu.
    _menuOptionsArray = [[NSArray alloc] initWithObjects:@"Edit",
                         @"Delete",
                         @"Option 1",
                         @"Option 2",
                         @"Option 3",
                         @"Option 4",
                         @"Option 5",
                         nil];
    
    // Init the accordion menu view controller.
    _accordionMenu = [[AccordionMenuViewController alloc] init];
    // Set self as its delegate.
    [_accordionMenu setDelegate:self];
    // Set the menu options.
    [_accordionMenu setMenuOptions:_menuOptionsArray];
}

Wir werden nur zwei Optionen aus der obigen Liste verwenden. Der Rest dient vorerst nur zu Demonstrationszwecken.

Schritt 4

Wechseln Sie zur Methode -(void)tableView: didSelectRowAtIndexPath: und fügen Sie Folgendes hinzu.

1	// Make the accordion menu appear.
2	[_accordionMenu showAccordionMenuInView:self.view];

Wenn Sie das Projekt aus dem vorherigen Lernprogramm fortsetzen, löschen oder kommentieren Sie vorhandene Inhalte.

Schritt 5

Schließlich müssen wir nur die Indexdelegatenmethode -(void)userSelectedOptionWithIndex:(NSUInteger) implementieren. Hier werden alle Aktionen ausgeführt, wenn der Benutzer auf die Menüoptionen tippt.

-(void)userSelectedOptionWithIndex:(NSUInteger)index{
    if (index != [_menuOptionsArray count]) {
        NSIndexPath *indexPath = [_table indexPathForSelectedRow];
        
        switch (index) {
            case 0:
                [_textInput showCustomTextInputViewInView:self.view
                                                 withText:[_sampleDataArray objectAtIndex:[indexPath row]]
                                             andWithTitle:@"Edit item"];
                
                // Set the isEditingItem flag value to YES, indicating that
                // we are editing an item.
                isEditingItem = YES;
                break;
                
            case 1:
                [_sampleDataArray removeObjectAtIndex:[indexPath row]];
                [_table reloadSections:[NSIndexSet indexSetWithIndex:0] withRowAnimation:UITableViewRowAnimationAutomatic];
                break;
                
            default:
                break;
        }
    }
    
    [_accordionMenu closeAccordionMenuAnimated:YES];
}

Wir sind fertig! Führen Sie die App auf dem Simulator oder einem Gerät aus und überprüfen Sie das Menü. Spielen Sie damit herum und zögern Sie nicht, es zu verbessern oder an Ihre Bedürfnisse anzupassen.

Schlussfolgerung

Es ist für einen Programmierer immer eine große Herausforderung, Benutzern Menüoptionen zur Verfügung zu stellen, die sich von den üblichen vordefinierten unterscheiden. Wie Sie jetzt wissen, können wir ohne schwierige oder extreme Techniken ein gutes Ergebnis erzielen. Das in diesem Tutorial vorgestellte Accordion-Menü ist eine sehr gute Möglichkeit, dem Benutzer Optionen anzuzeigen, und vor allem ist es wiederverwendbar. Ich hoffe, es wird ein nützliches Werkzeug für alle, die es benutzen!