在所选标签栏项周围添加一个框

Question

我想做的事情就是在用户选择的标签栏项目周围出现一个方框或圆圈，而不仅仅是更改颜色。这是否可能，如果是这样，怎么样？提前谢谢。

Answer 1

有多种方法可以实现这一目标。我将在下面列出其中的3个。

1）您可以在selectionIndicatorImage中设置AppDelegate，

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    UITabBar.appearance().selectionIndicatorImage = #imageLiteral(resourceName: "boxImage")
    return true
} 

对于剩下的2个，您必须创建一个UITabBarController的子类，如下所示，并在storyboard中为tabBarController

设置此类

class MyTabBarViewController: UITabBarController {

}

2）在此方法中，您必须让设计师使用框创建所选图像。在viewDidAppear中设置如下所示的未选择/正常和所选图像，您就完成了。

3）在tabBar中添加imageView，如下所示。在storyboard中，您可以为每个tag项目分配tabBar，以便在didSelect item回调中，我们会将该标记视为所选项目的索引。让我们考虑你有5个tabBar项目，你从0到4分配了标签。现在你将获得标签并更新位置，如下所示

class MyTabBarViewController: UITabBarController {

    // MARK: - Properties
    let imageView = UIImageView(image: #imageLiteral(resourceName: "boxImage"))

    // MARK: View's Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()

        self.tabBar.addSubview(imageView)
    }

    /// Tabbar item selection callback
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        updateImagePosition(at: item.tag + 1)
    }

    private func updateImagePosition(at index: Int) {
        guard let count = tabBar.items?.count else { return }

        let eachItemWidth = view.bounds.width/CGFloat(count)

        let selectedItemX = (eachItemWidth * CGFloat(index)) - eachItemWidth/2 - imageView.frame.width/2
        let selectedItemY = tabBar.bounds.height/2 - imageView.frame.height/2

        imageView.frame.origin = CGPoint(x: selectedItemX, y: selectedItemY)
    }
}