Hacer que UIView estético sea pegajoso cuando UIScrollView esté desplazándose

  • Tengo una vista de desplazamiento (diagtwig: palabras) que es mucho más larga que la altura del dispositivo
  • En la parte inferior de la vista de desplazamiento se encuentra un contenido inferior (diagtwig: prensa francesa) con un color de background diferente.
  • Para separar el contenido inferior de las palabras, he creado una UIView alta de 1 pt para que actúe como borde (diagtwig: línea roja)
  • Tengo un button que se encuentra en la parte inferior del dispositivo, fuera de la vista de desplazamiento (la vista de desplazamiento es device.height - button.height ). El color de background de este button coincide con el color de background del contenido inferior.

Los diferentes colors de background se ven bastante borrosos sin separar algo del button inferior de la vista de contenido, de modo que si bien el contenido inferior NO es visible, me gustaría que el borde sea pegajoso y parezca estar sentado sobre el button inferior (diagtwig: rojo línea).

Una pequeña nota: estoy usando AutoLayout en IB, pero tengo un IBOutlet creado para la restricción de frontera que puedo manipular fácilmente en el código.

introduzca la descripción de la imagen aquí

Aquí hay una lib que hace el trabajo: https://github.com/ericcastro/ECStretchableHeaderView

(funciona con UItableView en la muestra pero la implementación se basa en UIScrollview)

Tienes que actualizar el código cambiando la lógica: Aquí la vista está en la parte superior, ¡pero todo el principio está ahí!

Puedes crear dos bordes. El primero es el borde dynamic en la parte superior del contenido inferior en la vista de desplazamiento. El segundo es el borde pegajoso en la parte superior del button fuera de la vista de desplazamiento.

El segundo borde debe estar oculto cuando el primer borde es visible. Para hacer esto, debe registrar un UIScrollViewDelegate . Implementar el método scrollViewDidScroll(_:) . Simplemente verifique si el primer borde está por encima del segundo. Esto se puede hacer con algo como esto:

 if firstBorder.frame.origin.y < scrollView.contentOffset.y + scrollView.frame.height { // firstBorder is on the screen, hide the secondBorder... secondBorder.hidden = true } else { secondBorder.hidden = false } 

Esto puede no ser 100% correcto para usted, porque no está claro si su UIScrollView termina encima del button o si se superponen. Ajústelo si el borde se esconde demasiado temprano o demasiado tarde.

Si su button es transparente, también debe ocultar el primer borde si no se muestra, porque podría estar debajo del button. Luego simplemente agregue las líneas firstBorder.hidden = false y firstBorder.hidden = true al código.

Yo tomaría estos pasos:

  1. Coloque el button en una vista que está fuera de scrollView .
  2. Ponga el contenido inferior impresionante (que pensé que era una image de la cabeza de Bender) en la misma vista en la que está el button, y cójalo en los bordes superior, izquierdo y derecho.
  3. Establezca la dimensión inferior de las inserciones de contenido de la vista de desplazamiento para que sea igual a la altura de la impresionante vista de contenido inferior. Esto le dirá a la vista de desplazamiento que está bien desplazarse hacia abajo por muchos píxeles debajo del final real del contenido desplazable.
  4. Agregue UIScrollViewDelegate a la vista de desplazamiento que implementa, como mínimo, scrollViewDidScroll(_) . En este método, verifique la position más inferior del contenido de desplazamiento. Si esa position cae en algún lugar del recuadro de contenido inferior que configuró en el paso 3, estire o reposicione verticalmente su increíble contenido inferior en la misma cantidad.

Si tengo time, prepararé una muestra que haga exactamente esto.

Al less hay dos soluciones simples que me vienen a la mente primero.

La key es encontrar un punto cruzado :

Valor de tamaño de contenido donde la línea roja en la vista de desplazamiento sale de debajo del button o entra debajo del button.

Opción 1: agregue otra línea roja en la parte superior del button y oculte / muestre (propiedad oculta) en scrollViewDidScroll cuando el valor del tamaño del contenido se aproxima al punto cruzado

Opción 2: si el valor del tamaño del contenido se acerca al punto cruzado, elimine las restricciones y cambie la vista de supervisión de la línea roja desde la vista de desplazamiento hacia el button o viceversa. Vuelva a agregar restricciones para una supervisión específica. Obviamente, necesitas hacer eso en el código.