如何实现这种外观/视图外观？

Question

In the App Store, multiple app icons are displayed as in this screenshot.

On tapping one of the app icons, we get a view that shows us the app details, while dimming the rest of the view. Tapping anywhere outside the view, dismisses it.

How do I achieve this effect?

From what I have understood, it is not a view controller with a modal or a popover segue. Neither is it a Show or Show Detail segue.

---

My guess is that they are doing it by

1. creating someView
2. overlaying a black fullscreen view on screen 1 with 50% opacity
3. setting someView.hidden = false and positioning it above the translucent layer
4. adding a tap gesture recognizer 'dismissSomeView' which will hide the view again and remove the translucent layer as well

Please correct me if I am wrong, and if there is a better/ Apple-approved way to accomplish it.

---

I am trying to achieve this effect on an iPhone, with support for iOS 8 and 9.

Answer 1

After I posted the question, I found the best answer soon after.

The above effect is achieved in the following way:

1. The App Store main view is considered the presenting view controller .

2. The individual app details is presented in a view with its own view controller. This is the presented view controller . The segue is chosen to be Present Modally . In its own prepareForSegue: method, the presenting view controller sets the transitioning delegate (explained below) of this view controller, and sets the modalPresentationStyle to be .Custom .

3. The presented view controller has a transitioning delegate object , which conforms to the UIViewControllerTransitioningDelegate protocol.

4. This delegate has methods which point to a presentation controller and an animator object. (details of this step are available below).

5. The custom animator object is a class that conforms to UIViewControllerAnimatedTransitioning protocol. It determines how the presented view controller is animated in and out of view.

6. The custom presentation controller (of UIPresentationController class) is the one that determines the size and position of the presented view controller. It also is in charge of presenting the dimming chrome/view. There are option to animate the dimming view along with the transitioning animations of the presented view controller.

---

Step 4 details: The rather wordy method names are presentationControllerForPresentedViewController(_ presented: UIViewController, presentingViewController presenting: UIViewController!, sourceViewController source: UIViewController) -> UIPresentationController? and animationControllerForPresentedController(_ presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? respectively.

---

This link explains it better than I could possibly do it: https://www.shinobicontrols.com/blog/ios8-day-by-day-day-24-presentation-controllers

---

And for a video tutorial of achieving a similar effect using Presentation Controllers, watch the second half of the video 'A Look Inside Presentation Controllers' from last year's WWDC: https://developer.apple.com/videos/wwdc/2014/

Answer 2

Build a white CustomedView with white background color in the center.

Build a UIView with black background, about transparent 70%.

Add the customedView to maskView, add the maskView to self.view.

MyCustomedView *topView = [[MyCustomedView alloc] initWithFrame:CGRectMake(50, 150, self.view.frame.size.width - 100, self.view.frame.size.height - 300)];
[maskView addSubview:topView];

UIView *maskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
maskView.backgroundColor = [UIColor blackColor];
maskView.alpha = 0.75;
[self.view addSubview:maskView];

When you click one of the icons in the UICollectionViewController, It trigers to do some like things like that. and pass some parameter, like name, descriptions.

This is just my thought, you can do with your idea. Hope this can help you.

Answer 3

Create a segue in the storyboard with the following parameters:

SEGUE: Present Modally

PRESENTATION: Form Sheet

TRANSITION: Default

animates checked

Note: This effect is achievable in Ipad. To have similar effect in iphone you need to override trait collection.