Menu dalla barra delle schede nello storyboard

Question

Al momento ho una barra delle schede standard, quando toccato passa alla sua viewController corrispondente. Ma voglio far uscire un menu dalla barra delle schede quando viene selezionata una scheda, come mostrato nell'immagine qui sotto.

È qualche suggerimento per implementare questo? Grazie in anticipo.

Answer 1

La sua non buona interfaccia utente, ma anche se si desidera.

Prima di tutto bisogna implementare metodo delegato di UITabbarControllerDelegate come di seguito

func tabBarController(_ tabBarController: UITabBarController, shouldSelect 
viewController: UIViewController) -> Bool { 

    if viewController.classForCoder == moreViewController.self 
    { 
     let popvc = MoreSubMenuViews(nibName: "MoreSubMenuViews", bundle: Bundle.main) 
     self.addChildViewController(popvc) 

     let tabbarHeight = tabBar.frame.height 
     let estimatedWidth:CGFloat = 200.0 
     let estimatedHeight:CGFloat = 300.0 
     popvc.view.frame = CGRect(x:self.view.frame.width - estimatedWidth, y: self.view.frame.height - estimatedHeight - tabbarHeight, width: estimatedWidth, height: estimatedHeight) 

     self.view.addSubview(popvc.view) 

     popvc.didMove(toParentViewController: self) 

     print("sorry stop here") 
     return true // if you want not to select return false here 

    }else{ 

     //remove popup logic here if opened 
     return true 
    } 
} 

Qui moreViewController è ultimo controller scheda & MoreSubMenuViews è il file/XI ter pennino che contiene i pulsanti mostrati in voi l'immagine.

Answer 2

ti consiglierei di farlo:

In primo luogo, si dovrebbe pensare a tutti i tipi di tabulazione che potrebbero essere nella barra delle schede. Sul tuo screenshot ci sono le schede, il controller presente e la scheda, che presenta il menu. Quindi potremmo creare enum con tutti questi tipi:

enum TabType { 
    case controller 
    case menu 
} 

Dopo di che è possibile memorizzare gamma di tipi di tabulazione in ordine in cui sono mostrati nella barra delle schede, per il vostro screenshot in questo modo

let tabTypes: [TabType] = [.controller, .controller, .controller, .controller, .menu] 

allora si dovrebbe implementare il metodo UITabBarControllerDelegatefunc tabBarController(_:, shouldSelect:) -> Bool, che restituisce true se la barra delle schede consente di selezionare il controller passato e false in caso contrario.

Se si restituisce true di tutti gli altri lavori (come la presentazione di controller di visualizzazione e altre cose), il controller della barra delle schede lo farà per voi.

Nel tuo caso si desidera eseguire un'azione personalizzata sul clic della scheda, quindi è necessario restituire false. Prima di tornare dovresti presentare il tuo menu.

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool { 
    if let index = tabBarController.viewControllers?.index(of: viewController), 
     index < tabBarTypes.count { 
     let type = tabBarTypes[index] 
     switch type { 
     case .menu: 
      // perform your menu presenting here 
      return false 
     case .controller: 
      // do nothing, just return true, tab bar will do all work for you 
      return true 
     } 
    } 
    return true 
} 

In questa implementazione è possibile modificare facilmente ordinare tipi di tabulazione o aggiungere qualche tipo un'altra scheda e gestire opportuno.

Answer 3

Invece di visualizzare un menu, è possibile utilizzare una vista a schede scorrevoli per un'interfaccia utente migliore. Se si preferisce utilizzare una libreria, here's, è possibile implementare una semplice barra delle schede scorrevole.

Answer 4

Si tratta di un abuso del layout dei pattern dell'interfaccia utente in Apples HIG. In particolare:

Utilizzare una barra di tabulazione esclusivamente per la navigazione. I pulsanti della barra delle schede non devono essere utilizzati per eseguire azioni. Se è necessario fornire controlli che agiscono sugli elementi nella vista corrente, utilizzare invece una barra degli strumenti.

Questo controllo deve essere utilizzato per appiattire la gerarchia dell'app. Sembra che in questo caso si mescoli la funzionalità del pulsante. A volte seleziona un controller di visualizzazione separato, a volte visualizza un elenco di azioni. Questa è una situazione confusa per gli utenti e dovrebbe essere evitata.

Un modo per raggiungere questo obiettivo e continuare ad aderire a HIG è utilizzando la barra di navigazione o le barre degli strumenti. Importa questo controllo in un pulsante della barra degli strumenti. Il caso più semplice sarebbe quello di invocare uno UIActionController con lo stile .actionSheet selezionato.

Answer 5

Come per la mia comprensione, quello che vuoi è che, la scheda 1 è selezionata e l'utente va alla scheda 5 quindi lo sfondo sarà tab 1 & vice-versa per tab 2,3 & 4 e ci dovrebbe essere pop-up come pulsanti come mostrato nella tua immagine. Per favore correggimi se sbaglio.

Per questo è necessario acquisire l'immagine mentre l'utente naviga tra le schede.

Di seguito riportiamo il codice in AppDelegate,

var currentImage: UIImage! //It will be public variable

TabBar metodi delegato,

func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { 
    if tabBarController.selectedIndex == 4 { 
     let moreVC = tabBarController.selectedViewController as! MoreVC 
     moreVC.currentImage = currentImage 
    } 
} 

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool { 
    if tabBarController.selectedIndex != 4 { 
     let navController = tabBarController.selectedViewController as! UINavigationController 
     let viewController = navController.viewControllers.last 
     currentImage = Common.imageWithView(inView: (viewController?.navigationController?.view)!) //UIImage(view: (viewController?.navigationController?.view)!) 
    } 

    return true 
} 

Qui ho preso statico 4 come ultimo indice scheda & MoreVC sarà l'Associated ViewController of tab index 4.

Commo Classe N per ottenere l'immagine dalla vista,

class Common { 
    static func imageWithView(inView: UIView) -> UIImage? { 
     UIGraphicsBeginImageContextWithOptions(inView.bounds.size, inView.isOpaque, 0.0) 
     defer { UIGraphicsEndImageContext() } 
     if let context = UIGraphicsGetCurrentContext() { 
      inView.layer.render(in: context) 
      let image = UIGraphicsGetImageFromCurrentImageContext() 
      return image 
     } 
     return nil 
    } 
} 

Si prega di trovare MoreVC,

@IBOutlet weak var imageView: UIImageView! 

var currentImage: UIImage! { 
    didSet { 
     imageView.image = currentImage 
    } 
} 

Qui di seguito trovate l'immagine per MoreVC Storyboard. Guarda che non contiene NavigationController come tutti gli altri ViewControllers.

Fammi sapere in caso di qualsiasi domanda.

Answer 6

1) Creare una "Tab5ViewController" e utilizzare questo:

static func takeScreenshot(bottomPadding padding: CGFloat = 0) -> UIImage? { 
     let layer = UIApplication.shared.keyWindow!.layer 
     let scale = UIScreen.main.scale 
     UIGraphicsBeginImageContextWithOptions(CGSize(width: layer.frame.size.width, height: layer.frame.size.height - padding), false, scale) 

     guard let context = UIGraphicsGetCurrentContext() else { return nil } 
     layer.render(in: context) 
     let screenshot = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     return screenshot 
    } 

Utilizzare la schermata come immagine di sfondo per il vostro "Tab5ViewController"

2) Nella tua "Tab5ViewController" è possibile avere il componente dello stack (le schede aggiuntive) e quindi aggiungere/rimuovere i controller di visualizzazione figlio in base alla selezione

3) casi di bordi fissi (come la selezione della scheda evidenziazione e così via ...)