¿Para qué sirve la propiedad UIScrollView contentInset?


158

¿Alguien puede explicarme para qué se utiliza la propiedad contentInset en una UIScrollViewinstancia? ¿Y quizás dar un ejemplo?

Respuestas:


240

Establece la distancia del recuadro entre la vista de contenido y la vista de desplazamiento adjunta.

Obj-C

aScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 7.0);

Swift 5.0

aScrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 7.0)

Aquí hay un buen artículo de la Biblioteca de referencia de iOS sobre vistas de desplazamiento que tiene una captura de pantalla informativa (fig 1-3). Lo replicaré a través de texto aquí:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑


   (cH = contentSize.height; cW = contentSize.width)

La vista de desplazamiento encierra la vista de contenido más el relleno proporcionado por las inserciones de contenido especificadas.


¿se usa para agregar un relleno al UIScrollView entonces? Si no, podrías darme un ejemplo práctico. Mi problema no es cómo implementarlo, sino cuándo implementarlo.
Extranjero

28
Sí, rellena el contenido en el interior de la vista de desplazamiento. Es similar a la paddingpropiedad CSS .
Marc W

Perdón por aprovechar esto, puedo mover su propia pregunta, pero en base a esto, ¿qué sucede realmente si establece cada valor de contentInset en 0 que no sea contentHeight, por ejemplo? ¿Eso obliga a que toda la vista de desplazamiento sea la altura a la que la configuró?
jakev

@jakev No, la propiedad .frame controla las dimensiones de la vista de desplazamiento dentro de su elemento primario (consulte esta respuesta: stackoverflow.com/questions/5361369/… ). Establecer contentInsets en 0 para todos los lados simplemente significa que el contenido no se rellenará en absoluto dentro de la vista de desplazamiento. Entonces, cuando te desplazas hacia la parte superior, el contenido se encuentra justo en la parte superior de la vista de desplazamiento. Si se desplaza hacia abajo, el contenido llega hasta la parte inferior de la vista de desplazamiento.
Jeremy Wiebe

¿Es posible mantener el ContentInset siempre, incluso cuando el desplazamiento siempre mantiene el marin en la parte superior (contenInset) de scrollView
Chlebta

86

Si bien la respuesta de jball es una excelente descripción de las inserciones de contenido, no responde a la pregunta de cuándo usarla. Tomaré prestado de sus diagramas:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
   |content|    
-------------↑-

Eso es lo que obtienes cuando lo haces, pero la utilidad solo se muestra cuando te desplazas:

  _|←_cW_→_|_↓_
   |content| ← content is still visible
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑

Esa fila superior de contenido seguirá siendo visible porque todavía está dentro del marco de la vista de desplazamiento. Una forma de pensar en el desplazamiento superior es "cuánto desplazar el contenido hacia abajo en la vista de desplazamiento cuando nos desplazamos hasta la parte superior"

Para ver un lugar donde esto realmente se usa, mira la aplicación de fotos incorporada en el iphone. La barra de navegación y la barra de estado son transparentes, y el contenido de la vista de desplazamiento está visible debajo. Esto se debe a que el marco de la vista de desplazamiento se extiende tan lejos. Pero si no fuera por el contenido, nunca sería capaz de que la parte superior del contenido borre esa barra de navegación transparente cuando llegues hasta la parte superior.


Lo bueno aquí es que puede usar las inserciones para crear el efecto "desplazarse bajo la barra de estado con desenfoque".
TheEye

El ejemplo sobre la aplicación de fotos fue fácil de entender.
abhimuralidharan

8

Las inserciones de contenido resuelven el problema de tener contenido que se encuentra debajo de otras partes de la interfaz de usuario y, sin embargo, sigue siendo accesible mediante barras de desplazamiento. En otras palabras, el propósito de Content Inset es hacer que el área de interacción sea más pequeña que su área real.

Considere el caso donde tenemos tres áreas lógicas de la pantalla:

TOP BUTTONS

TEXT

BOTTOM TAB BAR

y queremos que el TEXTO nunca aparezca de manera transparente debajo de los BOTONES SUPERIORES, pero queremos que el texto aparezca debajo de la BARRA DE TABULACIÓN INFERIOR y aún así permitir el desplazamiento para poder actualizar el texto de manera transparente debajo de la BARRA DE TABULACIÓN INFERIOR.

Luego, estableceríamos el origen superior para que esté debajo de los BOTONES SUPERIORES, y la altura para incluir la parte inferior de la BARRA DE PESTAÑA INFERIOR. Para obtener acceso al Texto que se encuentra debajo del contenido de BARRA DE PESTAÑA INFERIOR, estableceríamos el recuadro inferior para que sea la altura de la BARRA DE PESTAÑA INFERIOR.

Sin el recuadro, el desplazador no le permitiría desplazarse hacia arriba el contenido lo suficiente como para escribirlo. Con la inserción, es como si el contenido tuviera un "CONTENIDO EN BLANCO" extra del tamaño de la inserción del contenido. El texto en blanco se ha "insertado" en el "contenido" real, así es como recuerdo el concepto.


4

Se usa para agregar relleno en UIScrollView

Sin contentInset, una vista de tabla es así:

ingrese la descripción de la imagen aquí

Luego establezca contentInset:

tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

El efecto es el siguiente:

ingrese la descripción de la imagen aquí

Parece ser mejor, ¿verdad?

Y escribo un blog para estudiar contentInset, la crítica es bienvenida.


2

Gran pregunta

Considere el siguiente ejemplo ( scrolleres un UIScrollView):

float offset = 1000;
[super viewDidLoad];
for (int i=0;i<500; i++) {
    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(i * 100, 50, 95, 100)] autorelease];
    [label setText:[NSString stringWithFormat:@"label %d",i]];
    [self.scroller addSubview:label];
    [self.scroller setContentSize:CGSizeMake(self.view.frame.size.width * 2 + offset, 0)];
    [self.scroller setContentInset:UIEdgeInsetsMake(0, -offset, 0, 0)];
}

Las inserciones son la ÚNICA manera de forzar a su desplazamiento a tener una "ventana" en el contenido donde lo desea. Todavía estoy jugando con este código de muestra, pero la idea está ahí: use las inserciones para obtener una "ventana" en su UIScrollView.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.