en
de

iOS – Mit Effekten und Animationen zum Erfolg

16 August 2013
| |
Lesezeit: 4 Minutes

Zur Zeit gibt es im AppStore rund 700000 verfügbare Applikationen. Für beinahe jedes Problem gibt es entsprechend viele verschiedene Lösungsansätze und App-Entwicklungen. Um mit einer App aus dem gesättigten Markt herauszustechen, reicht es nicht aus, eine funktional umfangreiche App zu entwickeln. Oft wird eine App mit hervorragendem Design einer anderen vorgezogen, selbst dann, wenn die Funktionalitäten womöglich weniger ausgeprägt vorhanden sind.
Aus diesem Grund werde ich in meinen Beiträgen einige einfache, aber interessante Effekte und Animationen aufzeigen, die auch eine trockene Business App mit dem nötigen Aussehen und einer möglichst hohen Benutzerfreundlichkeit versehen.

Im ersten Teil widmen wir uns einer sogenannten „Paging ScrollView“ mit einem Vorschau-Effekt. Ähnliche Effekte finden sich auch in bekannten Apps:

  • Spotify (iPad) / Grossansicht bei laufender Musik
  • Safari / Auswahl der bereits geöffneten Webseiten
  • Facebook / Bilder im Newsfeed

Dabei wird die ScrollView so implementiert, dass die vorherige und nachfolgende Seite immer mit einer Vorschau angezeigt wird. Dies bedarf nur einiger kleiner Tricks und unterscheidet sich von der normalen Implementierung einer „Paging ScrollView“ in überschaubarem Masse. Trotzdem entsteht ein sehenswerter Effekt bei minimalem Aufwand. Für diesen Effekt sollte die Kenntnis über den Aufbau einer normalen ScrollView bereits vorhanden sein. Ansonsten gibt es genügend Informationen in der Apple Dokumentation.

Erstellen der ContentView und ScrollView

Der Grundaufbau besteht aus einer ContentView und der darauf liegenden ScrollView. Dabei wird die ScrollView etwas grösser erstellt, als die jeweiligen Subviews, die wir danach als Seiten(Pages) implementieren möchten. Dies wird nachher noch genauer erläutert, ist grundsätzlich jedoch dafür nötig, dass wir unseren Vorschau-Effekt bekommen.

ContentView und ScrollView

ContentView und ScrollView

Da unsere ScrollView jedoch nicht über den gesamten Display führt, ist das Scrollen auch nicht auf der vollen Breite des Displays möglich. Dies führt zu seltsamen Effekten, die der Benutzer nicht erwartet. Unsere ContentView hilft hier aus. Wir erstellen eine ContentView Klasse, die von UIView ableitet und alle Touchevents des Benutzers, die nicht bereits auf der Scrollview abgefangen werden, entgegen nimmt.

#pragma mark Events
- (UIView *) hitTest:(CGPoint) point withEvent:(UIEvent *)event
{
    return ([self pointInside:point withEvent:event]) ? scrollView : nil;
}

Dafür benötigt die ContentView eine Referenz auf die Scrollview. Der Hittest ist dafür zuständig bei einem Touchevent die Subview zurückzugeben, auf welcher der Event statt gefunden hat. Wir wollen dies überschreiben, so dass unsere ScrollView zurückgegeben wird. Dies ermöglicht uns das Scrollen über den Display, ohne dass wir dafür die ScrollView mit der Breite des Displays erstellen müssen.

Einstellung für die ScrollView

Wir müssen folgende Einstellung auf der ScrollView setzen:

self.scrollView.clipsToBounds = NO;

Damit ist es möglich, dass Subviews auch ausserhalb der ScrollView Grenzen hinzugefügt werden können. Wenn clipToBounds auf YES gesetzt ist, dann werden die Views automatisch innerhalb der ScrollView Grenzen platziert und dadurch würde unser gewünschter Vorschau-Effekt verloren gehen.

Hinzufügen der Subviews

Nun müssen wir das Hinzufügen der Subviews auf unserer SrollView vornehmen. In meinem Beispiel verwende ich UIImageViews, welche initial mit dem Zühlke Logo erstellt werden. Folgender Code erstellt in meinem Beispiel die drei ImageViews mit dem Zühlke Logo.

    for (int i = 0; i < PAGES; i++) {
        // create frame at the right position
        CGRect frame = CGRectMake(currentOffset, 0.0f, self.scrollView.frame.size.width, self.scrollView.frame.size.height);

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
        imageView.tag = i;
        imageView.contentMode = UIViewContentModeCenter;
        imageView.image = [UIImage imageNamed:@"zuehlke_logo.jpg"];

        if(i != 0) imageView.alpha = 0.5f;

        [self.scrollView addSubview:imageView];
        [pages addObject:imageView];

        // adapt offset
        currentOffset += imageView.frame.size.width;

        // set contentsize of the scrollview
        self.scrollView.contentSize = CGSizeMake(currentOffset, self.scrollView.frame.size.height);
    }

In einer Schlaufe werden die Subviews hinzugefügt. Wichtig ist dabei eine Variable mit dem Contentoffset zu halten. Diese hilft uns die Position der nächsten Seite fest zu halten. Da eine Paging ScrollView nicht einzelne Seiten als Objekte festhält, sondern lediglich durch die mathematische Berechnung die Seiten(Pages) definiert, brauchen wir diesen Indikator. Die ScrollView errechnet am Schluss aus der Contentsize und der eigenen Breite die Anzahl der Seiten(Pages) und entscheidet dann, ab wann zur nächsten Seite gescrollt wird. Dieser Schritt unterscheidet sich grundsätzlich nicht von einer normalen ScrollView. Folgende Code-Zeile ist jedoch wichtig:

imageView.contentMode = UIViewContentModeCenter;

So wird die Subview im Zentrum der ScrollView platziert. Da unsere ScrollView etwas grösser ist wie unsere Subview ergibt sich dadurch der Vorschau-Effekt. Manchmal ist hier etwas „try-and-error“ erforderlich, bis der Effekt und die Grösse der ScrollView und der Subviews so gesetzt sind, dass der Effekt in der gewünschten Grösse auftritt. Nun sollten wir den Vorschau-Effekt bereits erhalten. Zusätzlich wollen wir nun jedoch noch kleine Animationen einbauen. Dafür haben wir bereits die Markierung(Tag) auf jeder View gesetzt, welche uns danach hilft, die einzelnen Seiten(Pages) einfacher zu identifizieren.

Animationen für die einzelnen Seiten

Um den Effekt noch zu verstärken werden wir einen sogenannten „FadeIn“ und „FadeOut“ Effekt auf den einzelnen Views einbauen. Dies führt dazu, dass beim Wechsel auf eine nächste Seite die vorherige und die nachfolgende Seite im Vorschau-Effekt transparent dargestellt werden. Sobald der Wechsel vollzogen wird, ändert sich dies und die anderen Seiten werden transparent.

Dafür fangen wir zuerst den Delegate der ScrollView ab:

#pragma mark ScrollView Delegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // calculate current page
    int page = scrollView.contentOffset.x / scrollView.frame.size.width;

    [self animateForCurrentPage:page];
}

Diese Methode wird aufgerufen, sobald das Scrollen auf einer ScrollView zum Stillstand gekommen ist. Wir berechnen dann anhand des ContentOffset und der Breite der ScrollView die aktuelle Seite(Page). Danach rufen wir unsere Animation auf.

- (void)animateForCurrentPage:(int)page
{
    for(UIImageView *imageView in pages){
        if(imageView.tag == page){
            [self fadeInView:imageView];
        } else {
            [self fadeOutView:imageView];
        }
    }
}

Wir durchlaufen unser Array, welches alle hinzugefügten Subviews enthält. Anhand der gesetzten Markierung(Tag) prüfen wir, welche Seite(Page) transparent gemacht werden muss – oder wieder zurückgesetzt wird auf die volle Sichtbarkeit.

Die eigentliche Animation findet dann folgend statt:

- (void)fadeInView:(UIView*)view
{
    [UIView animateWithDuration:0.2f animations:^{
        view.alpha = 1.0f;
    }];
}

Apple stellt uns hier bereits einfache Animation zur Verfügung. Wir müssen lediglich die Ausführungszeit angeben und in einem Block(durch ^{ erkennbar) definieren, was in dieser Zeit animiert werden soll. Über den alpha-Wert einer View wird die Transparenz gesteuert. Bei einem „FadeIn“ wird diese auf 1.0 gesetzt, bei einem „FadeOut“ auf 0.5.

Abschluss

Durch den Vorschau-Effekt und die kurzen Animationen auf den Seiten entsteht ein einfacher, aber lohnenswerter Effekt. Ich habe zusätzlich den gesamten Sourcecode zu einem funktionierenden iPhone-Beispiel auf Github verfügbar gemacht. Natürlich bin ich auch für Fragen offen – kontaktiert mich bei Probleme oder Schwierigkeiten.

Ich werde in den folgenden Wochen noch weitere Effekte und Animation vorstellen und diese auf unserem Zühlke Blog veröffentlichen.

Referenzen

  1. Apple Dokumentation: UIScrollView
  2. Github: SourceCode

Kommentare (2)

Avatar

Jonas

25 August 2013 um 12:35

Danke für das Beispiel. Der Source Code auf Github ist auch sehr hilfreich.
Ich bin gespannt auf weitere Effekte & Animationen.

Andreas Ettisberger

Andreas Ettisberger

29 August 2013 um 11:53

Hallo Jonas, danke für das Feedback. Ich werde sicher zu diesem Thema schon bald wieder einen Artikel veröffentlichen 🙂

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.

Erhalten Sie regelmäßige Updates zu neuen Blogartikeln

Jetzt anmelden

Oder möchten Sie eine Projektanfrage mit uns besprechen? Kontakt aufnehmen »