Zoom 1, dimensionado de la ventana y scroll

Siguiendo con mi aprendizaje en Cocoa me he encontrando intentando hacer zoom en una vista. En principio las instrucciones son sencillas, pero la realidad es bastante más complicada. Hay muchos conceptos sobre las vistas en Cocoa que evidentemente no habia llegado a comprender. Así que esta nueva serie de entradas son un intento de dejar constancia de mi nueva compresión sobre este tema.

Auto dimensionado

El proyecto comienza en primer lugar con una prueba como referencia para posteriores cambios.

Creamos en XCode una vista personalida (File | New File | Objective-C NSView subclass). Luego en Interface Builder creamos la ventana, añadimos una vista personalizada (Custom View) y en el Inspector hacemos que se corresponda con la vista que hemos creado antes. En fin, nada que no haya hecho en otras ocasiones. Simplemente que en este caso he tenido el cuidado de crear una vista de 400×400 y ajustar la ventana de la aplicación en consecuencia.

En segundo lugar en XCode escribimos el código adecuado para dibujar dos cuadrados y dos círculos en la vista

- (void)drawRect:(NSRect)lienzo {
    //Dibujar el fondo de color blanco
	[[NSColor whiteColor] set];
	[NSBezierPath fillRect:lienzo];

    // Cuadrados
    NSRect cuadrado1 = NSMakeRect(0.0, 0.0, 25.0, 25.0);
	[[NSColor blackColor] set];
    NSRectFill(cuadrado1);
    NSRect
    NSRect cuadrado2 = NSMakeRect(350.0, 350.0, 100.0, 100.0);
    NSRectFill(cuadrado2);

    // Círculos
    [[NSColor redColor] set];
    NSBezierPath* circulo1 = [NSBezierPath bezierPath];
    [circulo1 appendBezierPathWithOvalInRect:NSMakeRect(180.0, 180.0, 40.0, 40.0)];
    [circulo1 stroke];

    NSBezierPath* circulo2 = [NSBezierPath bezierPath];
    [circulo2 appendBezierPathWithOvalInRect:NSMakeRect(300.0, 100.0, 200.0, 200.0)];
    [circulo2 stroke];
}

En este caso la prueba consiste en modificar en Interface Builder la propiedad de autodimensionado (autoresizing). En la primera imagen se ve el resultado sin el auto dimensionado: la ventana de la aplicación es más grande, pero el dibujo no cambia.

Vista sin autodimensionado

Vista sin autodimensionado

En la segunda imagen se ve como al activar al autodimensionado si hacemos más grande la ventana de la aplicación, la vista del dibujo se hace más grande. Esto permite observar elementos del dibujo que antes quedaban incompletos.

Vista con autodimensionado

Vista con autodimensionado

 

 

Ventana con scroll

El siguiente elemento necesario para el Zoom es que la ventana de la aplicación sea capaz de mostrar las barras de desplazamiento si la vista es más grande que la ventana. Para ello basta en Interface Builder seleccionar la vista e indicarle que incluya la vista en una vista con desplazamiento (Scroll). Se hace seleccionando la opción de menú Layout | Embed Objects in | Scroll view. Es en esta acción tan sencilla dónde comienzan los problemas. Por que ahora en la ventana de la aplicación hay dos vistas: la vista personalizada que hemos creado y la vista de scroll que controlará el sistema.Y además, ¿no tenian que salir las barras de desplazamiento?

 

Vista con Scroll, sin barras de desplazamiento

Vista con Scroll, sin barras de desplazamiento

Para que funcione tenemos que asegurarnos que la vista personalizada no se redimensione automáticamente.

Autodimensionado sin activar para tener las barras de desplazamiento

Autodimensionado sin activar para tener las barras de desplazamiento

Entonces será cuando al hacer la ventana más pequeña que la vista personalizada que hemos definido se vean las barras de desplazamiento.

Ventana con scroll

Ventana con scroll

Para acabar por ahora unos detalles. Es posible definir que las barras de desplazamiento solo se vean cuando haga falta, para ello en Interface Builder, se selecciona la vista de scroll (Scroll View) y en la pestaña Attributes se pude marcar la opción Automatically Hide Scrollers. Basta hacer la vista de scroll ligeramente más grande que la vista personalizada y solo se veran las barras de desplazamiento cuando se haga más pequeña la ventana.

Todavía queda bastante trabajo por hacer: si nos fijamos en las barras de desplazamiento vemos que los deslizadores quedan en la parte inferior izquierda, centrando el dibujo o la imagen en esa esquina, hará falta algo de programación para arreglarlo. Otro problema es que si ampliamos la ventana, la vista personalizada siempre queda en la esquina inferior izquierda, ignorando la opción escogida en Interface Builder, no estoy seguro de por que pasa, pero creo que es un error de esta versión de XCode (3.0).

En la próxima entrada tengo previsto hablar sobre el marco de la vista, limites y areas visibles, la geometría de la vista.

Entradas Relacionadas

Etiquetas: , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: