how tabs in safari are implemented in iOS (one we see in landscape mode in iPhone)?

Question

Created Apr ’23

Replies 0

Boosts 0

Participants 1

I am trying to implement safari like tabs in ios for my application , i am not able to find any source how apple has implemented that for safari . I tried implementing it by subclassing UITabBarController ,UITabBar and UITabBarItem , in this implementation i am able to put cross buttom in tabs but still not able to achieve same behavior as tabs in safari for ios . For example , in my approach i am not able to find a way to handle the "Tab deck" when number of tabs increases from certain limit .Is there any approach i can follow or artifect i can use to achive such behavior ? or the approach i am using ,is it same approach used by apple for safari tabs in ios?

Approach i follow as of now - :


import UIKit

class TWCustomisedTabBarController: UITabBarController {
    var twtabbar: TWTabBar!
    override func viewDidLoad() {
        super.viewDidLoad()
        tabBar.isHidden = true
        setupView()
    }
    
    func setupView() {}
    
    func setTabBar(items: [TWTabBarItem]) {
        
        guard items.count > 0 else { return }
        twtabbar = TWTabBar(items: items)
        
        for i in 0 ..&lt; items.count {
            
            items[i].tag = i
            items[i].crossbutton.tag = i
        }
        guard let bar = twtabbar else { return }
        self.view.addSubview(bar)
    }
}

class TWTabBar: UITabBar
{
    var twitems:[TWTabBarItem] = []
    
    init (items: [TWTabBarItem]) {
        super.init(frame: CGRect(x: 0, y: 0, width: 320, height: 49))
        self.twitems = items
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
        
    func setupView() {
        for i in 0 ..&lt; twitems.count {
            
            let item = twitems[i]
            addSubview(item)
        }
    }
}

class TWTabBarItem: UIView
{
    
    let textLabel = UILabel()
    let crossbutton = UIButton()
    let leadingline = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupView()
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        textLabel.text = "Tab"
        textLabel.font = UIFont.systemFont(ofSize: 14)
        textLabel.frame = CGRect(x: 5, y: 0, width: self.frame.width&#x2F;2, height: self.frame.height)
        textLabel.textColor = .black
        
        crossbutton.setTitle("X", for: .normal)
        crossbutton.frame = CGRect(x: self.frame.width*3&#x2F;4, y: 15, width: self.frame.width&#x2F;4, height: 20)
        crossbutton.setTitleColor(.black, for: .normal)
        crossbutton.backgroundColor = .gray
        crossbutton.titleLabel?.font = UIFont.systemFont(ofSize: 10)
        
        leadingline.text = "|"
        leadingline.font = UIFont.systemFont(ofSize: 25)
        leadingline.frame = CGRect(x: 0, y: 0, width: 5, height: 49)
        leadingline.textColor = .black
        
        addSubview(leadingline)
        addSubview(crossbutton)
        addSubview(textLabel)
    }
}
```

Boost