Hi,
I have the following swiftUI code:
Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fit)
.colorEffect(ShaderLibrary.AlphaConvert())
and the following shader:
[[ stitchable ]] half4 AlphaConvert(float2 position, half4 currentColor) {
return half4(currentColor.r>0.5,currentColor.r<=0.5,0,(currentColor.r>0.5));
}
I am loading a full-res image from my photo library (24MP)... The image initially displays fine, with portions of the image red, and the rest black (due to alpha blending)... However, after rotating the device, I get an image that is a combination of red&green... Note, that the green pixels from the shader have alpha 0, hence, should never be seen. Is there something special that needs to be done on orientation changes so that the shader works fine?
SwiftUI
RSS for tagProvide views, controls, and layout structures for declaring your app's user interface using SwiftUI.
Posts under SwiftUI tag
200 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Apparently, settings do not show anymore the apps settings in iOS 18.2.
I tested on simulators (Xcode 16.2) both on iOS 18.1 and iOS 18.2 and got very different results:
In iOS 18.1 simulator, I see the settings of a lot of apps.
In iOS 18.2 simulator, not a single app setting.
That is a really serious issue in simulator for development (I filed a bug report FB16175635), but would be really critical on device as it would make it impossible to adjust setting of many apps.
Unless I missed something (meta setting ?) in iOS 18.2 ?
I have not upgraded to 18.2 notably for this reason. So I would appreciate if someone who has upgraded could make the test and report ?
select Settings on Home page
scroll to Apps category
tap here to access the list
Does the list show anything ?
Thanks for your help.
Hi! After upgrading to Xcode 16.1 my watchOS app is getting below error using a DatePicker configured with: displayedComponents: .hourAndMinute. I cannot find a solution for this error/warning. It only appears when im using : .hourAndMinute or : .hourAndMinuteandSeconds, but not .date. Note! My code is unchanged only change I Xcode upgrade. Any suggestions?
ForEach<Array, Array, _ConditionalContent<_ConditionalContent<_ConditionalContent<_ConditionalContent<YearPicker, MonthPicker>, _ConditionalContent<DayPicker, ComponentPicker>>, _ConditionalContent<_ConditionalContent<ComponentPicker, ComponentPicker>, _ConditionalContent<AMPMPicker, ModifiedContent<Text, _PaddingLayout>>>>, EmptyView>>: the ID [":"] occurs multiple times within the collection, this will give undefined results!
import SwiftUI
import WidgetKit
struct TimeEditView: View {
let title: String
@Binding var storedValue: String
var body: some View {
Form {
DatePicker(
title,
selection: Binding<Date>(
get: { Date.from(storedValue) ?? Date() },
set: { newDate in
storedValue = newDate.toString()
}
),
displayedComponents: .hourAndMinute
)
.onChange(of: storedValue) {
WidgetCenter.shared.reloadAllTimelines()
print("Morning Start changed!")
}
}
.navigationTitle(title)
}
}
These helper methods allow to use modifier methods in standard for SwiftUI short way.
extension View {
@inline(__always)
func modify(_ block: (_ view: Self) -> some View) -> some View {
block(self)
}
@inline(__always)
func modify<V : View, T>(_ block: (_ view: Self, _ data: T) -> V, with data: T) -> V {
block(self, data)
}
}
_
DISCUSSION
Suppose you have modifier methods:
func addBorder(view: some View) -> some View {
view.padding().border(Color.red, width: borderWidth)
}
func highlight(view: some View, color: Color) -> some View {
view.border(Color.red, width: borderWidth).overlay { color.opacity(0.3) }
}
_
Ordinar Decision
Your code may be like this:
var body: some View {
let image = Image(systemName: "globe")
let borderedImage = addBorder(view: image)
let highlightedImage = highlight(view: borderedImage, color: .red)
let text = Text("Some Text")
let borderedText = addBorder(view: text)
let highlightedText = highlight(view: borderedText, color: .yellow)
VStack {
highlightedImage
highlightedText
}
}
This code doesn't look like standard SwiftUI code.
_
Better Decision
Described above helper methods modify(:) and modify(:,with:) allow to write code in typical for SwiftUI short way:
var body: some View {
VStack {
Image(systemName: "globe")
.modify(addBorder)
.modify(highlight, with: .red)
Text("Some Text")
.modify(addBorder)
.modify(highlight, with: .yellow)
}
}
System provides AnyShape type erasure that animates correctly. But system doesn't provide AnyInsettableShape. Here is my implementation of AnyInsettableShape (and AnyAnimatableData that is needed to support animation).
Let me know if there is simpler solution.
struct AnyInsettableShape: InsettableShape {
private let _path: (CGRect) -> Path
private let _inset: (CGFloat) -> AnyInsettableShape
private let _getAnimatableData: () -> AnyAnimatableData
private let _setAnimatableData: (_ data: AnyAnimatableData) -> AnyInsettableShape
init<S>(_ shape: S) where S : InsettableShape {
_path = { shape.path(in: $0) }
_inset = { AnyInsettableShape(shape.inset(by: $0)) }
_getAnimatableData = { AnyAnimatableData(shape.animatableData) }
_setAnimatableData = { data in
guard let otherData = data.rawValue as? S.AnimatableData else { assertionFailure(); return AnyInsettableShape(shape) }
var shape = shape
shape.animatableData = otherData
return AnyInsettableShape(shape)
}
}
var animatableData: AnyAnimatableData {
get { _getAnimatableData() }
set { self = _setAnimatableData(newValue) }
}
func path(in rect: CGRect) -> Path {
_path(rect)
}
func inset(by amount: CGFloat) -> some InsettableShape {
_inset(amount)
}
}
struct AnyAnimatableData : VectorArithmetic {
init<T : VectorArithmetic>(_ value: T) {
self.init(optional: value)
}
private init<T : VectorArithmetic>(optional value: T?) {
rawValue = value
_scaleBy = { factor in
(value != nil) ? AnyAnimatableData(value!.scaled(by: factor)) : .zero
}
_add = { other in
AnyAnimatableData(value! + (other.rawValue as! T))
}
_subtract = { other in
AnyAnimatableData(value! - (other.rawValue as! T))
}
_equal = { other in
value! == (other.rawValue as! T)
}
_magnitudeSquared = {
(value != nil) ? value!.magnitudeSquared : .zero
}
_zero = {
AnyAnimatableData(T.zero)
}
}
fileprivate let rawValue: (any VectorArithmetic)?
private let _scaleBy: (_: Double) -> AnyAnimatableData
private let _add: (_ other: AnyAnimatableData) -> AnyAnimatableData
private let _subtract: (_ other: AnyAnimatableData) -> AnyAnimatableData
private let _equal: (_ other: AnyAnimatableData) -> Bool
private let _magnitudeSquared: () -> Double
private let _zero: () -> AnyAnimatableData
mutating func scale(by rhs: Double) {
self = _scaleBy(rhs)
}
var magnitudeSquared: Double {
_magnitudeSquared()
}
static let zero = AnyAnimatableData(optional: nil as Double?)
@inline(__always)
private var isZero: Bool { rawValue == nil }
static func + (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> AnyAnimatableData {
guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return .zero }
return lhs._add(rhs)
}
static func - (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> AnyAnimatableData {
guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return .zero }
return lhs._subtract(rhs)
}
static func == (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> Bool {
guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return true }
return lhs._equal(rhs)
}
@inline(__always)
private static func fillZeroTypes(_ lhs: AnyAnimatableData, _ rhs: AnyAnimatableData) -> (AnyAnimatableData, AnyAnimatableData)? {
switch (!lhs.isZero, !rhs.isZero) {
case (true, true): (lhs, rhs)
case (true, false): (lhs, lhs._zero())
case (false, true): (rhs._zero(), rhs)
case (false, false): nil
}
}
}
Hey everyone!
I’m encountering an issue while attempting to animate height changes of the content inside safeAreaInset(edge:alignment:spacing:content:).
When animating a reduction in the frame height, the container view (in my case, Map) also animates unexpectedly.
However, when animating an increase in the frame height, the animation works smoothly, and the Map view remains still.
How can I address this odd resizing behavior of the container?
Code:
struct MapView: View {
var body: some View {
Map()
.safeAreaInset(edge: .bottom) {
MapDetailView()
}
}
}
struct MapDetailView: View {
@State private var oldHeightOffset: CGFloat = 0
@State private var newHeightOffset: CGFloat = 0
@State private var containerHeight: CGFloat = 0
private var drag: some Gesture {
DragGesture(coordinateSpace: .global)
.onChanged { value in
withAnimation(.interactiveSpring) {
newHeightOffset = oldHeightOffset + value.translation.height
}
}
.onEnded { value in
switch newHeightOffset {
case containerHeight * 0.625...containerHeight:
withAnimation(.spring) {
newHeightOffset = containerHeight * 0.75
}
case containerHeight * 0.25..<containerHeight * 0.625:
withAnimation(.spring) {
newHeightOffset = containerHeight * 0.5
}
case 0..<containerHeight * 0.25:
withAnimation(.spring) {
newHeightOffset = 0
}
default:
break
}
oldHeightOffset = newHeightOffset
}
}
var body: some View {
NavigationStack {
Rectangle()
.fill(.clear)
.containerBackground(.ultraThinMaterial, for: .navigation)
}
.gesture(drag)
.containerRelativeFrame(.vertical) { length, _ in
length - newHeightOffset
}
.onGeometryChange(for: CGFloat.self) { geometryProxy in
let frame = geometryProxy.frame(in: .local)
return frame.height + newHeightOffset
} action: { containerHeight in
self.containerHeight = containerHeight
}
}
}
Reducing safe area inset's content height (drag down):
Increasing safe area inset's content height (drag up):
Hi,
I'm working on an app that will mostly live in the menu bar.
I'm trying to make a menu item that looks similar to the Tailscale app's menu:
Note: I'm inspired by how Tailscale's menu is rendered:
I have made a View that shows my avatar, name, and optionally the company I work for:
import SwiftUI
struct MenuWhoAmI: View {
var username: String
var binding: String?
var body: some View {
HStack {
AsyncImage(url: URL(string: "https://avatars.githubusercontent.com/u/76716")!){ image in
image.resizable().scaledToFit()
} placeholder: {
ProgressView()
}
.clipShape(Circle())
VStack(alignment: .leading) {
Text(username)
if let binding = binding {
Text("\(binding)").foregroundStyle(.secondary)
}
}
}
}
}
#Preview {
VStack(alignment: .leading) {
MenuWhoAmI(username: "grahamc").padding()
Divider()
MenuWhoAmI(username: "grahamc", binding: "DeterminateSystems").padding()
}.padding()
}
I tried using it in my menu bar:
import SwiftUI
@main
struct DeterminateApp: App {
var body: some Scene {
MenuBarExtra("Determinate", image: "MenuIcon") {
MenuWhoAmI(username: "grahamc")
Button("Two") {}
Button("Three") {}
Divider()
Button("Quit") {
NSApplication.shared.terminate(nil)
}.keyboardShortcut("q")
}.menuBarExtraStyle(.menu)
}
}
and it renders differently:
After reading the forums and documentation, I understood the MenuBarExtra only renders certain elements. I then tried to use an NSStatusBar with an AppDelegate:
import AppKit
import SwiftUI
@main
struct DeterminateApp: App {
@NSApplicationDelegateAdaptor private var appDelegate: AppDelegate
var body: some Scene {
Window("Authentication", id: "login") {}
}
}
class AppDelegate: NSObject, NSApplicationDelegate, ObservableObject {
private var statusItem: NSStatusItem!
func applicationDidFinishLaunching(_ notification: Notification) {
statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
if let button = statusItem.button {
button.image = NSImage(named: NSImage.Name("MenuIcon"))
}
statusItem.menu = NSHostingMenu(rootView: Group {
Button(action: { print("hi") }) {
MenuWhoAmI(username: "grahamc")
}
})
}
}
and still, the avatar/name doesn't render like I'd expect, missing the circle clipping:
...and I'm a bit mystified.
How can I make this menu render the way I'm trying for?
Thank you!
Here is the code snippets.
struct RealityViewTestView: View {
@State private var texts: [String] = []
var body: some View {
RealityView { content, attachments in
} update: { content, attachments in
for text in texts {
if let textEntity = attachments.entity(for: text) {
textEntity.position.x = Float.random(in: -0.1...0.1)
content.add(textEntity)
}
}
} attachments: {
ForEach(texts, id: \.self) { text in
Attachment(id: text) {
Text(text)
.padding()
.glassBackgroundEffect()
}
}
}
.toolbar {
ToolbarItem {
Button("Add") {
texts.append(String(UUID().uuidString.prefix(6)))
}
}
ToolbarItem {
Button("Remove") {
texts.remove(at: Int.random(in: 0..<texts.count))
}
}
}
}
}
struct RealityViewTestView: View {
@State private var texts: [String] = []
@State private var entities: [Entity] = []
var body: some View {
RealityView { content, attachments in
} update: { content, attachments in
// for text in texts {
// if let textEntity = attachments.entity(for: text) {
// textEntity.position.x = Float.random(in: -0.1...0.1)
// content.add(textEntity)
// }
// }
for entity in entities {
content.add(entity)
}
} attachments: {
ForEach(texts, id: \.self) { text in
Attachment(id: text) {
Text(text)
.padding()
.glassBackgroundEffect()
}
}
}
.toolbar {
ToolbarItem {
Button("Add") {
//texts.append(String(UUID().uuidString.prefix(6)))
let m = ModelEntity(mesh: .generateSphere(radius: 0.1), materials: [SimpleMaterial(color: .white, isMetallic: false)])
m.position.x = Float.random(in: -0.2...0.2)
entities.append(m)
}
}
ToolbarItem {
Button("Remove") {
//texts.remove(at: Int.random(in: 0..<texts.count))
entities.removeLast()
}
}
}
}
}
About the first code snippet, when I remove an element from the texts, why content can automatically remove the corresponding entity? And about the second code snippet, content do not automatically remove the corresponding entity. I am very curious.
I'm starting with the template code from Apple from:
File > New Project > macOS app using Swift UI and Swift Data. Selection works fine if only adding items, but after deleting any selected item selection stops working for some rows. It seems like the UI and model get out of sync. After restarting the app, or simply launching a new window, it works again. Is this a known bug in Swift UI and is there a workaround?
import SwiftUI
import SwiftData
struct ContentView: View {
@Environment(\.modelContext) private var modelContext
@Query private var items: [Item]
var body: some View {
NavigationSplitView {
List {
ForEach(items) { item in
NavigationLink {
Text("Item at \(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard))")
} label: {
Text(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard))
}
}
.onDelete(perform: deleteItems)
}
.navigationSplitViewColumnWidth(min: 180, ideal: 200)
.toolbar {
ToolbarItem {
Button(action: addItem) {
Label("Add Item", systemImage: "plus")
}
}
}
} detail: {
Text("Select an item")
}
}
private func addItem() {
withAnimation {
let newItem = Item(timestamp: Date())
modelContext.insert(newItem)
}
}
private func deleteItems(offsets: IndexSet) {
withAnimation {
for index in offsets {
modelContext.delete(items[index])
}
}
}
}
Hello. Recently, while studying alignmentGuide, I had questions about it behaving differently from the documentation when setting multiple alignment guides.
For example, the document states that only the alignmentGuide modifier with a first parameter matching the container's alignment will function.
Therefore, I thought that writing the Swift code below would result in the yellow color's center alignment being aligned with the HStack's bottom alignment.
struct TestView: View {
var body: some View {
HStack(alignment: .bottom) {
Color.yellow
.frame(height: 50)
.alignmentGuide(VerticalAlignment.center) { dim in
dim[.top]
}
.alignmentGuide(VerticalAlignment.top) { dim in
dim[.bottom]
}
.alignmentGuide(VerticalAlignment.bottom) { dim in
dim[VerticalAlignment.center]
}
Text("Hello, world")
}
.border(.green)
}
}
Expect
However, in reality, I observed that the top of the yellow color aligns with the HStack's bottom alignment. From this, I inferred that the 3rd alignmentGuide is applied first, and this also causes the first alignmentGuide to work, which makes me curious about how this is possible. If I leave only the 3rd alignmentGuide, it behaves as I expected.
Real Behavior
Could anybody help me to figure it out this behavior? Thank you
In the particle effect of RealityKit, there is a Type:
ParticleEmitterComponent.Presets
He can invoke certain particle effects in certain systems, but I am interested in learning how to modify these particle entities (such as adjusting the color, the number of particles, the generation range…)?
Some reason the image 'Ren' is not being loaded even though it is in the project how can I resolve this issue in Xcode Playgrounds?
I’m curious about the situation since the Playgrounds haven’t released a new version to support the numerous new frameworks released this year at WWDC24. How are we supposed to build with these new frameworks if they haven’t even been released for Playgrounds for the Swift Student Challenge?
Recently I decided to download my app from the App Store and found out that during the first launch some colors were missing or displayed incorreclty. For example one button was blue, although switching dark mode on and off solved button color it. Some colors were completely missing and the tab bar buttons were blue as well. Any advices?
I'm using iOS 18.2 and XCode 16.1
How do I implement the same Navigation split view with a side bar in Appkit?
Basically I have this code:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationSplitView {
// Sidebar
List {
NavigationLink("Item 1", value: "Item 1 Details")
NavigationLink("Item 2", value: "Item 2 Details")
NavigationLink("Item 3", value: "Item 3 Details")
}
.navigationTitle("Items")
} content: {
// Main content (detail view for selected item)
Text("Select an item to see details.")
.padding()
} detail: {
// Detail view (for the selected item)
Text("Select an item from the sidebar to view details.")
.padding()
}
}
}
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
and wanted to somehow convert it to Appkit. I tried to use an NSSplitViewController but I still don't have that side bar and that button to collapse it, how do I go about this?
I am developing a MacOS app with a vertically oriented ScrollView. Inside that View I use a LazyVStack. In the LazyVStack I have a column of images. I want the images to occupy as much of the LazyVStack width as possible so I created a frame for the VStack with a maxWidth: .infinity.
When the user grabs the edge of the window and drags it to reduce the window width, the Views of the window adjust themselves to fit the reduced space. This includes reducing the width of the images. I maintain a fixed aspect ratio for the images, so the height of the images is reduced too.
My problem arises when the width of the images (and height) reduces to the point where the scroll bar is no longer needed because all of the images fit within the height of the ScrollView, and the ScrollView removes the scroll bar. That triggers a redraw of the images, with a slightly bigger size because the width used by the scroll bar is now available. When the the images get bigger they don't all fit within the height of the ScrollView anymore and the scrollbar is restored. That, of course, reduces the space available for the images, so they are reduced in size again - which then triggers the ScrollView to remove the scrollbar again. The whole thing goes into a spasm of flickering images (bigger and smaller) and scrollbar (off and on) until finally I get the dreaded error message:
The window has been marked as needing another Display Window pass, but it has already had more Display Window passes than there are views in the window.
There seems to be no way to prevent this behavior by setting an option on the ScrollView. It would be great if one could indicate that the scroll bar should always remain visible, or at least that the space occupied by the scroll bar remain, even if it is just empty.
The only way I could solve this problem was to go through a somewhat involved calculation to set the image width in such a way that it still responds to window width changes (and some other size changes I allow in some of the other app's Views). This complication would not be necessary if there were better controls on the scroll bar.
Is there a reason for not providing adequate controls for the ScrollView? Its uncontrollable behavior complicates the programming.
I'm developing an ar app using reality kit and Arkit and i want to have my buttons in the same theme of vision os buttons thin , transparent background and round at corners.Following is the code i have written and need help with it
func createButton(label: String, position: SIMD3<Float>) -> ModelEntity {
let button = ModelEntity(mesh: .generateBox(size: [0.3, 0.1, 0.02], cornerRadius: 10), materials: [SimpleMaterial(color: .blue, isMetallic: false)])
button.generateCollisionShapes(recursive: true)
button.position = position
// Add button label
let buttonText = ModelEntity(mesh: .generateText(label, extrusionDepth: 0.005, font: .systemFont(ofSize: 0.05)))
buttonText.model?.materials = [SimpleMaterial(color: .white, isMetallic: true)]
buttonText.position = [-0.07, -0.02, 0.01]
button.addChild(buttonText)
return button
}
I am trying to create a list of not rectangular elements, each of which has a context menu. However, I am encountering an issue with the corners when performing a long press.
What is the correct way to use such a combination? I don't want to use List because of its default styling. The issue takes place only while animation is in progress.
Here's a simplified code example that can be copied pasted and ran in one file. The video was recorded on the device with iOS 18.2
import SwiftUI
@main
struct MyApp: App {
var body: some Scene { WindowGroup { TestView() } }
}
struct TestView: View {
let items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
VStack {
ForEach(items, id: \.self) { item in
HStack {
Text(item)
Spacer()
Image(systemName: "star")
}
.padding()
.background(.yellow)
// tried all these in different combinations, none works
.contentShape(RoundedRectangle(cornerRadius: 10))
.clipShape(RoundedRectangle(cornerRadius: 10))
.containerShape(RoundedRectangle(cornerRadius: 10))
.contextMenu {
Button { print("Edit \(item)") }
label: { Text("Edit"); Image(systemName: "pencil") }
}
}
}
.padding()
}
}
#Preview {
TestView()
}
Can someone from Apple officially confirm either a delay or cancellation of this feature? 9 days before 2024 ends and Apple said “later this year” in June 2024. Apple mentioned Swift Assist even in the MacBook Pro announcement on the 30th of October 2024 as if it already exists.
I just added a .systemLarge widget to my app, but I can't get Links to work. I want the user to be able to tap one of the four rows in my widget - like the EmojiRangers example - but I can't get it to work.
I watched a Developer video from WWDC20: https://developer.apple.com/videos/play/wwdc2020/10036?time=223
The guy, Izzy, 'simply' embeds an HStack in a Link, and hey presto! It all works. But that doesn't happen for me. There's clearly some code in the background that runs.
I already have .widgetURL working for .systemSmall and .systemMedium widgets, and I don't need to use Links on those two types. Those work by sending a URL to .onOpenURL { incomingURL in ... All good there, no issues.
I've wrapped each row in the large widget in a Link with the URL of something like myappurlscheme://widgetTapped/widgetId (it's the same url as that used in the small and medium widgets). I build & run. I tap a row. It doesn't act as though a row is tappable (it doesn't go slightly transparent), and just opens the app without hitting .onOpenURL or anything else. Nothing in my scene delegate is triggered. Is there a specific delegate method that gets called? Do I need to set up some awful intents?
I'm not using any sort of NavigationStack here; that model doesn't fit my app.
Any ideas? Thanks.