UITableView con immagini di intestazione di sezione laterale

Question

L'applicazione musica sul iPad ha un sacco di interessanti funzionalità dell'interfaccia utente personalizzata, una delle quali è la vista tabella visualizzata quando guardando il album di un particolare artista .

Ha immagini lungo il lato di ogni sezione, quasi agendo in modo molto simile alle viste sezione di intestazione. Se ho scorrere verso il basso, i soggiorni immagine superiore lì finché l'immagine successiva arriva ad urtare fuori, e viceversa.

Inizialmente sembra abbastanza impossibile senza reimplementando l'UITableView tutto nuovo, ma penso sia semi-fattibile semplicemente sottoclasse un UITableView disegnare queste immagini sezione sul lato esterno del UITableView, sempre che chiama layoutSubviews (cioè ogniqualvolta pergamene). Ci sono lievi problemi con questo: perché richiama al di fuori del UITableView, qualsiasi ridimensionamento automatico sarà probabilmente gettare l'intero layout off. E sono davvero solo incerti circa la fattibilità di tutto questo.

Qualche idea?

---

Edit: Ho appena realizzato che la mia prima idea sarebbe non il lavoro in che qualsiasi tocca le immagini laterali stessi non sarebbero monitorati dal Tableview, quindi non si poteva scorrere se toccata lì. Credo che il più grande problema qui è capire come propagare i tocchi in modo che tocchi sono monitorati attraverso l'intero panorama.

Answer 1

Dopo averci pensato a caso nel bel mezzo della notte, ho finalmente capito una soluzione reale.

Inserire l'UITableView in un UIScrollView, e quando l'utente scorre la vista, gli ultimi passano attraverso lo ScrollView genitore, e non il Tableview stesso. Praticamente tutto quello che dovete fare sta nel metodo di layoutSubviews; poiché layoutSubviews del ScrollView è chiamato quando l'utente scorre la vista, basta cambiare la cornice tableView rimanere fissato sullo schermo, e modificare contentOffset del Tableview in base a quella del ScrollView.

Esempio di codice:

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

A questo punto, è possibile regolare il Tableview da un lato, e fare quello che vuoi, dall'altro.

Answer 2

si potrebbe verificare quale sezione ci si trova nel Tableview (o più in alto, ecc) in qualche modo, quindi è sufficiente avere un UIView che viene aggiornato ogni volta che cambia di sezione, la mia idea è un po 'difficile da spiegare, ma non avrebbe a che fare con rifare UITableView a tutti, basta avere un'altra vista accanto alla vista tabella per fare le immagini invece di cercare di incorporare tale funzionalità.

Un altro modo per fare questo, è forse un po 'più complicato, ma si potrebbe tentare di rientrare le cellule in modo che non comincia all'estrema sinistra della vista tabella, fare la Tableview molto ampia e hanno una vista personalizzata nella intestazione di sezione che contiene l'immagine alla sua sinistra e, auspicabilmente, avrebbe fatto in modo corretto? buona domanda e una divertente con cui giocare.

Answer 3

Va bene che ho fatto qualcosa di simile a ciò che l'applicazione musica e ricerca Spotlight fa.

Non ho sottoclasse UITableView, ho appena rintracciato sezioni attraverso il suo metodo scrollViewDidScroll, e ha aggiunto i punti di vista di intestazione a sinistra del tableView (in modo da avere per mettere il Tableview a destra nel vostro punto di vista di viewController, il che significa non è possibile utilizzare UITableViewController).

questo metodo dovrebbe essere chiamato nel scrollViewDidScroll, viewDidLoad, e in didRotateFromInterfaceOrientation: (se supporto di rotazione)

tenere a mente che si dovrà fare spazio nel uguale sinistra alla dimensione delle intestazioni in qualsiasi orientamento interfaccia che sostenete.

-(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];
}
}

anche abbiamo bisogno di dichiarare una proprietà che avrebbe mantenuto il punto di vista che sono visibili:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

questi metodi restituiscono le dimensioni e X sfalsato delle viste intestazione:

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

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

Ho costruito il codice in modo che qualsiasi vista intestazione che non serve viene rimosso, quindi abbiamo bisogno di un metodo che restituirebbe la vista in caso di necessità:

-(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;
}

Ecco come apparirà:

come apparirà nel paesaggio, ho usato vincoli per dare 44px a sinistra del tableView

Spero che questo aiuti:.)