Come implementare UIVisualEffectView in UITableView con adaptive sfocia

Vorrei implementare UIVisualEffectView per applicare un effetto di sfocatura a vista per mostrare la vista che si trova dietro di esso.

Questo punto di vista che dovrebbe avere il proprio sfondo sfocato è un UITableViewController che è incorporato in un UINavigationController, e verrà presentato in un popover su iPad o sarà presentato schermo intero modale su iPhone, grazie a iOS 8 adaptive sfocia (Presente come Popover). Quando questa view controller è in un popover voglio lo sfondo sfocatura cosa c’è sotto il popover, e quando si è presentata in pieno schermo voglio lo sfondo sfocatura precedente view controller.

Ho cercato di attuare questo e non hanno avuto successo. Non riesco nemmeno a ottenere l’effetto di sfocatura a lavorare per il popover. Ho pensato che questo codice dovrebbe fare il trucco:

//In viewDidLoad on the UITableViewController subclass:
let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
effectView.frame = tableView.frame
tableView.addSubview(effectView)

Ho anche provato ad aggiungere la sottoview per il tableView.backgroundView, ho provato impostando il backgroundView a mio effectView, ho provato ad usare il layout automatico vincoli, invece di impostare il frame, ma nulla ha funzionato. Mi potete aiutare a realizzare il comportamento desiderato?

Un esempio di quello che sto cercando di ottenere:

iPad popover:

Come implementare UIVisualEffectView in UITableView con adaptive sfocia

iPhone modale presentazione:

Come implementare UIVisualEffectView in UITableView con adaptive sfocia

InformationsquelleAutor Jordan H | 2014-06-26



4 Replies
  1. 47

    Ho finalmente trovato una soluzione. Ho dovuto creare due distinte sfocia – uno per un Popover Presentazione che viene chiamato solo su iPad, e le altre modale segue con Stile di Presentazione impostato Su Full Screen (che è importante) per iPhone.

    Nella tabella view controller che sta per essere presentato, in viewDidLoad, il presente codice si applica il desiderato effetto di sfocatura (e bonus, solo se non hanno disabilitato gli effetti di trasparenza):

    if (!UIAccessibilityIsReduceTransparencyEnabled()) {
        tableView.backgroundColor = UIColor.clear
        let blurEffect = UIBlurEffect(style: .light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        tableView.backgroundView = blurEffectView
    
        //if inside a popover
        if let popover = navigationController?.popoverPresentationController {
            popover.backgroundColor = UIColor.clear
        }
    
        //if you want translucent vibrant table view separator lines
        tableView.separatorEffect = UIVibrancyEffect(blurEffect: blurEffect)
    }

    Questo provoca la tabella di sfondo per apparire esattamente come avviene negli screenshot. Il trucco per iPhone è stato per assicurarsi che sia presentata oltre lo schermo, mentre il trucco per iPad è stato quello di rimuovere il backgroundColor in popoverPresentationController.

    • Non sto vedendo il “Su” Schermo Intero stile di presentazione. È che iOS 8?
    • Sì. Adaptive sfocia (e altre Api utilizzati nella soluzione) sono disponibili solo su iOS 8+.
    • Ho anche notato che l’iPad 2 e iPad Retina simulatori non mostra sbavature, rende la visualizzazione solo semi trasparente. Tutti gli altri simulatori di funzionare bene, tra cui iPhone 4s. Basta non farsi prendere da questo, come ho pensato che UIVisualEffectView non funziona
    • che cosa circa le cellule?
    • impostare il loro background per UIColor.clearColor()
    • L’ho già provato, solo che si fondono con lo sfondo. Ho poi aggiunto un ExtraLight effetto a tutte le cellule, si attaccano, ma ancora guardare bene. Provare
    • Oh, se voleva guardare come l’iPhone schermata poi devi utilizzare alfa 0 per il colore di sfondo, ma per qualcosa come l’iPad schermata è possibile utilizzare il colore bianco con il vostro desiderato alfa, non c’è bisogno di aggiungere altro effetto per le celle a meno che non si sta cercando di ottenere un aspetto diverso.
    • Hai ragione. Per la maggior parte dei casi sfondo trasparente è abbastanza, stavo facendo sembrare le Mappe.app schermata info
    • Ho notato che se si imposta lo sfondo chiaro, non c’è bisogno di aggiungere una sfocatura per popovers
    • Inoltre, è possibile utilizzare i metodi adattivi invece di creare 2 sfocia. Fatemi sapere se volete un esempio di codice
    • sentitevi liberi di aggiungere una risposta
    • fatto! Spero che aiuta
    • Ho dovuto aggiungere tableView.separatorColor = UIColor.clearColor() per il separatore vibrante con effetto a lavorare su iPad.
    • Aggiungendo che rende le cellule saltare durante lo scorrimento. Perché è che?
    • Se il popover sfondo è di colore chiaro, quindi il popover freccia non appaiono, almeno per me.

  2. 6

    Un esempio veloce per aggiungere la sfocatura utilizzando l’Adattività:

    extension ViewController: UIPopoverPresentationControllerDelegate {
    
     override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    
        //Grab the destination view controller and set the presentation delegate
        let viewController = segue.destinationViewController as UIViewController
        viewController.popoverPresentationController?.delegate = self
        viewController.presentationController?.delegate = self
      }
    
      //Note: Only called for FormSheet and Popover
      func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
        switch controller.presentedViewController {
        case let vc as PopoverViewController:
          return .None //Keep the popover in Compact screens
        default:
          return .OverFullScreen
        }
      }
    
      func presentationController(controller: UIPresentationController, viewControllerForAdaptivePresentationStyle style: UIModalPresentationStyle) -> UIViewController? {
        //This is a custom method on UIViewController
        controller.presentedViewController.createBlur()
    
        //Wrap in a Navigation Controller, the controller should add a title and bar buttons
        if !(presentedViewController is UINavigationController) {
          return UINavigationController(rootViewController: presentedViewController)
        }
      }
    }
    
    extension UIViewController {
      func createBlur(effectStyle: UIBlurEffectStyle = .Light) {
        if !UIAccessibilityIsReduceTransparencyEnabled() {
          view.backgroundColor = UIColor.clearColor()
    
          let blurView = UIVisualEffectView(effect: UIBlurEffect(style: effectStyle))
          blurView.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
          blurView.frame = view.bounds
    
          view.insertSubview(blurView, atIndex: 0)
        }
      }
    }
    
    extension UITableViewController {
      override func createBlur(effectStyle: UIBlurEffectStyle = defaultBlurEffectStyle) {
        if !UIAccessibilityIsReduceTransparencyEnabled() {
          tableView.backgroundColor = UIColor.clearColor()
    
          let blurEffect = UIBlurEffect(style: effectStyle)      
          tableView.backgroundView = UIVisualEffectView(effect: blurEffect)
          tableView.separatorEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
        }
      }
    }
  3. 5

    Leggermente in ritardo al tavolo con questo, ma la soluzione migliore per me (in ios8 +), era di prendere un UIVisualEffectView nello Storyboard e renderlo il principale vista del mio ViewController. Quindi aggiungere il mio tableview che

    Come implementare UIVisualEffectView in UITableView con adaptive sfocia

    Per trovare l’Effetto Visivo, andare ai Componenti Selettore (non sono sicuro di quello senza nome) in basso a destra e di ricerca per VisualEffectView

    Come implementare UIVisualEffectView in UITableView con adaptive sfocia

    Questo mi sembra un modo molto più semplice per andare su di esso, e cade in linea con Apple raccomandazione di fare molto su Storyboard possibile

  4. 0

    Una piccola modifica per IOS 10 Swift 3

    if #available(iOS 10.0, *) {
            let blurEffect = UIBlurEffect(style: .prominent)
            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            groupTable.backgroundView = blurEffectView
    
        } else {
            let blurEffect = UIBlurEffect(style: .dark)
            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            groupTable.backgroundView = blurEffectView
    
        }

Lascia un commento