2012-01-05 13 views
6

¿Cómo puedo implementar esquinas redondeadas aplicadas a toda la vista como se ve en la captura de pantalla (tenga en cuenta que tanto la barra de navegación como las esquinas del teclado están redondeadas)?Aplicación de esquinas redondeadas para toda la aplicación

He tratado de establecer cornerRadius = 10 y masksToBounds = YES tanto para window.layer y window.rootViewController.view.layer, pero sólo la vista esquinas inferiores son cada vez redondeado, la barra de navegación aún se mantiene cuadrado.

Actualización. Configuración cornerRadius a un window.layer esquinas redondeadas realmente añade a la parte superior también, pero esas esquinas no son visibles en la barra de estado a menos cornerRadius es mayor que 20.

Example

Respuesta

17

Ok, le he pedido a Andrew Stone, un desarrollador de Twittelator Neue, en Twitter, y aquí está su receta, publicada con el permiso de Andrew:

Estamos g ¡para escribir un libro sobre trucos de codificación en Neue! Nos superponer una ventana w una imagen que contiene 4 esquinas por encima de todo

También tenemos una barra de navegación personalizada con una imagen estirable w/cimas redondeadas

Así que aquí está cómo lo hice en mi propio proyecto:

UIImage *overlayImg = [UIImage imageNamed:@"overlay.png"]; 
CALayer *overlay = [CALayer layer]; 
overlay.frame = CGRectMake(0, 0, overlayImg.size.width, overlayImg.size.height); 
overlay.contents = (id)overlayImg.CGImage; 
overlay.zPosition = 1; 
[self.window.layer addSublayer:overlay]; 

overlay.png es una imagen de pantalla completa transparente con esquinas negras.

+0

Al hacer esto, recuerde agregar '#import ' a su clase y agregar el framework QuartzCore a su proyecto. – robhasacamera

+0

Encontré esto en la aplicación: roundedCornerBL.png [email protected] roundedCornerBR.png [email protected] roundedCornerTL.png [email protected] roundedCornerTR.png [email protected] – 3lvis

+0

Puede alguien compartir la imagen (s) de superposición? – fvisticot

0

Dudo que la ventana tiene las esquinas redondeadas porque no creo que la barra de estado tenga una altura superior a 20 unidades. Sospecho que la ventana simplemente se establece con un fondo negro (o el color que sea necesario para que coincida con la barra de estado, y luego otra vista se coloca en la parte superior.) La vista en la parte superior tiene las esquinas redondeadas. esquinas para ayudar con esta ilusión.

+0

El área redondeada está detrás de la barra de estado, por lo que si oculta la barra de estado, verá esto. – Andy

1

están imagen de fondo utilizando probablemente en la barra de navegación que incluye las esquinas redondeadas.

+0

Sí, lo pensé. Pero si el fondo de la barra de navegación contiene esquinas negras, mostrarlas en una vista modal las mostrará moviéndose alrededor de una pantalla desde abajo durante la animación :) – iHunter

+0

Es cierto, ¿has probado un png con un fondo transparente? –

+0

No he probado una barra de navegación transparente por mi cuenta (decidí ir sin esquinas redondeadas), pero Andrew Stone (Twittelator Neue) me dijo que lo hizo de esa manera (además de la superposición con esquinas encima de todo, mira mi respuesta para detalles). ¡Gracias por tu ayuda! – iHunter

1

La respuesta de iHunter funciona muy bien para mí, excepto cuando intento usar el TWTweetComposeViewController, que muestra el teclado pero no la vista de tweet. Entonces debo hacer la superposición como una propiedad en el AppDelegate.h y antes de tweetView, eliminar la superposición. En el tweet hecho, vuelve a agregar la superposición.

AppDelegate *delegate = [[UIApplication sharedApplication] delegate]; 
[delegate.overlay removeFromSuperlayer]; 
TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init]; 
tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result) { 
    AppDelegate *delegate = [[UIApplication sharedApplication] delegate]; 
    [delegate.window.layer addSublayer:delegate.overlay]; 
}; 
[self presentModalViewController:tweetSheet animated:YES];