Добавить рамку вокруг выбранного элемента панели вкладок

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) ДобавитьimageView в tabBar, как показано ниже.В 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)
    }
}