Aggiungere una linea come indicatore di selezione a un UITabbarItem in Swift

Question

Desidero utilizzare una linea spessa nella parte inferiore di un UITabbarItems come indicatore di selezione. A causa del fatto che l'app deve funzionare su diverse dimensioni del telefono, non posso usare un'immagine come indicatore di selezione. Ecco perché penso di dover usare Swift per farlo. (La linea deve essere 1/3 della larghezza della pagina).

Ho provato a utilizzare UITabBarItem.appearance() ma senza successo.

Answer 1

Ho risolto il mio problema.

caratteristiche di questo piccolo frammento di codice:

• larghezza è dinamico
• è animato

• è molto più personalizzabile per le funzionalità future

  class FirstViewController: UIViewController { 
  
  let rectShape = CAShapeLayer() 
  let indicatorHeight: CGFloat = 5 
  var indicatorWidth: CGFloat! 
  let indicatorBottomMargin: CGFloat = 2 
  let indicatorLeftMargin: CGFloat = 2 
  
  override func viewDidLoad() { 
      super.viewDidLoad() 
  
      // setup tabbar indicator 
      rectShape.fillColor = UIColor.redColor().CGColor 
      indicatorWidth = view.bounds.maxX/2 // count of items 
      self.tabBarController!.view.layer.addSublayer(rectShape) 
      self.tabBarController?.delegate = self 
  
      // initial position 
      updateTabbarIndicatorBySelectedTabIndex(0) 
  } 
  
  func updateTabbarIndicatorBySelectedTabIndex(index: Int) -> Void 
  { 
      let updatedBounds = CGRect(x: CGFloat(index) * (indicatorWidth + indicatorLeftMargin), 
             y: view.bounds.maxY - indicatorHeight, 
             width: indicatorWidth - indicatorLeftMargin, 
             height: indicatorHeight) 
  
      let path = CGPathCreateMutable() 
      CGPathAddRect(path, nil, updatedBounds) 
      rectShape.path = path 
  } 
  } 
  
  extension FirstViewController: UITabBarControllerDelegate { 
  
  func tabBarController(tabBarController: UITabBarController, didSelectViewController viewController: UIViewController) { 
      updateTabbarIndicatorBySelectedTabIndex(tabBarController.selectedIndex) 
  } 
  } 
  

Answer 2

È possibile farlo aggiungendo un'immagine personalizzata, che verrà creata nel codice, a selectionIndicatorImage sull'oggetto UITabBar. Ad esempio è possibile creare extension per UIImage classe come questa:

extension UIImage { 
    func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage { 
     UIGraphicsBeginImageContextWithOptions(size, false, 0) 
     color.setFill() 
     UIRectFill(CGRectMake(0, size.height - lineWidth, size.width, lineWidth)) 
     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     return image 
    } 
} 

e chiamarlo nel tuo primo caricato ViewController come questo:

class FirstViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     let tabBar = self.tabBarController!.tabBar 
     tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(UIColor.blueColor(), size: CGSizeMake(tabBar.frame.width/CGFloat(tabBar.items!.count), tabBar.frame.height), lineWidth: 2.0) 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 
} 

In questo risultato caso sarà simile a questo:

Answer 3

Swift 3:

extension UIImage { 
    func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage { 
     UIGraphicsBeginImageContextWithOptions(size, false, 0) 
     color.setFill() 
     UIRectFill(CGRect(origin: CGPoint(x: 0,y :size.height - lineWidth), size: CGSize(width: size.width, height: lineWidth))) 
     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     return image! 
    } 
} 

override func viewDidLoad() { 
    super.viewDidLoad() 
    let tabBar = self.tabBarController!.tabBar 
    tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineWidth: 2.0) 
}