iphone - español - Animación de UITableViewCell dibujado a medida al ingresar al modo de edición

cocoa touch español

Question

Fondo

En primer lugar, mucha gratitud a los atebits por su muy informativa publicación de blog Fast Scrolling en Tweetie con UITableView . La publicación explica en detalle cómo los desarrolladores pudieron exprimir tanto rendimiento de desplazamiento como fuera posible de las UITableViews en Tweetie .

Metas

A partir del código fuente vinculado desde la publicación del blog ( original ) ( mi repositorio github ):

1. Permita que UITableView use estas celdas personalizadas para cambiar al modo de edición, exponiendo la IU para eliminar un elemento de la tabla. ( Github commit )

2. Mueva el texto de la celda a un lado mientras el control de eliminación se desliza desde la izquierda. Esto está completo, aunque el texto salta adelante y atrás sin animación. ( Github commit )

3. Aplica animación al movimiento de texto en el objetivo 2 anterior para una experiencia de usuario fluida. Este es el paso donde me quedé estancado.

La pregunta

¿Cuál es la mejor manera de presentar esta animación para completar el objetivo 3? Sería bueno si esto pudiera hacerse de una manera que mantenga la lógica de mi último compromiso porque me encantaría la opción de mover solo la parte en conflicto de la vista, mientras que cualquier parte no conflictiva (como el texto justificado a la derecha) permanecer en el mismo lugar o mover una cantidad diferente de píxeles. Si lo anterior no es posible, deshacer la última confirmación y reemplazarla con una opción que deslice toda la vista hacia la derecha también sería una solución viable.

Agradezco cualquier ayuda que alguien pueda brindar, desde sugerencias e ideas rápidas hasta fragmentos de código o commit de github. Por supuesto que puede cargar mi repositorio si lo desea. Me mantendré involucrado con esta pregunta para asegurarme de que cualquier resolución exitosa esté comprometida con Github y esté completamente documentada aquí. ¡Muchas gracias por tu tiempo!

Pensamientos actualizados

He estado pensando mucho en esto desde mi primera publicación y me di cuenta de que mover algunos elementos de texto relativos a otros en la vista podría deshacer algunos de los objetivos de rendimiento originales resueltos en la publicación original del blog. Entonces, en este momento, estoy pensando en una solución en la que toda la subvista individual esté animada a su nueva posición, que puede ser la mejor.

En segundo lugar, si se hace de esta manera, puede haber una instancia en la que la subvista tenga un color personalizado o fondo degradado. Con suerte, esto se puede hacer de forma que, en su posición normal, el fondo se extienda invisible hacia la izquierda, de modo que cuando la vista se deslice hacia la derecha, el fondo personalizado siga siendo visible en toda la celda.

Answer 1

¿Cómo estás moviendo el texto actualmente? O más específicamente, ¿en qué método de UITableViewCell estás realizando el movimiento?

Desde mi experiencia, anulando el método layoutSubviews y configurando el cuadro aquí automáticamente se envolverá en una animación.

P.ej:

- (void)layoutSubviews {
if (self.editing) {
[titleLabel setFrame:CGRectMake(62, 6, 170, 24)];
}
else {
[titleLabel setFrame:CGRectMake(30, 6, 200, 24)];
}
[super layoutSubviews];
}

Answer 2

En realidad, hay cuatro estados editados.

UITableViewCellStateDefaultMask = 0

UITableViewCellStateShowingEditControlMask = 1 << 0 = 0b01 = 1 configurando tableView.edit = YES

UITableViewCellStateShowingDeleteConfirmationMask = 1 << 1 = 0b10 = 2 deslizando para borrar

UITableViewCellStateShowingEditControlMask y UITableViewellStateShowingDeleteConfirmationMask = (1 << 1) & (1 << 0) = 0b11 = 3 configurando tableView.edit = YES y presionando el botón "detener"

Lo que me confundió es que cuando el estado 3 se transfiere al estado 1, no se llamará a ningún selector que no utilice auto.showingDeleteConfirmation para cambiar el diseño en iOS7. Por lo tanto, para dejar en claro entre el estado 2 y el estado 3, agregué una instancia variable para implementarlo. Funciona muy bien para mí.

-(void)willTransitionToState:(UITableViewCellStateMask)state{
[super willTransitionToState:state];
//Custom delete button from
//http://.com/questions/19159476/uitableviewcelldeleteconfirmationcontrol-issue
if((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableViewCellStateShowingDeleteConfirmationMask){
[self recurseAndReplaceSubViewIfDeleteConfirmationControl:self.subviews];
[self performSelector:@selector(recurseAndReplaceSubViewIfDeleteConfirmationControl:) withObject:self.subviews afterDelay:0];
}
_swipeDelete = NO;
if(state==2){
//Swipe to delete confirm
_swipeDelete = YES;
}
if(state==3){
//Edit state to delete confirm
}
}
- (void)layoutSubviews{
[super layoutSubviews];
self.contentView.frame = CGRectMake(10, 5.0, 300, self.frame.size.height - 10);
if(self.editing){
self.contentView.frame = CGRectMake(40, 5.0, 270, self.frame.size.height - 10);
}
if(_swipeDelete){
self.contentView.frame = CGRectMake(10, 5.0, 300, self.frame.size.height - 10);
}
}

Answer 3

Gracias a la respuesta de Craig que me indicó la dirección correcta, tengo una solución para esto. Revertí mi confirmación que movía la posición del texto en función del modo de edición y la reemplacé con una nueva solución que establece la vista de contenido completa en la posición correcta en cualquier momento en que se llame a layoutSubviews, lo que da como resultado una animación automática al cambiar ay desde el modo de edición :

- (void)layoutSubviews
{
CGRect b = [self bounds];
b.size.height -= 1; // leave room for the separator line
b.size.width += 30; // allow extra width to slide for editing
b.origin.x -= (self.editing) ? 0 : 30; // start 30px left unless editing
[contentView setFrame:b];
[super layoutSubviews];
}

Al hacerlo de esta manera pude eliminar el setFrame: override encontrado en ABTableViewCell.m porque su lógica anterior más mis adiciones se encuentran ahora en layoutSubviews.

Establecí un fondo gris claro en las celdas para verificar que un fondo personalizado funciona correctamente sin permitirnos ver detrás de él, ya que se mueve hacia adelante y hacia atrás y parece funcionar muy bien.

Gracias de nuevo a Craig y a cualquier otra persona que haya investigado esto.

GitHub se compromete con esta solución: ( enlace )

Answer 4

Para controlar completamente la edición en su celda personalizada, debe anular el método willTransitionToState en su subclase UITableViewCell y verificar la máscara de estado

- (void)willTransitionToState:(UITableViewCellStateMask)state
{
NSString *logStr = @"Invoked";
if ((state & UITableViewCellStateShowingEditControlMask)
!= 0) {
// you need to move the controls in left
logStr = [NSString stringWithFormat:@"%@
%@",logStr,@"UITableViewCellStateShowingEditControlMask"];
}
if ((state & UITableViewCellStateShowingDeleteConfirmationMask)
!= 0) {
// you need to hide the controls for the delete button
logStr = [NSString stringWithFormat:@"%@
%@",logStr,@"UITableViewCellStateShowingDeleteConfirmationMask"];
}
NSLog(@"%@",logStr);
[super willTransitionToState:state];
}

también puede anular layoutSubviews

- (void)layoutSubviews {
// default place for label
CGRect alarmTimeRect = CGRectMake(37, 7, 75, 30);
if (self.editing && !self.showingDeleteConfirmation) {
// move rect in left
alarmTimeRect = CGRectMake(77, 7, 75, 30);
}
[alarmTimeLabel setFrame:alarmTimeRect];
[super layoutSubviews];
}

Answer 5

Para manejar el deslizamiento también: (self.editing &&! Self.showingDeleteConfirmation)

Answer 6

También tenía esta pregunta: ¿cómo animar un modo de edición personalizado? Realmente no me gustó la solución aquí, así que decidí pensar un poco y encontré una solución diferente. No sé si es mejor, pero prefiero ese. Así que decidí compartirlo aquí:

En la celda personalizada (hereda de UITableViewCell), solo sobrecarga el setEditing:

- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
[super setEditing:editing animated:animated];
if (animated) {
[UIView beginAnimations:@"setEditingAnimation" context:nil];
[UIView setAnimationDuration:0.3];
}
if (editing) {
/* do your offset and resize here */
} else {
/* return to the original here*/
}
if (animated)
[UIView commitAnimations];
}

No compruebo si el valor de edición es el mismo, pero eso es solo una idea de cómo lo hice.