Custom UITabBarControlelr design

Question

I am trying to duplicate this UITabBarController indicator at the botton of the tab bar image icon. The indicator follows the tab that is selected and interactively moves under the current selected tab. I have searched on Github but I cannot find one that is similar. I would like any advice on how I can get started on creating a similar indicater that moves interactively or if anyone knows any similar libraries.

Kevvv · Accepted Answer · 2020-12-11T04:03:18.523

I created the animated indicator with the CALayer's implicit animation. The actual process of turning this into a custom tab bar is a bit more involved, but at least you could use this as a reference:

import UIKit
import PlaygroundSupport

class ViewController : UIViewController {
    let frame = CGRect(origin: .init(x: 0, y: 100), size: .init(width: 400, height: 100))
    lazy var stackview = UIStackView(frame: frame)
    let layer = CALayer()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(stackview)
        self.stackview.distribution = .fillEqually
        self.stackview.layer.addSublayer(layer)
        
        for _ in 1...4 {
            let v = UIView()
            v.layer.borderWidth = 1
            let tap = UITapGestureRecognizer(target: self, action:  #selector(tapped))
            v.addGestureRecognizer(tap)
            self.stackview.addArrangedSubview(v)
        }
        
        self.layer.backgroundColor = UIColor.cyan.cgColor
        self.layer.frame = CGRect(origin: .zero, size: .init(width: 40, height: 10))
        let initialPosition = self.stackview.subviews[0].center
        self.layer.position = initialPosition
    }
    
    @objc func tapped(_ sender: UITapGestureRecognizer) {
        guard let v = sender.view else { return }
        let center = v.center
        self.layer.position = center
    }
}

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = ViewController()

this is added inside UIViewController or UITabBarController? Im unable to get it to run. — soRazor, Dec 11 '20 at 04:01
Copy the entire code and paste it into the Swift Playground. This is just the animation of the indicator that corresponds with the tap gesture. You'll have to incorporate this into this into your `UITabBar`. — Kevvv, Dec 11 '20 at 04:05
It looks great and what I am looking for just need to add it to my tab bar. I will start to build upon it. Do you have any advice or tips for me on implementing this into my tab bar? — soRazor, Dec 11 '20 at 04:12
It's a nontrivial task and there are a lot of tutorials about this. Check out this one: https://medium.com/sprinthub/creating-a-customized-tab-bar-in-ios-with-swift-41ed380f2a30 — Kevvv, Dec 11 '20 at 04:15

Custom UITabBarControlelr design

1 Answers1