I'd like to use the SwiftUI app lifecycle, but my app uses NSTitlebarAccessoryViewController to show a bar of tool options below the toolbar:
Specifically, I'm doing this:
let toolSettingsView = NSHostingView(rootView: ToolAccessoryView(model: model))
let vc = NSTitlebarAccessoryViewController()
vc.view = toolSettingsView
vc.fullScreenMinHeight = accessoryHeight // Ensure tool settings are visible in full screen.
toolSettingsView.frame.size = toolSettingsView.fittingSize
window?.addTitlebarAccessoryViewController(vc)
Is there a (practical) way I can mimic the control appearance (of the sliders, etc.) using pure SwiftUI? When use a SwiftUI view I get this:
Code looks like this:
struct MainView: View {
var model: DataModel
var undoManager: UndoManager
var body: some View {
VStack {
ToolAccessoryView(model: model)
SculptingView(model: model, undoManager: undoManager)
}
}
}
This is implemented as of macOS 13 by using a custom toolbar placement identifier as follows:
extension ToolbarItemPlacement {
static let toolOptionsBar = ToolbarItemPlacement(id: "com.companyname.toolOptions")
}
Then specifying the placement in the .toolbar:
ToolbarItem(placement: .toolOptionsBar) {
ToolAccessoryView()
}
Which in my case looks like this:
The colors on the sliders are a bit odd, which is likely their bug.
See also https://developer.apple.com/documentation/swiftui/toolbarplacement/init(id:) which has some example code.
Related
In a macOS app I have a List, the listed views (named MyItem here) are using the .primary and .secondary colors but also other colors like .orange or .blue.
The important thing here is: .primary and .secondary colors are automatically converted to white when the item is highlighted or selected, but the other colors are not.
Naively, I added a selected: Bool property to MyItem and when the list reports it as selected I manually convert the colors to white, something like this:
struct MyItem: View {
var selected: Bool
var body: some View {
Text("Hello").foregroundColor(.primary)
Text("World").foregroundColor(selected ? .white : .orange)
}
}
struct MyList: View {
#State private var selectedItemId: Int?
var body: some View {
List(items, selection: $selectedItemId) { item in
MyItem(selected: selectedItemId == item.id)
}
}
}
It works great when using the keyboard, but once you start selecting items with the mouse, you see this workaround doesn't work with highlighted items. Here's an example where I start by using the keyboard and next I show how the colors are not changed when highlighting the items with the mouse: https://www.youtube.com/watch?v=X07mB0OsTQk
I've searched everywhere, from SwiftUI's documentation to Cocoa's, including AppKit's, I couldn't find an easy way to change the color when the item is highlighted… Am I missing something?
Looking for some advice trying to use Table on macOS using SwiftUI. Table was introduced in macOS 12, and I'm trying my darnedest to not step down into AppKit or replicate any existing functionality - I can't seem to find a solution to a SwiftUI version of NSTableView's rowHeight property.
There is a .tableStyle modifier but only allows for customization of insets and alternating row styling. Modifying the frame in the row views doesn't take effect, at least not the ways I've tried.
First, am I missing something obvious (or not obvious) and there is a way to do this? The underlying AppKit view is a SwiftUITableView that seems to inherit to NSTableView. I can adjust the rowHieght in the debugger, but only effects the table view's background. Second any recommendations on the way to approach this - other than using NSTableView and wrapping in a NSViewRepresentable, or manipulating the established NSView hierarchy using some SwiftUI/AppKit trickery?
Some elided code demonstrating the use of Table
struct ContentTable: View {
var items: [ContentItem]
#State var selection = Set<ContentItem.ID>()
var body: some View {
Table(selection: $selection) {
TableColumn("Name") {
Text($0.name)
.frame(height: 80) // Only way found to set height information
}.width(min: 200, ideal: 250)
TableColumn("Description", value: \.description)
} rows: {
ForEach(items) {
TableRow($0)
}
}
.tableStyle(.inset(alternatesRowBackgrounds: true))
}
}
Here's a side-by-side of SF Symbols (Left) and the SwiftUI Table I'm using. Both are using the inset/alternating row styles. Presentation wise I'd like to give the rows more space to breathe.
The way I do this is by utilizing the padding modifier in the content of declared TableColumns.
The important part is the table will adjust the row by the lowest padding value across all columns.
I would not try to approach this with tableStyle. There are no public configurations as of now.
It's important to note an undeclared padding defaults to 0.
struct ContentTable: View {
var items: [ContentItem]
#State var selection = Set<ContentItem.ID>()
var body: some View {
Table(selection: $selection) {
TableColumn("Name") {
Text($0.name).padding(.vertical, 8) // <--- THIS WILL TAKE PRECEDENCE.
}.width(min: 200, ideal: 250)
TableColumn("Description") {
Text("\($0.description)").padding(.vertical, 16) // <--- THIS WILL BE INEFFECTIVE.
}
} rows: {
ForEach(items) {
TableRow($0)
}
}
.tableStyle(.inset(alternatesRowBackgrounds: true))
}
}
When a SwitfUI TextField is disabled, on Mac OS, there is no visual feedback that the field is not enterable (apart from not accepting focus click). I have searched high and low, it looks like simply setting .background(Color.whatever) works for IOS (from all the "how tos" that I have encountered). However for a Mac OS app, it only changes the color of the thin boundary of the textfield. I have futzed around and found that I can add opaque overlays to simulate the effect, but that seems overly complex for what I always took to be conventional standard of greying out of disabled fields. Which makes me think that I am missing something bleedingly obvious somewhere.
Has anyone a sample of a MacOS SwiftUI struct that greys the background of a disabled TextField ? My minimal example of what I am doing to see the issue is below.
struct ContentView: View {
#State var nameEditDisabled = true
#State var myText = "Fred"
var body: some View {
VStack {
Button("Change Name") {
nameEditDisabled.toggle()
}
TextField("hello", text: $myText)
.background(nameEditDisabled ? Color.gray: Color.yellow)
.disabled(nameEditDisabled)
}
}
}
it seems to be "fixed' in swiftUI 3.0, macos 12. I get a slightly darker shade of gray when disabled. When in focus, I get a blue border.
Edit:
struct ContentView: View {
#State var nameEditDisabled = false
#State var myText = "Fred"
var body: some View {
VStack {
Button("Change disabling") {
nameEditDisabled.toggle()
}
TextField("hello", text: $myText)
.colorMultiply(nameEditDisabled ? .gray: .yellow)
.disabled(nameEditDisabled)
}.frame(width: 444, height: 444)
}
}
Is there a way to change the text color of the dialog buttons in iOS?
I mean for the OK/Cancel buttons at the bottom for the alerts/confirm dialogs etc.
If native code, that's ok also.
You will be needing to use native code if you want to achieve this on IOS, here's how you can do it:
if (isIOS) {
var alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle("title", "message", UIAlertControllerStyle.ActionSheet);
// Here are some premade styling. The destructive by default is red on IOS. You can select default for them all or use existing.
var editAction = UIAlertAction.actionWithTitleStyleHandler("Edit", UIAlertActionStyle.Default, (arg: UIAlertAction) => {
//code implementation here
});
var deleteAction = UIAlertAction.actionWithTitleStyleHandler("Delete", UIAlertActionStyle.Destructive, (arg: UIAlertAction) => {
//code implementation here
});
var cancelAction = UIAlertAction.actionWithTitleStyleHandler("Cancel", UIAlertActionStyle.Cancel, (arg: UIAlertAction) => {
//code implementation here
});
alertController.addAction(editAction);
alertController.addAction(deleteAction);
alertController.addAction(cancelAction);
// This is how you can force change the color of the title text on the actions (buttons).
alertController.view.tintColor = new Color("#FF0000").ios; // Color is a class in Nativescript, if we you want the Native IOS value, this is how you do it.
var currentPage = topmost().currentPage;
var viewController: UIViewController = currentPage.ios;
viewController.presentModalViewControllerAnimated(alertController, true);
}
Make sure you imported what's needed:
import { isIOS, Color } from 'tns-core-modules/ui/page/page';
import { topmost } from 'tns-core-modules/ui/frame';
There are other styling customizations you can do by changing the default alertController.view settings. So just try out what's best for your use case.
Here's a basic example of what doesn't work:
import SwiftUI
struct Test : View {
#State var swapped = false
var body: some View {
if swapped { Color.green }
Color.blue.tapAction {
withAnimation { self.swapped.toggle() }
}
if !swapped { Color.green }
}
}
SwiftUI has no way to figure out that I think of the first Color.green and the second Color.green as the same view, so of course the animation just fades one of them out while fading the other one in at the new location. I'm looking for the way to indicate to SwiftUI that these are the same view, and to animate it to the new location. I discovered the .id() modifier with great excitement because I believed that it would give me the effect that I want:
import SwiftUI
struct Test : View {
#State var swapped = false
var body: some View {
if swapped { Color.green.id("green") }
Color.blue.tapAction {
withAnimation { self.swapped.toggle() }
}
if !swapped { Color.green.id("green") }
}
}
This, unfortunately, does not work either. I'm unbelievably excited about SwiftUI, but it seems to me that the ability to change the structure of the view hierarchy while preserving view identity is quite important. The actual use case which prompted me to think about this is that I have a handful of views which I'm trying to create a fan animation for. The simplest way would be to have the items in a ZStack in one state so that they are all on top of each other, and then to have them in a VStack in the fanned out state, so that they're vertically spread out and all visible. Changing from a ZStack to a VStack of course counts as a change to the structure and therefore all continuity between the states is lost and everything just cross fades. Does anyone know what to do about this?
You can do this with SwiftUI 2 introduced in iOS 14 / macOS 10.16:
#Namespace private var animation
…
MyView.matchedGeometryEffect(id: "myID", in: animation)
I think I have the animation part of your question down, but unfortunately, I don't think it will keep the same instance of the view. I tried taking green out into a variable to see if that works, but if I understand SwiftUI correctly, that doesn't mean the same instance of the view will be shared in two places.
What I'm doing is adding a transition when the green view is added/removed. This way, the view moves to the location of its replacement before disappearing.
struct Test : View {
#State var swapped = false
let green = Color.green
var body: some View {
HStack {
if swapped {
green
.transition(.offset(CGSize(width: 200, height: 0)))
.animation(.basic())
}
Color.blue.animation(.basic()).tapAction {
withAnimation { self.swapped.toggle() }
}
if !swapped {
green.transition(.offset(CGSize(width: -200, height: 0)))
.animation(.basic())
}
}
}
}
This solution is quick-and-dirty and uses hard-coded values based on the iPhone 6/7/8 portrait screen size