Muestra UIViewController como ventana emergente en iPhone

Como no hay una respuesta definitiva y definitiva a esta pregunta recurrente común, la preguntaré y responderé aquí.

A menudo necesitamos presentar un UIViewController manera que no cubra la pantalla completa, como se muestra en la imagen siguiente.

enter image description here

Apple proporciona varios UIViewController similares, como UIAlertView , Twitter o el controlador de vista compartida de Facebook, etc.

¿Cómo podemos lograr este efecto para un controlador personalizado?

NOTA: esta solución está rota en iOS 8. Voy a publicar una nueva solución lo antes posible.

Voy a responder aquí usando el guión gráfico, pero también es posible sin guiones gráficos.

  1. Init: UIViewController dos UIViewController en el guión gráfico.

    • digamos FirstViewController que es normal y SecondViewController que será la ventana emergente.

  2. Segue modal: UIButton en FirstViewController y cree un segue en este UIButton a SecondViewController como UIButton modal.

  3. Hacer transparente: ahora seleccione UIView ( UIView que se crea de forma predeterminada con UIViewController ) de SecondViewController y cambie el color de fondo para borrar el color.

  4. Hacer fondo Dim: Añadir un UIImageView en SecondViewController que cubre toda la pantalla y establece su imagen en una imagen parcialmente transparente atenuada. Puede obtener una muestra de aquí: UIAlertView fondo de UIAlertView

  5. Diseño de pantalla: ahora agregue una UIView y haga cualquier tipo de diseño que desee mostrar. Aquí hay una captura de pantalla de mi guión gráfico guión gráfico

    • Aquí he agregado un botón segue on login que abre SecondViewController como ventana emergente para solicitar el nombre de usuario y la contraseña
  6. Importante: Ahora ese paso principal. Queremos que SecondViewController no oculte FirstViewController por completo. Hemos establecido un color claro, pero esto no es suficiente. De forma predeterminada, agrega negro detrás de la presentación del modelo, por lo que debemos agregar una línea de código en viewDidLoad de FirstViewController . Puede agregarlo en otro lugar también, pero debe ejecutarse antes de segue.

    [self setModalPresentationStyle:UIModalPresentationCurrentContext];

  7. Descartar: Cuándo despedir depende de su caso de uso. Esta es una presentación modal, por lo tanto, para descartar, hacemos lo que hacemos para la presentación modal:

    [self dismissViewControllerAnimated:YES completion:Nil];

Eso es todo…..

Cualquier tipo de sugerencia y comentario son bienvenidos.

Demostración: Puede obtener un proyecto fuente de demostración desde Here: Popup Demo

NUEVO : Alguien ha hecho un trabajo muy agradable en este concepto: MZFormSheetController
Nuevo : Encontré un código más para obtener este tipo de función: KLCPopup


Actualización de iOS 8 : hice que este método funcionara tanto con iOS 7 como con iOS 8

 + (void)setPresentationStyleForSelfController:(UIViewController *)selfController presentingController:(UIViewController *)presentingController { if (iOSVersion >= 8.0) { presentingController.providesPresentationContextTransitionStyle = YES; presentingController.definesPresentationContext = YES; [presentingController setModalPresentationStyle:UIModalPresentationOverCurrentContext]; } else { [selfController setModalPresentationStyle:UIModalPresentationCurrentContext]; [selfController.navigationController setModalPresentationStyle:UIModalPresentationCurrentContext]; } } 

Puede usar este método dentro de prepareForSegue deligate como este

 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { PopUpViewController *popup = segue.destinationViewController; [self setPresentationStyleForSelfController:self presentingController:popup] } 

Ventanas emergentes modales en Interface Builder (Storyboards)

Paso 1

En el ViewController que desee como ventana emergente modal, borre el color de fondo de la UIView raíz. Establecer color claro en la vista raíz Consejo: No use el UIView raíz como su ventana emergente. Agregue un nuevo UIView que sea más pequeño para ser su ventana emergente.

Paso 2

Cree un Segue al ViewController que tiene su ventana emergente. Seleccione “Presente Modally”. Segue

Dos métodos para crear ventanas emergentes desde aquí

Método uno: uso de Segue

Seleccione el Segue y cambie la presentación a “Over Current Context”: Sobre el contexto actual

Método dos: usar el controlador de visualización

Seleccione la escena ViewController que es su ventana emergente. En Attributes Inspector, en la sección View Controller, configure Presentation en “Over Current Context”: ViewController

Cualquiera de los métodos funcionará. ¡Deberias hacer eso!

Producto terminado

Puedes hacer esto en Interface Builder.

  • Para la vista que desea presentar modalmente establecer su fondo de vista más externa a transparente
  • Control + clic y arrastre desde el controlador de vista de host al controlador de vista modal
  • Seleccionar presente modalmente
  • Haga clic en el segue recién creado y en el Inspector de atributos (a la derecha) establezca “Presentación” en “Contexto actual excesivo”

Siéntase libre de usar mi controlador de hoja de formulario MZFormSheetController para iPhone, en el proyecto de ejemplo hay muchos ejemplos sobre cómo presentar el controlador de vista modal que no cubrirá la ventana completa y tiene muchos estilos de presentación / transición.

También puede probar la versión más reciente de MZFormSheetController que se llama MZFormSheetPresentationController y tiene muchas más funciones.

Puede usar EzPopup ( https://github.com/huynguyencong/EzPopup ), es un pod Swift y muy fácil de usar:

 // init YourViewController let contentVC = ... // Init popup view controller with content is your content view controller let popupVC = PopupViewController(contentController: contentVC, popupWidth: 100, popupHeight: 200) // show it by call present(_ , animated:) method from a current UIViewController present(popupVC, animated: true) 

Puede hacer esto para agregar cualquier otra vista secundaria al controlador de vista. Primero configure la barra de estado en Ninguno para ViewController que desee agregar como subvista para que pueda cambiar el tamaño a lo que desee. A continuación, cree un botón en el controlador de vista actual y un método para hacer clic en el botón. En el método:

 - (IBAction)btnLogin:(id)sender { SubView *sub = [[SubView alloc] initWithNibName:@"SubView" bundle:nil]; sub.view.frame = CGRectMake(20, 100, sub.view.frame.size.width, sub.view.frame.size.height); [self.view addSubview:sub.view]; } 

Espero que esto ayude, no dude en preguntar si alguna consulta …

Imao puso UIImageView en el fondo no es la mejor idea. En mi caso agregué en el controlador ver otras 2 vistas. La primera vista tiene [UIColor clearColor] en segundo plano, segundo – color que desea que sea transparente (gris en mi caso). Observe que el orden es importante. Luego, para la segunda vista configure alfa 0.5 (alfa> = 0 <= 1) .Added esto a las líneas en prepareForSegue

 infoVC.providesPresentationContextTransitionStyle = YES; infoVC.definesPresentationContext = YES; 

Y eso es todo.

Swift 4:

Para agregar una superposición o la vista emergente También puede usar la Vista de contenedor con la que obtiene un Controlador de vista libre (se obtiene la Vista de contenedor desde la paleta / biblioteca de objetos habitual)

enter image description here

Pasos:

  1. Tenga una Vista (ViewForContainer en la imagen) que contenga esta Vista de contenedor, para atenuarla cuando se muestre el contenido de la Vista de contenedor. Conecte la toma de stream dentro del primer Controlador de Vista

  2. Ocultar esta vista cuando cargas 1st VC

  3. Mostrar cuando se hace clic en el botón enter image description here

  4. Para atenuar esta Vista cuando se muestra el contenido de la Vista de contenedor, configure el Fondo de vistas en negro y la opacidad en 30%

enter image description here

Obtendrá este efecto cuando haga clic en el botón enter image description here