In WWDC25 video 284: Build a UIKit app with the new design, there is mention of a cornerConfiguration
property on UIVisualEffectView
. But this properly isn't documented and Xcode 26 isn't aware of any such property.
I'm trying to replicate the results of that video in the section titled Custom Elements starting at the 19:15 point. There is a lot of missing details and typos in the code associated with that video.
My attempts with UIGlassEffect
and UIViewEffectView
do not result in any capsule shapes. I just get rectangles with no rounded corners at all.
As an experiment, I am trying to recreate the capsule with the layers/location buttons in the iOS 26 version of the Maps app.
I put the following code in a view controller's viewDidLoad
method
let imgCfgLayer = UIImage.SymbolConfiguration(hierarchicalColor: .systemGray)
let imgLayer = UIImage(systemName: "square.2.layers.3d.fill", withConfiguration: imgCfgLayer)
var cfgLayer = UIButton.Configuration.plain()
cfgLayer.image = imgLayer
let btnLayer = UIButton(configuration: cfgLayer, primaryAction: UIAction(handler: { _ in
print("layer")
}))
var cfgLoc = UIButton.Configuration.plain()
let imgLoc = UIImage(systemName: "location")
cfgLoc.image = imgLoc
let btnLoc = UIButton(configuration: cfgLoc, primaryAction: UIAction(handler: { _ in
print("location")
}))
let bgEffect = UIGlassEffect()
bgEffect.isInteractive = true
let bg = UIVisualEffectView(effect: bgEffect)
bg.contentView.addSubview(btnLayer)
bg.contentView.addSubview(btnLoc)
view.addSubview(bg)
btnLayer.translatesAutoresizingMaskIntoConstraints = false
btnLoc.translatesAutoresizingMaskIntoConstraints = false
bg.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
btnLayer.leadingAnchor.constraint(equalTo: bg.contentView.leadingAnchor),
btnLayer.trailingAnchor.constraint(equalTo: bg.contentView.trailingAnchor),
btnLayer.topAnchor.constraint(equalTo: bg.contentView.topAnchor),
btnLoc.centerXAnchor.constraint(equalTo: bg.contentView.centerXAnchor),
btnLoc.topAnchor.constraint(equalTo: btnLayer.bottomAnchor, constant: 15),
btnLoc.bottomAnchor.constraint(equalTo: bg.contentView.bottomAnchor),
bg.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
bg.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
])
The result is pretty close other than the complete lack of capsule shape.
What changes would be needed to get the capsule shape? Is this even the proper approach?