UITableView avec section latérale images d'en-tête

Question

L'application de la musique sur l'iPad a beaucoup de caractéristiques intéressantes de l'interface utilisateur personnalisée, dont une est la vue de la table affichée quand on regarde le albums d'un artiste en particulier .

Il a des images sur le côté de chaque section, agissant presque d'une manière très similaire aux vues d'en-tête de section. Si je fais défiler vers le bas, l'image du haut reste jusqu'à ce que l'image suivante vient de tomber hors tension, et vice versa.

Dans un premier temps, il semble tout à fait impossible sans réimplémentant le UITableView tout recommencer, mais je pense qu'il est semi-faisables par le sous-classement simple UITableView pour dessiner ces sections images sur le côté, en dehors du uitableview, chaque fois qu'il appelle layoutSubviews (c.-à chaque fois qu'il rouleaux). Il y a de légers problèmes avec ceci: parce qu'il tire en dehors de la UITableView, tout Autoresizing sera probablement jeter toute la mise en page au large. Et je suis vraiment juste pas sûr de la faisabilité de tout cela.

Toutes les pensées?

---

Edit: Je viens de réaliser que ma première idée ne fonctionnerait pas dans ce que les touches sur les images elles-mêmes côté ne serait pas suivi par le tableview, vous pourriez donc pas faire défiler si vous avez touché là-bas. Je pense que le plus gros problème ici est de savoir comment propager les touches afin que touches sont suivies à travers toute la vue.

Answer 1

Après avoir réfléchi au hasard au milieu de la nuit, j'ai finalement trouvé une vraie solution.

Intégrer la UITableView dans un UIScrollView, et lorsque l'utilisateur fait défiler la vue, les touches passent par par la scrollview mère, et non le tableview lui-même. À peu près tout que vous devez faire réside dans la méthode layoutSubviews; depuis layoutSubviews du scrollview est appelé à chaque fois que l'utilisateur fait défiler la vue, il suffit de changer le cadre du tableview pour rester à l'écran fixe, et changer contentOffset du tableview pour correspondre à celle de la scrollview.

Exemple de code:

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

À ce stade, vous pouvez régler le tableview d'un côté, et faire tout ce que vous voulez sur l'autre.

Answer 2

vous pouvez vérifier ce que l'article vous êtes dans la TableView (ou le plus élevé, etc.) en quelque sorte, alors tout simplement un UIView qui est mis à jour chaque fois que la section des changements, mon idée est un peu difficile à expliquer, mais il ne serait pas à voir avec refaisant UITableView du tout, ont juste une autre vue à côté de la vue de la table pour faire les images au lieu d'essayer d'intégrer cette fonctionnalité.

Une autre façon de le faire, est peut-être un peu plus compliqué, mais vous pouvez essayer de mettre en retrait vos cellules afin qu'ils ne commencent à l'extrême gauche de la vue de la table, faire le tableview très large et une vue personnalisée dans l'en-tête de section qui contient cette image sur sa gauche et nous l'espérons le faire correctement? bonne question et un plaisir à jouer avec.

Answer 3

D'accord, je l'ai fait quelque chose de semblable à ce que l'application de la musique et recherche Spotlight ne.

Je ne l'ai pas sous-classé UITableView, je viens suivi les sections à travers elle est la méthode scrollViewDidScroll, et a ajouté les vues d'en-tête à gauche du tableView (vous devrez mettre le tableview à droite dans votre vue de viewController, ce qui signifie vous ne pouvez pas utiliser UITableViewController).

cette méthode doit être appelée dans le scrollViewDidScroll, viewDidLoad, et didRotateFromInterfaceOrientation: (si vous soutenez la rotation)

garder à l'esprit que vous devrez faire de la place à gauche égale à la taille des en-têtes dans une orientation d'interface que vous soutenez.

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

En outre, nous devons déclarer une propriété qui garderait les vues qui sont visibles:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

ces méthodes renvoient la taille et de l'axe X décalage des vues d'en-tête:

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

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

J'ai construit le code de sorte que toute vue d'en-tête qui n'est pas nécessaire se retire, nous avons donc besoin d'une méthode qui retournerait la vue en cas de besoin:

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

voici à quoi il ressemblera:

Comment ça va chercher dans lanscape, je l'ai utilisé pour donner 44px contraintes à gauche du tableView

Espérons que cela aide.)