For varied causes, individuals create their very own tab bar from scratch. Beforehand, it was pretty easy by including a horizontal stack with the buttons for every tab and a UIVisualEffectView
with UIBlurEffect
within the again.
The iOS 26 tab bar is pretty much like recreate from scratch too through the use of a UIGlassEffect
as an alternative of the UIBlurEffect
. Nevertheless, I’m unable to recreate that "liquidy" droplet background impact behind the chosen tab which animates and interacts as you progress the chosen tab:
I consider this "liquid" can also be what’s utilized by Apple in different controls such because the knob of a UISwitch
, knob of the UISlider
, the droplet when inserting the cursor when typing and so forth.
How would you recreate that animation in your personal customized views or customized tab bar created from scratch?
EDIT 2: This tweet mentions utilizing segmented pickers for this. I’m presently investigating this fashion. I’m not positive easy methods to use pictures in a phase picker.
https://x.com/michaeicantcode/standing/1979848758671343784?s=46
EDIT:
Presently, I’ve the tab bar recreated as such:
import UIKit
import SnapKit
class ViewController: UIViewController {
non-public let blur = UIVisualEffectView()
override func viewDidLoad() {
tremendous.viewDidLoad()
let stackView = UIStackView()
stackView.spacing = 0
stackView.axis = .horizontal
["person.2.fill","person.fill","bell.fill"].forEach { identify in
let button = UIButton()
let config = UIImage.SymbolConfiguration(pointSize: 18, weight: .medium, scale: .massive)
let img = UIImage(systemName: identify, withConfiguration: config)?.withTintColor(.label, renderingMode: .alwaysOriginal)
button.setImage(img, for: .regular)
button.snp.makeConstraints { make in
make.measurement.equalTo(CGSize(width: 94, top: 54))
}
stackView.addArrangedSubview(button)
}
blur.layer.cornerCurve = .steady
if #obtainable(iOS 26.0, *) {
let impact = UIGlassEffect(type: .common)
impact.isInteractive = true
blur.impact = impact
} else {
blur.impact = UIBlurEffect(type: .common)
}
blur.contentView.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.edges.equalToSuperview().inset(4)
}
view.addSubview(blur)
blur.snp.makeConstraints { (make) in
make.heart.equalToSuperview()
}
}
override func viewDidLayoutSubviews() {
tremendous.viewDidLayoutSubviews()
blur.layer.cornerRadius = blur.body.top / 2
}
}