自定义 UITabBarControlelr 设计

Question

我正在尝试在标签栏图像图标的底部复制此 UITabBarController 指示器。指示器跟随选定的选项卡并在当前选定的选项卡下交互移动。我在 Github 上搜索过，但找不到类似的。如果有人知道任何类似的库，我想知道如何开始创建一个类似的交互式指示符。

Answer 1

我使用CALayer 的隐式动画创建了动画指示器。将其转换为自定义标签栏的实际过程有点复杂，但至少您可以将此作为参考：

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