UITableView con sección lateral imágenes de cabecera

Question

La aplicación de música en el iPad tiene un buen montón de características de interfaz de usuario personalizada interesantes, una de las cuales es la vista de tabla muestra cuando se mira en el álbumes de un artista en particular .

Tiene imágenes a lo largo del lado de cada sección, casi actuando de una manera muy similar a las vistas sección de cabecera. Si me desplazo hacia abajo, las estancias de imagen superior hay hasta la siguiente imagen viene a chocar si fuera poco, y viceversa.

En un principio parece bastante imposible sin reimplementar la UITableView todo de nuevo, pero creo que es semi-factible simplemente la subclasificación de un UITableView para dibujar estas imágenes de sección en el lateral, fuera del UITableView, cada vez que llama layoutSubviews (es decir, cada vez que se pergaminos). Hay ligeras problemas con esto: porque llama fuera del UITableView, cualquier cambio de tamaño automático probablemente tirar todo el trazado fuera. Y estoy realmente seguro acerca de la viabilidad de todo.

¿Alguna idea?

---

Edit: acabo de dar cuenta de que mi primera idea no funcionaría en que cualquier toques sobre las imágenes laterales mismos no serían rastreados por el tableview, lo que no podía desplazarse si no tocado. Creo que el mayor problema aquí es encontrar la manera de propagar los toques por lo que toca se realiza un seguimiento a través de toda la vista.

Answer 1

Después de pensarlo al azar en el medio de la noche, que finalmente descubrió una solución real.

Insertar el UITableView en una UIScrollView, y cuando el usuario desplaza el punto de vista, los toques pasan por a través de la ScrollView padres, y no el propio tableview. Casi todo lo que tiene que hacer radica en el método layoutSubviews; desde layoutSubviews del ScrollView se llama cuando el usuario se desplaza la vista, simplemente cambiar el marco de la tableview a permanecer fijo en pantalla y cambiar contentOffset del tableview para que coincida con la de la ScrollView.

Ejemplo código:

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

En este punto, se puede ajustar el tableview a un lado y hacer lo que quiera en el otro.

Answer 2

se puede comprobar a qué sección se encuentra en la tableview (o el más elevado, etc.) de alguna manera, entonces simplemente tener un UIView que se actualiza cada vez que los cambios de sección, mi idea es un poco difícil de explicar, pero no tendría que ver con hacer de nuevo UITableView en absoluto, sólo tiene otro punto de vista junto a la vista de tabla para hacer las imágenes en lugar de tratar de incrustar esa funcionalidad.

Otra manera de hacer esto, es quizás un poco más complejo, pero se podía tratar de una sangría a las células para que no comienza en la parte izquierda de la vista de tabla, hacer que el tableview muy amplia y tiene una vista personalizada en el encabezado de sección que contiene esa imagen en su izquierda y se espera pueda hacerlo correctamente? buena pregunta y una diversión para jugar.

Answer 3

Está bien que he hecho algo similar a lo que ocurre con la aplicación de música y de búsqueda de Spotlight.

No he subclase UITableView, acabo rastreado las secciones a través de su método de scrollViewDidScroll, y añadido los puntos de vista de cabecera a la izquierda de la tableView (por lo que tendrá que poner el tableview a la derecha en la vista de viewController, lo que significa no se puede utilizar UITableViewController).

este método debe ser llamado en el scrollViewDidScroll, viewDidLoad, y en didRotateFromInterfaceOrientation: (si apoya la rotación)

tener en cuenta que tendrá que hacer espacio en la izquierda igual al tamaño de las cabeceras en cualquier orientación interfaz que usted apoya.

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

También necesitamos declarar una propiedad que mantendría a los puntos de vista que son visibles:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

estos métodos devuelven el tamaño y X eje de desplazamiento de los puntos de vista de cabecera:

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

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

He incorporado el código para que cualquier vista de cabecera que no se necesita se elimina, por lo que necesitamos un método que devolvería la vista siempre que sea necesario:

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

aquí está cómo se verá:

Como se verá en el paisaje, he utilizado contraints para dar 44px En el lado izquierdo de la tableView

Esperamos que esto ayude:.)