Skip to content

Instantly share code, notes, and snippets.

@marcprux
Created February 17, 2021 22:54
Show Gist options
  • Save marcprux/afd2f80baa5b6d60865182a828e83586 to your computer and use it in GitHub Desktop.
Save marcprux/afd2f80baa5b6d60865182a828e83586 to your computer and use it in GitHub Desktop.
Example of aligning labels in SwiftUI.Form on macOS
//
// FormDemoApp.swift
// FormDemo
//
// Created by Marc Prud'hommeaux
//
import SwiftUI
@main
struct FormDemoApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
/// Alignment guide for aligning a text field in a `Form`.
/// Thanks for Jim Dovey https://developer.apple.com/forums/thread/126268
extension HorizontalAlignment {
private enum ControlAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
return context[HorizontalAlignment.center]
}
}
static let controlAlignment = HorizontalAlignment(ControlAlignment.self)
}
public extension View {
/// Attaches a label to this view for laying out in a `Form`
/// - Parameter view: the label view to use
/// - Returns: an `HStack` with an alignment guide for placing in a form
func formLabel<V: View>(_ view: V) -> some View {
HStack {
view
self
.alignmentGuide(.controlAlignment) { $0[.leading] }
}
.alignmentGuide(.leading) { $0[.controlAlignment] }
}
}
struct ContentView: View {
var body: some View {
Form {
TextField("Text Field", value: .constant(""), formatter: NumberFormatter())
.textFieldStyle(RoundedBorderTextFieldStyle())
.formLabel(Text("Text Field"))
Section() {
Picker(selection: .constant(2), label: Text("Menu Picker"), content: {
Text("First").tag(1)
Text("Second").tag(2)
})
.pickerStyle(MenuPickerStyle())
Picker(selection: .constant(2), label: Text("Segment Picker"), content: {
Label("First", systemImage: "1.circle.fill").tag(1)
Label("Second", systemImage: "2.circle.fill").tag(2)
})
.labelStyle(IconOnlyLabelStyle())
.pickerStyle(SegmentedPickerStyle())
Picker(selection: .constant(2), label: Text("Radio Picker"), content: {
Text("One").tag(1)
Text("Two").tag(2)
})
.pickerStyle(InlinePickerStyle())
}
Slider(value: .constant(0.5), in: 0...1) {
Label("Slider", systemImage: "bolt")
}
.labelStyle(TitleOnlyLabelStyle())
Stepper(
onIncrement: { },
onDecrement: { },
onEditingChanged: { changed in },
label: {
Text("Stepper")
})
Section() {
Toggle("Toggle A", isOn: .constant(true))
.toggleStyle(SwitchToggleStyle())
}
}
.padding()
.frame(width: 270)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment