UITableView mit Seiten Bilder Abschnittsheader

Question

Die Musik-App auf dem iPad hat ziemlich viele interessante benutzerdefinierte UI-Features, von denen die Tabellenansicht wird angezeigt, wenn auf der Alben eines bestimmten Künstlers .

Es hat Bilder entlang der Seite jeden Abschnitts, wirkt fast in sehr ähnlichen Weise Abschnitt Kopfansicht. Wenn ich nach unten scrollen, das Top-Bild bleibt dort, bis das nächste Bild entlang kommt es killen, und umgekehrt.

Am Anfang scheint es ganz unmöglich, ohne die UITableView alle immer wieder neu implementieren, aber ich denke, es ist halb machbar, indem einfach ein UITableView Subklassen diese Schnittbilder auf der Seite zu ziehen, außerhalb des UITableView, wann immer es layoutSubviews Anspruch nimmt (dh, wenn es scrollt). Es gibt leichte Probleme: weil es außerhalb des UITableView zieht, jede der automatischen Größen wahrscheinlich das gesamte Layout abwerfen wird. Und ich bin wirklich nur unsicher über die Machbarkeit von allem.

Alle Gedanken?

---

Edit: Ich habe gerade festgestellt, dass meine erste Idee wäre nicht Arbeit, dass alle Berührungen auf die Bilder Seite sich nicht von der Tableview verfolgt werden würde, so dass Sie nicht bewegen konnte, wenn man es berührt. Ich denke, das größte Problem hier ist, herauszufinden, wie die Berührungen zu verbreiten, so dass Berührungen über die gesamte Ansicht verfolgt werden.

Answer 1

Nach dem Denken über sie zufällig in der Mitte der Nacht, habe ich endlich eine wirkliche Lösung herausgefunden.

einbetten UITableView in einem UIScrollView, und wenn der Benutzer die Ansicht scrollt, gehen die Berührungen durch durch die Eltern Scrollview, und nicht die Tableview selbst. So ziemlich alles, was Sie brauchen, liegt in der layoutSubviews Methode zu tun; da layoutSubviews des Scroll wird aufgerufen, wenn der Benutzer die Ansicht scrollt, nur den Rahmen des Tableview ändern bleiben Bildschirm fixiert und die Content des Tableview ändern, dass der Scroll entsprechen.

Beispielcode:

- (void) layoutSubviews{
    tableView.frame = CGRectMake(self.contentOffset.x, self.contentOffset.y, tableView.frame.size.width, tableView.frame.size.height);
    tableView.contentOffset = self.contentOffset;   
}

An dieser Stelle können Sie die Tableview auf eine Seite anpassen, und tun, was Sie auf der anderen Seite wollen.

Answer 2

könnten Sie überprüfen, welche Sektion Sie in der Tableview (oder die oberste etc.) irgendwie, dann haben einfach eine UIView, die aktualisiert wird, wenn der Abschnitt ändert, meine Idee ist ein bisschen schwer zu erklären, aber es wäre nicht haben mit redoing UITableView auf, alles zu tun, haben nur eine andere Ansicht neben der Tabellenansicht die Bilder anstatt zu versuchen, einzubetten, die Funktionalität zu tun.

Ein andere Möglichkeit, dies zu tun, ist vielleicht ein wenig komplizierter, aber man könnte versuchen, Ihre Zellen einrücken, so dass sie bei der ganz links in der Tabellenansicht fangen nicht, macht den Tableview sehr breit und hat eine benutzerdefinierte Ansicht im Sektionskopf das enthält das Bild auf der linken und hoffentlich würde es richtig machen? gute Frage und ein Spaß zu spielen.

Answer 3

Okay, ich habe etwas getan, ähnlich wie die Musik-App und Spotlight-Suche funktioniert.

Ich habe nicht UITableView subclassed, ich habe nur die Abschnitte durch sie die scrollViewDidScroll Methode verfolgt, und die Header-Ansichten auf der linken Seite des Tableview hinzugefügt (so werden Sie die Tableview nach rechts in Ihrem Viewcontroller Sicht setzen müssen, was bedeutet, Sie können nicht UITableViewController verwenden).

Dieses Verfahren sollte in der scrollViewDidScroll, ViewDidLoad und in didRotateFromInterfaceOrientation aufgerufen werden: (wenn Sie Rotation unterstützen)

beachten Sie, dass Sie in der linken gleich der Größe der Header in jeder Schnittstelle Orientierung machen Raum müssen, dass Sie unterstützen.

-(void)updateHeadersLocation
{
for (int sectionNumber = 0; sectionNumber != [self numberOfSectionsInTableView:self.tableView]; sectionNumber++)
{
    // get the rect of the section from the tableview, and convert it to it's superview's coordinates
    CGRect rect = [self.tableView convertRect:[self.tableView rectForSection:sectionNumber] toView:[self.tableView superview]];

    // get the intersection between the section's rect and the view's rect, this will help in knowing what portion of the section is showing
    CGRect intersection = CGRectIntersection(rect, self.tableView.frame);

    CGRect viewFrame = CGRectZero; // we will start off with zero

    viewFrame.size = [self headerSize]; // let's set the size

    viewFrame.origin.x = [self headerXOrigin];

    /*

     three cases:

     1. the section's origin is still showing -> header view will follow the origin
     2. the section's origin isn't showing but some part of the section still shows -> header view will stick to the top
     3. the part of the section that's showing is not sufficient for the view's height -> will move the header view up

     */

    if (rect.origin.y >= self.tableView.frame.origin.y)
    {
        // case 1
        viewFrame.origin.y = rect.origin.y;
    }
    else
    {
        if (intersection.size.height >= viewFrame.size.height)
        {
            // case 2
            viewFrame.origin.y = self.tableView.frame.origin.y;
        }
        else
        {
            // case 3
            viewFrame.origin.y = self.tableView.frame.origin.y + intersection.size.height - viewFrame.size.height;
        }
    }

    UIView* view = [self.headerViewsDictionary objectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];

    // check if the header view is needed
    if (intersection.size.height == 0)
    {
        // not needed, remove it
        if (view)
        {
            [view removeFromSuperview];
            [self.headerViewsDictionary removeObjectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];
            view = nil;
        }
    }
    else if(!view)
    {
        // needed, but not available, create it and add it as a subview

        view = [self headerViewForSection:sectionNumber];

        if (!self.headerViewsDictionary && view)
            self.headerViewsDictionary = [NSMutableDictionary dictionary];

        if (view)
        {
            [self.headerViewsDictionary setValue:view forKey:[NSString stringWithFormat:@"%i", sectionNumber]];

            [self.view addSubview:view];
        }
    }


    [view setFrame:viewFrame];
}
}

Auch brauchen wir eine Eigenschaft erklären, dass die Ansichten halten würde, die sichtbar sind:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

Diese Methoden geben die Größe und die X-Achse der Kopf Ansicht versetzt:

-(CGSize)headerSize
{
return CGSizeMake(44.0f, 44.0f);
}

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

Ich habe den Code eingebaut, so dass jeder Header Ansicht, die benötigt wird nicht entfernt wird, so brauchen wir eine Methode, die die Ansicht zurückkehren würde, wenn nötig:

-(UIView*)headerViewForSection:(NSInteger)index
{
UIImageView* view = [[UIImageView alloc] init];

if (index % 2)
{
    [view setImage:[UIImage imageNamed:@"call"]];
}
else
{
    [view setImage:[UIImage imageNamed:@"mail"]];
}

return view;
}

ist hier, wie es aussehen wird:

Wie es in lanscape aussehen wird, habe ich contraints verwendet in der linken Seite des Tableview zu geben 44px

hoffe, das hilft.)