iOS -Sticky segmented control como la aplicación App Store

Estoy creando una aplicación y en una de las vistas de navigation, tengo un layout muy similar al de la aplicación App Store – ver Detalles | Comentarios | Sección relacionada Siguiendo líneas similares, deseo implementar el control segmentado de la misma manera que lo hizo Apple en su aplicación. (Esto también es similar a lo que Apple hace en la vista de Artista -> Álbumes de navigation en la aplicación de música pnetworkingeterminada de iOS 7, aunque para un encabezado de tabla (tal vez)).

  • Si se desplaza hacia arriba, cuando el contenedor de control segmentado toca la barra de navigation, se queda allí.
  • También permite al usuario notar que se trata de algún tipo de superposition debido a la alfa asociada con ella.
  • Cuando se desplaza hacia abajo, se mueve a la position cuando sea necesario.

Que he hecho –

He creado una vista de contenedor con el control segmentado. Cuando se desplaza el scrollView, reposiciono mi vista del contenedor para lograr el efecto adhesivo. Esto es solo un pseudo-código, pero mi código realmente funciona.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView == self.labTestScrollView) { /* As soon as the user scrolls up, y changes, therefore, we need to stick the options container view such that it doesn't go past the UINavigationBar Need to check if the origin of the options container view in the coordinate system of the main superview is just gone past the UINavigationBar in this controller's view. - get the bounds rect for the options container view - convert these bounds and position them in the coordinates of this controller's view - check if origin.x for container view is less than that of view.origin.y - if less than stick it by converting the headerFrame to the coordinate system of the options container view; and raise the stuck flag - if greater, check if the stuck flag is raised; check for another object in space before the container view and adjust accordingly. */ } } 

Hay dos problemas:

  1. Sin efecto de superposition. Puedo configurar el alfa para que el efecto sea un poco más visible, pero eso no parece natural.
  2. La segunda preocupación proviene de la primera. Esto parece una solución muy específica. Estoy esperando algo que es más natural; y algo que podría funcionar de forma pnetworkingeterminada usando vistas de tabla o algo así.

¿Por qué no simplemente usar un UITableView ?

Ponga su "contenido superior" en la sección 0 y no tenga ningún encabezado para esa sección. Ponga todas las otras cosas en la sección 1 y déle a esa sección un encabezado con su UISegmentedControl .

El código siguiente funciona bastante bien. Es posible que desee encontrar una forma de darle al background del encabezado un efecto de "desenfoque" para imitar un poco más el comportamiento de Apple; tal vez GPUimage podría ayudarte allí?

 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 2; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return section == 0 ? 1 : 5; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *identifier = indexPath.section == 0 ? @"header" : @"content"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; // customize cell return cell; } - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { if(section == 1) { UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"Foo", @"Bar"]]; segmentedControl.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.95]; return segmentedControl; } return nil; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return section == 0 ? 0 : 44; } 

Te dejaré el ajuste;)

Esto es en realidad 2 visitas.

El primero es el encabezado de una UITableView.

Esto incluye el control segmentado y el icono de la aplicación, el button de installation, etc.

La segunda vista tiene un control segmentado que se encuentra en la parte superior de la pantalla y está oculto.

Cuando se desplaza la vista de tabla, puede interceptar el método de delegado de la vista de desplazamiento scrollView: didScroll …

Aquí, si el desplazamiento de desplazamiento de vista es mayor que la altura del encabezado, haga visible la segunda vista. De lo contrario lo ocultas.

Eso es. Ahora solo necesita recordar actualizar ambos controles segmentados cada vez que se cuelga uno.