iOS: Modal ViewController dengan latar belakang transparan

Saya mencoba menghadirkan pengontrol tampilan secara modern, dengan latar belakang transparan. Tujuan saya adalah membiarkan tampilan pengontrol tampilan yang disajikan dan disajikan ditampilkan pada saat yang bersamaan. Masalahnya adalah, ketika animasi presentasi selesai, tampilan pengendali tampilan presentasi menghilang.

- (IBAction)pushModalViewControllerButtonPressed:(id)sender
{
    ModalViewController *modalVC = [[ModalViewController alloc] init];
    [self presentViewController:modalVC animated:YES completion:nil];
}

Saya tahu saya bisa menambahkan tampilan sebagai subview, tetapi saya ingin menghindari solusi ini karena beberapa alasan. Bagaimana saya bisa memperbaikinya?

Kode berikut ini hanya berfungsi di iPad.

self.view.backgroundColor = [UIColor clearColor];
self.modalPresentationStyle = UIModalPresentationCurrentContext;
[self presentModalViewController:modalVC animated:YES];

Saya akan menambahkan sub tampilan.

Ini diskusi yang sangat bagus. Lihatlah komentar secara khusus. Bukan hanya jawabannya.

Modal View

Jika aku jadi kamu, aku tidak akan melakukannya. Saya akan menambahkan tampilan sub dan melakukannya. Tampaknya memberi saya kontrol yang lebih baik terhadap banyak hal.

EDIT:

Seperti yang disebutkan oleh Paul Linsay, karena iOS 8 yang dibutuhkan hanyalah UIModalPresentationOverFullScreenmodalPresentationStyle dari ViewController yang disajikan. Ini juga akan mencakup tombol navigationBar dan tabBar.

Bagi orang yang mencoba untuk mendapatkan ini untuk bekerja di iOS 8, "Apple-disetujui" cara untuk menampilkan transparan controller tampilan modal adalah dengan menetapkan modalPresentationStyle pada saat ed kontroler untuk UIModalPresentationOverCurrentContext.

Ini bisa dilakukan dalam kode, atau dengan mengatur properti segue di storyboard.

Dari dokumentasi UIViewController:

UIModalPresentationOverCurrentContext

Gaya presentasi di mana konten ditampilkan hanya atas konten pengontrol tampilan induk. Tampilan di bawah konten yang disajikan tidak dihapus dari hierarki tampilan ketika presentasi selesai. Jadi jika pengendali tampilan yang disajikan tidak mengisi layar dengan konten buram, konten yang mendasarinya akan terlihat.

Saat menyajikan pengontrol tampilan dalam popover, gaya presentasi ini hanya didukung jika gaya transisi adalah UIModalTransitionStyleCoverVertical. Mencoba menggunakan gaya transisi yang berbeda memicu pengecualian. Namun, Anda dapat menggunakan gaya transisi lain (kecuali transisi ikal parsial) jika pengontrol tampilan induk tidak dalam popover.

Tersedia di iOS 8.0 dan yang lebih baru.

https://developer.apple.com/documentation/uikit/uiviewcontroller

Video 'View Controller Advancements in iOS 8' dari WWDC 2014 menjelaskan hal ini secara terperinci.

catatan:

• Pastikan untuk memberikan pengontrol tampilan Anda warna latar belakang yang jelas, jangan sampai itu benar-benar tembus pandang!
• Anda harus mengatur ini sebelum mempresentasikan yaitu pengaturan parameter ini di viewDidLoaddari the disajikanViewController tidak akan mempengaruhi

Di iOS 8.0 dan di atas dapat dilakukan dengan menyetel properti modalPresentationStyle untuk UIModalPresentationOverCurrentContext

//Set property **definesPresentationContext** YES to avoid presenting over presenting-viewController's navigation bar

self.definesPresentationContext = YES; //self is presenting view controller
presentedController.view.backgroundColor = [YOUR_COLOR with alpha OR clearColor]
presentedController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:presentedController animated:YES completion:nil];

Kode ini berfungsi dengan baik di iPhone di bawah iOS6 dan iOS7:

presentedVC.view.backgroundColor = YOUR_COLOR; // can be with 'alpha'
presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
[presentingVC presentViewController:presentedVC animated:YES completion:NULL];

Dalam hal ini Anda kehilangan animasi slide-on. Untuk mempertahankan animasi, Anda masih dapat menggunakan ekstensi "tidak elegan" berikut:

[presentingVC presentViewController:presentedVC animated:YES completion:^{
    [presentedVC dismissViewControllerAnimated:NO completion:^{
        presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
        [presentingVC presentViewController:presentedVC animated:NO completion:NULL];
    }];
}];

Jika presentingV kami terletak di dalam UINavigationController atau UITabbarController, Anda harus beroperasi dengan pengendali itu sebagai presentingVC.

Selanjutnya, di iOS7 Anda dapat menerapkan UIViewControllerTransitioningDelegateprotokol penerapan animasi transisi kustom . Tentu saja, dalam hal ini Anda bisa mendapatkan latar belakang yang transparan

@interface ModalViewController : UIViewController <UIViewControllerTransitioningDelegate>

Pertama, sebelum presentasi Anda harus mengatur modalPresentationStyle

modalViewController.modalPresentationStyle = UIModalPresentationCustom;

Maka Anda harus menerapkan dua metode protokol

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    CustomAnimatedTransitioning *transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = YES;
    return transitioning;
}

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    CustomAnimatedTransitioning * transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = NO;
    return transitioning;
}

Hal terakhir adalah menentukan transisi khusus Anda di CustomAnimatedTransitioningkelas

@interface CustomAnimatedTransitioning : NSObject <UIViewControllerAnimatedTransitioning>
@property (nonatomic) BOOL presenting;
@end

@implementation CurrentContextTransitionAnimator

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    return 0.25;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    if (self.presenting) {
        // custom presenting animation
    }
    else {
        // custom dismissing animation
    }
}

Saya sedikit kesulitan dengan Interface Builder dari XCode 7 untuk mengatur Gaya Presentasi seperti yang disarankan @VuuGopalTewari. Dalam versi ini, sepertinya tidak ada mode presentasi Over Current Contextatau Over Full Screenuntuk segue. Jadi, untuk membuatnya bekerja, saya mengatur mode ke Default:

dengan

Selain itu saya mengatur mode presentasi dari pengontrol tampilan yang disajikan secara digital ke Over Full Screen:

Buat segue untuk mempresentasikan secara modern dan setel properti Presentasi dari segue ke konteks saat ini, ia akan bekerja 100%

PresentViewController dengan latar belakang Transparan - di iOS 8 dan iOS 9

MYViewController *myVC = [self.storyboard   instantiateViewControllerWithIdentifier:@"MYViewController"];
    myVC.providesPresentationContextTransitionStyle = YES;
    myVC.definesPresentationContext = YES;
    [myVC setModalPresentationStyle:UIModalPresentationOverCurrentContext];
    [self.navigationController presentViewController:myVC animated:YES completion:nil];

Dan di MYViewController mengatur warna latar belakang hitam dan mengurangi opacity

Ini sedikit cara hacky, tetapi bagi saya kode ini berfungsi (iOS 6):

AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];

[self presentViewController:self.signInViewController animated:YES completion:^{
    [self.signInViewController dismissViewControllerAnimated:NO completion:^{
        appDelegate.window.rootViewController.modalPresentationStyle = UIModalPresentationCurrentContext;
        [self presentViewController:self.signInViewController animated:NO completion:nil];
        appDelegate.window.rootViewController.modalPresentationStyle = UIModalPresentationFullScreen;

    }];
}];

Kode ini juga berfungsi di iPhone

Kategori ini cocok untuk saya (ios 7, 8 dan 9)

File H

@interface UIViewController (navigation)
- (void) presentTransparentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion;
@end

File M.

@implementation UIViewController (navigation)
- (void)presentTransparentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion
{
    if(SYSTEM_VERSION_LESS_THAN(@"8.0")) {
        [self presentIOS7TransparentController:viewControllerToPresent withCompletion:completion];

    }else{
        viewControllerToPresent.modalPresentationStyle = UIModalPresentationOverCurrentContext;
         [self presentViewController:viewControllerToPresent animated:YES completion:completion];
    }
}
-(void)presentIOS7TransparentController:(UIViewController *)viewControllerToPresent withCompletion:(void(^)(void))completion
{
    UIViewController *presentingVC = self;
    UIViewController *root = self;
    while (root.parentViewController) {
        root = root.parentViewController;
    }
    UIModalPresentationStyle orginalStyle = root.modalPresentationStyle;
    root.modalPresentationStyle = UIModalPresentationCurrentContext;
    [presentingVC presentViewController:viewControllerToPresent animated:YES completion:^{
        root.modalPresentationStyle = orginalStyle;
    }];
}
@end

Solusi untuk jawaban ini menggunakan swift adalah sebagai berikut.

let vc = MyViewController()
vc.view.backgroundColor = UIColor.clear // or whatever color.
vc.modalPresentationStyle = .overCurrentContext
present(vc, animated: true, completion: nil)

Jika Anda menggunakan Storyboard, Anda dapat mengikuti langkah ini:

1. Tambahkan view controller (V2), atur UI seperti yang Anda inginkan

• tambahkan UIView - set latar belakang menjadi hitam dan opacity menjadi 0,5
• tambahkan UIView lain (2) - yang akan berfungsi sebagai popup Anda (Harap perhatikan bahwa UIView dan UIView (2) harus memiliki level / hierarki yang sama. Jangan membuat imageview sebagai tampilan anak, jika tidak opacity dari uiview akan mempengaruhi UIView (2))

2. Hadir V2 Secara Modis

3. Klik segue. Di inspektur Atribut, Tetapkan Presentasi sebagai Atas Layar Penuh . Hapus animasi jika Anda mau

4. Pilih V2. Di inspektur Atribut, Tetapkan Presentasi sebagai Atas Layar Penuh . Periksa Definisikan Konteks dan Berikan Konteks

5. Pilih MainView dari V2 Anda (Pls. Periksa gambar). Atur backgroundColor ke Clear Color

Saya menambahkan tiga baris ini dalam metode init di controller tampilan yang disajikan, dan bekerja seperti pesona:

self.providesPresentationContextTransitionStyle = YES;
self.definesPresentationContext = YES;
[self setModalPresentationStyle:UIModalPresentationOverCurrentContext];

EDIT (bekerja di iOS 9.3):

self.modalPresentationStyle = UIModalPresentationOverFullScreen;

Sesuai dokumentasi:

UIModalPresentationOverFullScreen Gaya tampilan tampilan di mana tampilan yang disajikan meliputi layar. Tampilan di bawah konten yang disajikan tidak dihapus dari hierarki tampilan ketika presentasi selesai. Jadi jika pengendali tampilan yang disajikan tidak mengisi layar dengan konten buram, konten yang mendasarinya akan terlihat.

Tersedia di iOS 8.0 dan yang lebih baru.

Cara alternatif adalah dengan menggunakan "tampilan wadah". Buat saja alpha di bawah 1 dan embed dengan seque. XCode 5, target iOS7. Diuji pada iPhone.

Tampilan kontainer tersedia dari iOS6. Tautan ke posting blog tentang itu.

Saya telah membuat objek untuk menangani presentasi dari apa yang saya sebut "modal superposed", yang berarti ia mempertahankan tampilan latar belakang dan memungkinkan Anda untuk memiliki modal dengan latar belakang transparan.

Ini memiliki satu, metode sederhana yang melakukan ini:

- (void)presentViewController:(UIViewController *)presentedViewController
       fromViewController:(UIViewController *)presentingViewController
{
    presentedViewController.modalPresentationStyle = UIModalPresentationCustom;
    presentedViewController.transitioningDelegate = self;
    presentedViewController.modalPresentationCapturesStatusBarAppearance = YES;

    [presentedViewController setNeedsStatusBarAppearanceUpdate];

    [presentingViewController presentViewController:presentedViewController
                                       animated:YES
                                     completion:nil];
}

Sangat penting untuk menyetel modalPresentationCapturesStatusBarAppearanceproperti ke YESdan memaksa tampilan bilah status untuk memperbarui, jika pengontrol tampilan yang disajikan Anda memiliki yang berbeda preferredStatusBarStyle.

Objek ini harus memiliki @property (assign, nonatommic) isPresenting

Anda ingin objek ini untuk memenuhi ke UIViewControllerAnimatedTransitioningdan UIViewControllerTransitioningDelegateprotokol dan menerapkan metode berikut:

- (id)animationControllerForPresentedController:(UIViewController *)presented
                           presentingController:(UIViewController *)presenting
                               sourceController:(UIViewController *)source
{
    self.isPresenting = YES;

    return self;
}

- (id)animationControllerForDismissedController:(UIViewController *)dismissed
{
    self.isPresenting = NO;

    return self;
}

dan:

- (NSTimeInterval)transitionDuration:(id)transitionContext
{
    return 0.25;
}

- (void)animateTransition:(id)transitionContext
{
    UIViewController* firstVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController* secondVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView* containerView = [transitionContext containerView];
    UIView* firstView = firstVC.view;
    UIView* secondView = secondVC.view;

    if (self.isPresenting) {
        [containerView addSubview:secondView];
        secondView.frame = (CGRect){
            containerView.frame.origin.x,
            containerView.frame.origin.y + containerView.frame.size.height,
            containerView.frame.size
        };

        firstView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
        [UIView animateWithDuration:0.25 animations:^{
            secondView.frame = containerView.frame;
        } completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
        }];
        } else {
        [UIView animateWithDuration:0.25 animations:^{
            firstView.frame = (CGRect){
                containerView.frame.origin.x,
                containerView.frame.origin.y + containerView.frame.size.height,
                containerView.frame.size
        };

        } completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
        }];
    }
}

Ini melakukan animasi slide-in-from-the-bottom meniru modal animasi default, tetapi Anda dapat membuatnya apa pun yang Anda inginkan.

Yang penting adalah bahwa pandangan pengendali tampilan presentasi akan tetap di belakang, membiarkan Anda membuat efek transparan.

Solusi ini berfungsi untuk iOS 7+

Cara yang sangat sederhana untuk melakukan ini (menggunakan Storyboards, misalnya) adalah:

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"SomeStoryboard" bundle:nil];
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SomeStoryboardViewController"];
// the key for what you're looking to do:
vc.modalPresentationStyle = UIModalPresentationOverCurrentContext;
vc.view.alpha = 0.50f;

[self presentViewController:vc animated:YES completion:^{
    // great success
}];

Hal ini akan menyajikan UIViewControllerdalam Storyboardmodally, tapi dengan latar belakang tembus.

Bekerja untuk iOS 7-10

if #available(iOS 8.0, *) {
    nextVC.modalPresentationStyle = .OverCurrentContext
    self.presentViewController(nextVC, animated: true, completion: nil)
} else {
    // Fallback on earlier version
    self.modalPresentationStyle = .Custom          
    nextVC.modalTransitionStyle = .CrossDissolve            
    self.presentViewController(nextVC, animated: false, completion: nil)
    }
}

Untuk merangkum semua jawaban dan komentar yang baik di sini dan masih memiliki animasi saat pindah ke yang baru, ViewControllerinilah yang saya lakukan: (Mendukung iOS 6 dan lebih tinggi)

Jika Anda menggunakan UINavigationController\ UITabBarControllerini adalah cara untuk pergi:

    SomeViewController *vcThatWillBeDisplayed = [self.storyboard instantiateViewControllerWithIdentifier:@"SomeVC"];

    vcThatWillBeDisplayed.view.backgroundColor = [UIColor colorWithRed: 255/255.0 green:255/255.0 blue:255/255.0 alpha:0.50];    

    self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
    [self presentViewController:presentedVC animated:YES completion:NULL];

Jika Anda melakukannya, Anda akan kehilangan modalTransitionStyleanimasi. Untuk mengatasinya Anda dapat dengan mudah menambahkan ke SomeViewControllerkelas Anda ini:

-(void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [UIView animateWithDuration:0.4 animations:^() {self.view.alpha = 1;}
       completion:^(BOOL finished){}];
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.alpha = 0;
}

Tentu saja Anda harus mengatur UIModalPresentationCurrentContext, tetapi tempat untuk mengatur clearColor juga sangat penting! Anda tidak dapat mengatur latar belakang dalam fungsi viewDidLoad, atur sebelum tampilan memuat seperti pada pengontrol tampilan root atau pada fungsi init dari pengontrol yang akan ditampilkan!

actionController.view.backgroundColor = [UIColor clearColor];
[self presentViewController:actionController animated:YES completion:nil];

atau

- (instancetype)init {

    self = [super initWithNibName:nil bundle:nil];

    if(self) {
        self.modalPresentationStyle = UIModalPresentationOverCurrentContext;
        [self.view setBackgroundColor:[UIColor clearColor]];
    }

    return self;
}

Jika Anda menggunakan modal segue, pastikan untuk mengaturnya sebagai gambar ini (Anda dapat mematikan animasi jika Anda mau)

Metode lengkap yang diuji pada iOS 7 dan iOS 8.

@interface UIViewController (MBOverCurrentContextModalPresenting)

/// @warning Some method of viewControllerToPresent will called twice before iOS 8, e.g. viewWillAppear:.
- (void)MBOverCurrentContextPresentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion;

@end

@implementation UIViewController (MBOverCurrentContextModalPresenting)

- (void)MBOverCurrentContextPresentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion {
    UIViewController *presentingVC = self;

    // iOS 8 before
    if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_7_1) {
        UIViewController *root = presentingVC;
        while (root.parentViewController) {
            root = root.parentViewController;
        }

        [presentingVC presentViewController:viewControllerToPresent animated:YES completion:^{
            [viewControllerToPresent dismissViewControllerAnimated:NO completion:^{
                UIModalPresentationStyle orginalStyle = root.modalPresentationStyle;
                if (orginalStyle != UIModalPresentationCurrentContext) {
                    root.modalPresentationStyle = UIModalPresentationCurrentContext;
                }
                [presentingVC presentViewController:viewControllerToPresent animated:NO completion:completion];
                if (orginalStyle != UIModalPresentationCurrentContext) {
                    root.modalPresentationStyle = orginalStyle;
                }
            }];
        }];
        return;
    }

    UIModalPresentationStyle orginalStyle = viewControllerToPresent.modalPresentationStyle;
    if (orginalStyle != UIModalPresentationOverCurrentContext) {
        viewControllerToPresent.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    }
    [presentingVC presentViewController:viewControllerToPresent animated:YES completion:completion];
    if (orginalStyle != UIModalPresentationOverCurrentContext) {
        viewControllerToPresent.modalPresentationStyle = orginalStyle;
    }
}

@end

Cepat 4.2

guard let someVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "someVC") as? someVC else {
    return
}
someVC.modalPresentationStyle = .overCurrentContext

present(someVC, animated: true, completion: nil)

di appdelegate:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [[_window rootViewController]setModalPresentationStyle:UIModalPresentationCurrentContext];
    return YES;
}

di Anda controller tampilan pertama dari mana Anda harus memuat tampilan berikutnya:

  NextViewController *customvc = [[NextViewController alloc]init];
    [self presentViewController:customvc animated:YES completion:^{

    }];

di nextViewController Anda yang akan ditambahkan transparan:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor clearColor];
    UIView* backView = [[UIView alloc] initWithFrame:self.view.frame];
    backView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
    [self.view insertSubview:backView atIndex:0];
}

Layar Login adalah modal, yang berarti ia duduk di atas layar sebelumnya. Sejauh ini kami memiliki Latar Belakang Kabur, tetapi tidak mengaburkan apa pun; itu hanya latar belakang abu-abu.

Kita perlu mengatur Modal kita dengan benar.

target tautan gambar

• Pertama, kita perlu mengubah latar belakang View Controller's View menjadi Clear color. Ini berarti harus transparan. Secara default, tampilan itu berwarna putih.

• Kedua, kita perlu memilih Segue yang mengarah ke layar Login, dan di Inspektur Atribut, atur Presentation ke Over Current Context. Opsi ini hanya tersedia jika Tata Letak Otomatis dan Kelas Ukuran diaktifkan.

target tautan gambar

Atur navigasi modalPresentationStylemenjadiUIModalPresentationCustom

dan mengatur warna latar belakang pengendali tampilan yang disajikan sebagai warna bening.