ios 在 iPhone 中将 UIViewController 显示为 Popup

Display UIViewController as Popup in iPhone

提问by CRDave

Since there is no complete, definitive answer to this common recurring question, I'll ask and answer it here.

由于这个常见的反复出现的问题没有完整、明确的答案，我将在这里提问和回答。

Often we need to present a UIViewControllersuch that it doesn't cover full screen, as in the picture below.

通常我们需要呈现一个UIViewController不覆盖全屏的，如下图所示。

Apple provides several similar UIViewController, such as UIAlertView, Twitter or Facebook share view controller, etc..

Apple 提供了几个类似的UIViewController，例如UIAlertView，Twitter 或 Facebook 共享视图控制器等。

How can we achieve this effect for a custom controller?

我们如何为自定义控制器实现这种效果？

回答by CRDave

NOTE : This solution is broken in iOS 8. I will post new solution ASAP.

注意：此解决方案在 iOS 8 中已损坏。我将尽快发布新的解决方案。

I am going to answer here using storyboard but it is also possible without storyboard.

我将在这里使用故事板回答，但也可以不使用故事板。

1. Init:Create two UIViewControllerin storyboard.

   • lets say FirstViewControllerwhich is normal and SecondViewControllerwhich will be the popup.

2. Modal Segue:Put UIButtonin FirstViewController and create a segue on this UIButtonto SecondViewControlleras modal segue.

3. Make Transparent:Now select UIView(UIViewWhich is created by default with UIViewController) of SecondViewControllerand change its background color to clear color.

4. Make background Dim:Add an UIImageViewin SecondViewControllerwhich covers whole screen and sets its image to some dimmed semi transparent image. You can get a sample from here : UIAlertViewBackground Image

5. Display Design:Now add an UIViewand make any kind of design you want to show. Here is a screenshot of my storyboard

   • Here I have add segue on login button which open SecondViewControlleras popup to ask username and password

6. Important:Now that main step. We want that SecondViewControllerdoesn't hide FirstViewController completely. We have set clear color but this is not enough. By default it adds black behind model presentation so we have to add one line of code in viewDidLoad of FirstViewController. You can add it at another place also but it should run before segue.

   [self setModalPresentationStyle:UIModalPresentationCurrentContext];

7. Dismiss:When to dismiss depends on your use case. This is a modal presentation so to dismiss we do what we do for modal presentation:

   [self dismissViewControllerAnimated:YES completion:Nil];

1. Init：UIViewController在故事板中创建两个。

   • 让我们说FirstViewController哪个是正常的，SecondViewController哪个是弹出窗口。

2. 模态转场：放入UIButtonFirstViewController 并在其上创建一个UIButton转场SecondViewController作为模态转场。

3. 使透明：现在选择UIView（UIView默认情况下使用UIViewController）的SecondViewController并将其背景颜色更改为清除颜色。

4. 制作背景暗淡：添加UIImageView在SecondViewController覆盖整个屏幕，并将其图像变暗一些半透明图像。您可以从这里获取示例：UIAlertView背景图片

5. 展示设计：现在添加UIView并制作您想要展示的任何类型的设计。这是我的故事板的屏幕截图

   • 在这里，我在登录按钮上添加了 segue，该按钮SecondViewController作为弹出窗口打开以询问用户名和密码

6. 重要提示：现在是主要步骤。我们希望它SecondViewController不会完全隐藏 FirstViewController。我们设置了清晰的颜色，但这还不够。默认情况下，它会在模型​​展示后面添加黑色，因此我们必须在 .viewDidLoad 的 viewDidLoad 中添加一行代码FirstViewController。您也可以在其他地方添加它，但它应该在 segue 之前运行。

   [self setModalPresentationStyle:UIModalPresentationCurrentContext];

7. 解雇：何时解雇取决于您的用例。这是一个模态演示，所以我们做我们为模态演示做的事情：

   [self dismissViewControllerAnimated:YES completion:Nil];

Thats all.....

就这样.....

Any kind of suggestion and comment are welcome.

欢迎任何形式的建议和评论。

Demo :You can get demo source project from Here : Popup Demo

演示：您可以从这里获得演示源项目：弹出演示

NEW: Someone have done very nice job on this concept : MZFormSheetController
New: I found one more code to get this kind of function : KLCPopup

新：有人在这个概念上做得非常好：MZFormSheetController
新：我找到了另一个代码来获得这种功能：KLCPopup

---

---

iOS 8 Update: I made this method to work with both iOS 7 and iOS 8

iOS 8 更新：我将此方法用于 iOS 7 和 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];
    }
}

---

---

Can use this method inside prepareForSegue deligate like this

可以像这样在prepareForSegue deligate里面使用这个方法

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

    PopUpViewController *popup = segue.destinationViewController;
    [self setPresentationStyleForSelfController:self presentingController:popup]
}

回答by Mark Moeykens

Modal Popups in Interface Builder (Storyboards)

界面生成器中的模态弹出窗口（故事板）

Step 1

第1步

On the ViewController you want as your modal popup, make the background color of the root UIView clear. Tip: Do not use the root UIView as your popup. Add a new UIView that is smaller to be your popup.

在您想要作为模态弹出窗口的 ViewController 上，清除根 UIView 的背景颜色。 提示：不要使用根 UIView 作为弹出窗口。添加一个较小的新 UIView 作为您的弹出窗口。

Step 2

第2步

Create a Segue to the ViewController that has your popup. Select "Present Modally".

为具有弹出窗口的 ViewController 创建一个 Segue。选择“模态呈现”。

Two Methods To Create Popup From Here

从这里创建弹出窗口的两种方法

Method One - Using the Segue

方法一 - 使用 Segue

Select the Segue and change Presentation to "Over Current Context":

选择 Segue 并将 Presentation 更改为“Over Current Context”：

Method Two - Using the View Controller

方法二 - 使用视图控制器

Select the ViewController Scene that is your popup. In Attributes Inspector, under View Controller section, set Presentation to "Over Current Context":

选择作为弹出窗口的 ViewController 场景。在 Attributes Inspector 中，在 View Controller 部分下，将 Presentation 设置为“Over Current Context”：

Either method will work. That should do it!

这两种方法都行。应该这样做！

回答by Sig

You can do this in Interface Builder.

您可以在 Interface Builder 中执行此操作。

• For the view you wish to present modally set its outermost view background to transparent
• Control + click and drag from the host view controller to the modal view controller
• Select present modally
• Click on the newly created segue and in the Attribute Inspector (on the right) set "Presentation" to "Over Current Context"

• 对于您希望以模态方式呈现的视图，将其最外面的视图背景设置为透明
• Control + 单击并从宿主视图控制器拖动到模态视图控制器
• 模态选择现在
• 单击新创建的 segue 并在属性检查器（右侧）中将“Presentation”设置为“Over Current Context”

回答by Michal Zaborowski

Feel free to use my form sheet controller MZFormSheetControllerfor iPhone, in example project there are many examples on how to present modal view controller which will not cover full window and has many presentation/transition styles.

随意使用我的表单控制器MZFormSheetControllerfor iPhone，在示例项目中，有很多关于如何呈现模态视图控制器的示例，这些控制器不会覆盖整个窗口并具有许多呈现/转换样式。

You can also try newest version of MZFormSheetController which is called MZFormSheetPresentationControllerand have a lot of more features.

您还可以尝试最新版本的 MZFormSheetController，它被称为MZFormSheetPresentationController并具有更多功能。

回答by huync

You can use EzPopup (https://github.com/huynguyencong/EzPopup), it is a Swift pod and very easy to use:

您可以使用 EzPopup ( https://github.com/huynguyencong/EzPopup)，它是一个 Swift pod，非常易于使用：

// 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)

回答by Bohdan Savych

Imao put UIImageView on background is not the best idea . In my case i added on controller view other 2 views . First view has [UIColor clearColor]on background, second - color which u want to be transparent (grey in my case).Note that order is important.Then for second view set alpha 0.5(alpha >=0 <=1).Added this to lines in prepareForSegue

Imao 将 UIImageView 放在背景上并不是最好的主意。就我而言，我在控制器视图中添加了其他 2 个视图。第一个视图有[UIColor clearColor]背景，第二个 - 你想要透明的颜色（在我的情况下为灰色）。注意顺序很重要。然后对于第二个视图设置 alpha 0.5（alpha >=0 <=1）。将此添加到行中prepareForSegue

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

And thats all.

就这样。

回答by Naishta

Swift 4:

斯威夫特 4：

To add an overlay, or the popup view You can also use the Container Viewwith which you get a free View Controller ( you get the Container View from the usual object palette/library)

添加叠加层或弹出视图您还可以使用容器视图，通过它您可以获得一个免费的视图控制器（您可以从通常的对象面板/库中获得容器视图）

Steps:

脚步：

1. Have a View (ViewForContainer in the pic) that holds this Container View, to dim it when the contents of Container View are displayed. Connect the outlet inside the first View Controller

2. Hide this View when 1st VC loads

3. Unhide when Button is clicked

4. To dim this View when the Container View content is displayed, set the Views Background to Black and opacity to 30%

1. 有一个包含此容器视图的视图（图片中的 ViewForContainer），在显示容器视图的内容时将其变暗。连接第一个视图控制器内的插座

2. 当第一个 VC 加载时隐藏此视图

3. 单击按钮时取消隐藏

4. 要在显示容器视图内容时使此视图变暗，请将视图背景设置为黑色，将不透明度设置为 30%

You will get this effect when you click on the Button

当您单击按钮时，您将获得此效果

回答by User-1070892

You can do this to add any other subview to the view controller. First set the status bar to None for the ViewController which you want to add as subview so that you can resize to whatever you want. Then create a button in Present View controller and a method for button click. In the method:

您可以这样做以将任何其他子视图添加到视图控制器。首先将要添加为子视图的 ViewController 的状态栏设置为“无”，以便您可以调整到任何您想要的大小。然后在 Present View 控制器中创建一个按钮和一个按钮单击方法。在方法中：

- (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];
}

Hope this helps, feel free to ask if any queries...

希望能帮到你，有什么问题欢迎追问...