将一行作为选择指示符添加到Swift中的UITabbarItem

Question

我想在UITabbarItems底部使用粗线作为选择指示器.由于应用程序必须适用于不同的手机尺寸,我无法使用图像作为选择指示器.这就是为什么我认为我必须使用Swift来做到这一点.(该行必须是页面宽度的1/3).

我尝试使用UITabBarItem.appearance()但没有成功.

Answer 1

你可以这样做与添加自定义图像,将在你的代码中创建,以selectionIndicatorImage您的UITabBar对象.例如,您可以像这样extension为UIImage类创建:

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
    }
}

并在你第一次加载时调用它ViewController:

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.
    }
}

在这种情况下,结果将是这样的:

Answer 2

斯威夫特3:

extension UIImage {
    func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(origin: CGPoint(x: 0,y :size.height - lineHeight), size: CGSize(width: size.width, height: lineHeight)))
        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), lineHeight: 2.0)
}

Answer 3

雨燕4.x
Xcode 10.x

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

使用

tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: BLUE, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height:  tabBar.frame.height), lineWidth: 2.0)

Answer 4

我解决了我的问题。

这个小代码片段的特点：

• 宽度是动态的
• 它是动画的

• 它可以为未来的功能提供更多的可定制性

  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)
  }
  }