自定义 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()

自定义 UITabBarControlelr 设计

Custom UITabBarControlelr design

ios

swift

uitabbarcontroller

ui-design