HomeiOS DevelopmentHow would you add this iOS 26 "liquidy" droplet background and animation...

How would you add this iOS 26 "liquidy" droplet background and animation to your personal views or customized tab bar from scratch?


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:

How would you add this iOS 26 "liquidy" droplet background and animation to your personal views or customized tab bar from scratch?

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
    }


}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments