Wie man die Navigation Bar wie Instagram

Ich implementieren müssen, um so etwas wie dieses:

tableView muss hüpfen, aber nicht die navigation-bar.

Habe ich versucht eine Reihe von verschiedenen Varianten.
So etwas wie dieses:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect imageViewFrame = self.imageView.frame;
    CGRect tableViewFrame = self.tableView.frame;
    //ImageView - is top view(instead of NavBar)
    //defaultHeight - is default height of tableView
    imageViewFrame.origin.y = MIN(0, MAX(-scrollView.contentOffset.y, -100));
    tableViewFrame.origin.y = imageViewFrame.origin.y + 100;
    tableViewFrame.size.height = defaultHeight - imageViewFrame.origin.y;

    self.imageView.frame = imageViewFrame;
    self.tableView.frame = tableViewFrame;
}

Holen Sie sich dieses:

Wie man die Navigation Bar wie Instagram

ist es nicht geeignet, da in Instagram-Größe der tableView nicht ändern(schauen Sie nur auf die scroll-Indikatoren, falls die Größe der tableView verändert, Sie verändert auch)

Wie man die Navigation Bar wie Instagram

Auch ich habe versucht, hinzufügen, die Ansicht als unteransicht in tableView, es funktioniert, aber nicht genau das, was ich brauche, ist.
In Instagram Navigationsleiste außerhalb der tableView, so ist es nicht geeignet auch.

In der facebook app search bar verhält, genau

Wie man die Navigation Bar wie Instagram

Kann mir jemand helfen?

Dank!

Ich bin wirklich nicht sicher, ob ich diese korrekt ist, sagen Sie, Sie wollen einen header Ansicht, dass die überlagerungen Ihrer Inhalte? Vielleicht steckte mehr Anmerkungen in Ihre Bilder, weil ich nicht sehen, keine Navigationsleisten, die vielleicht was verwirrend mich.
Ich bin wohl falsch ausgedrückt, ich brauche, um das Verhalten der Navigations-Leiste (oder andere Anzeigen) ist das selbe wie bei Instagram oder Facebook.
Redest du von der "name-tag" in Instagram?
Nein, ich spreche über die Navigationsleiste. Aber eigentlich ist mir egal, es wird die navigation bar oder sehen Sie einfach, die Hauptsache ist, dass es brav die gleiche Weise wie in instagram
Was über die Verwendung des gleichen Ansatzes in der Beispiel-code, sondern eher als die Erhöhung der tableview in der Höhe, können Sie nur schwenken Sie es nach oben. Haben die tableview beginnen mit die komplette Höhe (die ist versteckt durch die tabbar ausgedehnt werden, bis die nav-Ansicht ist aus dem Weg)
Dies sollte helfen! stackoverflow.com/a/13249526/1257657
ich habe versucht, aber es funktioniert falsch =(

InformationsquelleAutor wiruzx | 2013-03-12

1

Haben den gleichen Ansatz in der Beispiel-code, sondern eher als die Erhöhung der tableview in der Höhe, Sie haben es bereits mit der zusätzlichen (nicht-sichtbare Höhe) und bewegen Sie es nach oben durch eine Verringerung der frame, den y-Wert. Die zusätzliche Höhe wird off-screen. Wenn der Inhalt die Höhe ist nicht groß genug, um off-screen, dann brauchen Sie nicht zu haben, die off-screen-Höhe.

Fügen Sie einen header mit height = 0 zu beginnen, und als Sie nach unten scrollen erhöht es die Größe, bis zu 100 (der leeren Kopfzeile wird außerhalb des Bildschirms, die jetzt). So wird der Inhalt nicht abgeschnitten werden, wie Sie Blättern.
- können Sie erklären, wie dieser funktioniert nicht richtig?
- wenn Sie sich anschauen, 2 und 3 screenshot, müssen Sie bemerkt, dass der Tabellenansicht Zellen versteckt auf der oberen Ansicht. Die Geschwindigkeit der Umstellung der Ansicht von oben und Zellen ist defferent weil ich änderte y-cordinate der tableview
- Ich sehe, das problem ist, dass tableview Schriftrollen. Was denken Sie über das hinzufügen einer Kopfzeile, siehe editierte Antwort.
- header für tableView? Ich habe es versucht, es kam heraus, dass headerView war in tableView
- ja-header für eine Tabelle anzeigen. Ich glaube nicht, dass Sie verstanden mein Vorschlag. Also, Folgen Sie den gleichen Ansatz in der Beispiel-code in deine Frage, aber ohne änderung der Tabellenansicht Größe. Nun, da wird es scrollen Sie in der tableview angezeigt zu bekommen, abgeschnitten (wie Sie schon in Abbildung 2 & 3), also zu vermeiden, dass Sie auch hinzufügen einer Tabellenüberschrift, und ändern Sie die Größe der Kopfzeile zu kompensieren, die die "navigation bar", das off-screen. So die scroll-position sollte angezeigt werden, scrollen aber der text sollte nicht abgeschnitten werden, weil Sie scrollen die Kopfzeile erste Weg.
- danke, ich verstehe, aber das problem ist, dass, wenn die Obere Ansicht ist ein header, dann die scroll-Anzeige wird eingeschaltet sein, und ich brauche, dass er haben würde, blieb vor ihm
- bei scroll-offset = 0, header height = 0, also-Indikator wird am Anfang der Zelle[0]. bei offset = 10, header height = 10, also Anzeige sollte der unter Punkt 10 ("offset" gibt) und am Anfang der Zelle[0] immer noch. Bin ich falsch?
- Ich danke Ihnen sehr! Ich wusste es einfach nicht über scrollIndicatorInsets. Jetzt funktioniert es wie ich wollte. =)
InformationsquelleAutor 7usam
1

Den instagram "navigation bar" ist das nicht eine Navigationsleiste. Es ist ein Tisch Abschnitts-header. Sie werden bemerken, dass, wenn Sie Tippen Sie auf ein Foto, die gesamte navigation bar rutscht Weg. Das ist, weil es Teil des table view controller und nicht um eine "echte" navigation bar.

Können Sie erreichen dies, indem Sie einen UINavigationController aber ausblenden der Navigationsleiste (setNavigationBarHidden:JA). Rufen Sie einfach pushViewController:animated: manuell, wenn Sie möchten, zu drücken.

Interessanterweise sieht es aus wie die anderen tabs von instagram benutzen Sie einfach eine normale Navigationsleiste und tun nichts besonderes. Ich denke, dass Sie wirklich wollte, dass diese 44 Punkte zurück auf die Haupt-feed Bildschirm.
- aber wenn in diesem Abschnitt header, dann warum es nicht bounce mit dem rest der Tabelle? und warum die scroll-Anzeige Stoppt direkt vor ihm? (Abbildung # 5)
- Wäre nicht eine Tabelle Kopfzeile statt einer Tabelle Abschnitt header?
- jedenfalls in Instagram navbar außerhalb der tableView
- Gut, du hast Recht, es muss nicht hüpfen. Also ich denke, es ist nicht Teil der Tabelle anzeigen. In diesem Fall werden Sie haben, um es zu implementieren als separate Sicht verwenden Sie Ihre eigenen scrollview statt tableview und nachverfolgen der scrollview das delegieren von Nachrichten zu kennen, wenn das scrollen der header.
InformationsquelleAutor jsd

Wenn Sie auf iOS 5+, als Sie können leicht anpassen, die navigation bar wie dieser:

1 - Fügen Sie Ihre TableViewController innerhalb eines UINavigationController

2 - Anpassen Der Navigationsleiste:

Set Background Image Navigation Bar

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"bar_background"] 
                                   forBarMetrics:UIBarMetricsDefault];

Hinzufügen Schaltfläche Aktualisieren auf der Rechten Seite

UIImage *img = [UIImage imageNamed:@"refresh.png"];
UIButton *rButton = [UIButton buttonWithType:UIButtonTypeCustom];
[rButton setImage:img forState:UIControlStateNormal];
[rButton addTarget:vc action:@selector(didTapRefreshButton:) forControlEvents:UIControlEventTouchUpInside];
rButton.frame = CGRectMake(0.0f, 0.0f, img.size.width, img.size.height);
UIBarButtonItem *rButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rButton];

self.navigationItem.rightBarButtonItem = rButtonItem;
[rButtonItem release];

Hoffe, das Hilft!

InformationsquelleAutor Asif Mujteba

Können Sie die unten genannten Methode in Ihrer Klasse, in die Sie hinzufügen möchten-Effekt auf der navigation bar, wie es in Instagram.

        - (void)scrollViewDidScroll:(UIScrollView *)sender {
//Initializing the views and the new frame sizes.
UINavigationBar *navbar =self.navigationController.navigationBar;
UIView *tableView = self.view;
CGRect navBarFrame = self.navigationController.navigationBar.frame;

CGRect tableFrame = self.view.frame;

//changing the origin.y based on the current scroll view.
//Adding +20 for the Status Bar since the offset is tied into that.

if (isiOS7) {
     navBarFrame.origin.y = MIN(0, MAX(-44, (sender.contentOffset.y * -1)))  +20 ;
     tableFrame.origin.y = navBarFrame.origin.y + navBarFrame.size.height;
}else{
    navBarFrame.origin.y = MIN(0, (sender.contentOffset.y * -1)) +20;
    tableFrame.origin.y = MIN(0,MAX(-44,(sender.contentOffset.y * -1))) ;
}

navbar.frame = navBarFrame;
tableView.frame = tableFrame;

}

InformationsquelleAutor Aanchal Chaurasia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.