swiftUI

Issue #847 We should use Dynamic Font Type as much as possible, as per Typography guide and https://www.iosfontsizes.com/ But in case we have to use a specific font, we can scale it with UIFontMetrics import SwiftUI import UIKit extension Font { static func system( scaledSize size: CGFloat, weight: Font.Weight = .regular, design: Font.Design = .default ) -> Font { Font.system( size: UIFontMetrics.default.scaledValue(for: size), weight: weight, design: design ) } } Then instead of...

Issue #846 We use UIBezierPath with addArc to draw specific corner with different rounding values. import SwiftUI extension View { func clipCorners( topLeft: CGFloat = 0, bottomLeft: CGFloat = 0, topRight: CGFloat = 0, bottomRight: CGFloat = 0 ) -> some View { clipShape( SpecificCornerShape( topLeft: topLeft, bottomLeft: bottomLeft, topRight: topRight, bottomRight: bottomRight ) ) } } struct SpecificCornerShape: Shape { var topLeft: CGFloat = 0 var bottomLeft: CGFloat = 0 var topRight: CGFloat = 0 var bottomRight: CGFloat = 0 func path(in rect: CGRect) -> Path { let minX = rect....

Issue #845 Suppose we have struct Payment as the state, we declare custom Binding<String> that derives from our state. struct Payment { var amount: Int = 0 } To show our suffix view, we use .fixedSize(horizontal: true, vertical: false) to constrain our TextField to fit content, and to avoid it to grow outside our frame, we constrain a max limit, like 10_000 in this case. An interesting thing is we divide by 10 to not let the newly typed digit enter if the amount is above our limit...

Issue #844 Use custom Binding and validate the text. In case of zero, return empty string to let TextField display placeholder var textField: some View { let text = Binding<String>( get: { state.amount > 0 ? "$\(state.amount)" : "" }, set: { text in let text = text.replacingOccurrences(of: "$", with: "") state.amount = Int(text) ?? 0 } ) return TextField("$0", text: text) .keyboardType(.numberPad) .font(.system(size: 50, weight: .medium, design: .monospaced)) .foregroundColor(Asset.textPrimary.color) ....

Issue #843 This can be used in message bar input or some popover form. We use sizeThatFits to calculate the height so that it grow under certain height limit import SwiftUI import UIKit struct MessageTextField: View { let placeholder: String @Binding var text: String @Binding var isEditing: Bool @State private var height: CGFloat = 100 var body: some View { UITextViewWrapper( text: $text, isEditing: $isEditing, height: $height ) .frame(height: height) ....

Issue #842 Declare EnvironmentKey and read safeAreaInsets from key window in connectedScenes struct SafeAreaInsetsKey: EnvironmentKey { static var defaultValue: EdgeInsets { UIApplication.shared.keyWindow?.safeAreaInsets.swiftUIInsets ?? EdgeInsets() } } private extension UIEdgeInsets { var swiftUIInsets: EdgeInsets { EdgeInsets(top: top, leading: left, bottom: bottom, trailing: right) } } private extension UIApplication { var keyWindow: UIWindow? { connectedScenes .compactMap { $0 as? UIWindowScene } .flatMap { $0.windows } .first { $0.isKeyWindow } } } struct MessageBar: View { @Environment(\....

Issue #841 Declare generic on RawRepresentable import SwiftUI struct TabStrip<T: RawRepresentable & Hashable>: View where T.RawValue == String { let values: [T] @Binding var selected: T var body: some View { ScrollView(.horizontal, showsIndicators: false) { LazyHStack(spacing: 24) { ForEach(values, id: \.self) { value in Button(action: { selected = value }) { Text(value.rawValue) .foregroundColor(selected == value ? Asset.textPrimary.color : Asset.textSecondary.color) .fontWeight(selected == value ? .semibold : .regular) .padding(6) } .buttonStyle(PlainButtonStyle()) } } } ....

Issue #838 We can write our custom Binding import SwiftUI extension Binding where Value == Date? { func flatten(defaultValue: Date) -> Binding<Date> { Binding<Date>( get: { wrappedValue ?? defaultValue }, set: { wrappedValue = $0 } ) } } Then use in places where it needs Binding with non-optional value DatePicker( "", selection: $date.flatten(defaultValue: Date()), displayedComponents: .hourAndMinute ) .datePickerStyle(WheelDatePickerStyle())

Issue #837 I usually use GeometryReader in background to get size of view, and encapsulate it inside a ViewModifier struct GetHeightModifier: ViewModifier { @Binding var height: CGFloat func body(content: Content) -> some View { content.background( GeometryReader { geo -> Color in DispatchQueue.main.async { height = geo.size.height } return Color.clear } ) } } This is useful to constrain NavigationView height when in use inside a bottom sheet struct FilterView: View { @State private var height: CGFloat = 0 var body: some View { BottomSheet { NavigationView { VStack { Text("content") } ....

Issue #836 If we have a Picker inside a View that has DragGesture, chances are when we scroll the wheel, the DragGesture is detected too To prevent this, we can attach a dummy DragGesture to our Picker Picker("", selection: $number) { ForEach(FavoriteNumbers.allCases) { number in Text(number.name) } } .pickerStyle(WheelPickerStyle()) .gesture(DragGesture())

Issue #835 I usually define ButtonStyle to encapsulate common styles related to buttons. Here we specify .frame(maxWidth: .infinity) to let this button take the whole width as possible struct MyActionButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .font(.headline.bold()) .foregroundColor(.white) .frame(height: 44) .frame(maxWidth: .infinity) .background(Color.green) .cornerRadius(8) } } If we have 2 buttons both specifying maxWidth: .infinity then they will be divided equally with a spacing specified by our HStack...

Issue #834 In iOS 15, we can use UISheetPresentationController to show bottom sheet like native Maps app. But before that there’s no such built in bottom sheet in UIKit or SwiftUI. We can start defining API for it. There are 3 ways to show overlay content in SwiftUI fullScreenCover: this presents like a modal view controller bottom up offset: initially hide our bottom sheet overlay: show overlay full screen so we can have custom control....

Issue #831 We can normally listen to sub ObservableObject by either listen to its objectWillChange or its Publisher class SubModel: ObservableObject { @Published var count = 0 } class AppModel: ObservableObject { @Published var submodel: SubModel = SubModel() private var bag = Set<AnyCancellable>() init() { submodel.$count .sink(receiveValue: { [weak self] _ in self?.objectWillChange.send() }) } } We can then make a convenient extension to ease this. We use DispatchQueue to trigger objectWillChange in another run loop, to achieve didSet behavior...

Issue #830 Read more Router https://davidgarywood.com/writing/swiftui-router-pattern/ https://github.com/roboheadz/swiftui-router Coordinator Coordinator https://quickbirdstudios.com/blog/coordinator-pattern-in-swiftui/ https://github.com/quickbirdstudios/SwiftUI-Coordinators-Example

Issue #829 Use PreferenceKey with a custom coordinateSpace to make our own TrackableScrollView. Note that the offset here is in reversed to contentOffset in normal UIScrollView import SwiftUI struct TrackableScrollView<Content: View>: View { @ViewBuilder let content: (ScrollViewProxy) -> Content let onContentSizeChange: (CGSize) -> Void let onOffsetChange: (CGPoint) -> Void var body: some View { ScrollViewReader { reader in ScrollView(showsIndicators: false) { GeometryReader { geo in Color.clear.preference( key: ScrollOffsetKey.self, value: geo.frame(in: ....

Issue #828 From iOS 15, FocusState Use focused(_:) for single TextField, and focused(_:equals:) for multiple TextField struct FormView: View { @FocusState private var isFocused: Bool @State private var name = "" var body: some View { TextField("Name", text: $name) .focused($isFocused) } } struct FormView: View { enum Field: Hashable { case usernameField case passwordField } @State private var username = "" @State private var password = "" @FocusState private var focusedField: Field?...

Issue #826 Use isActive binding @State private var goesToDetail: Bool = false NavigationLink( destination: DetailView(viewModel: viewModel), isActive: $goesToDetail) { Button(action: { goesToDetail = true }) { Text("Next") } .buttonStyle(MyButtonStyle)) }

Issue #825 For many apps that require user authentication, a common practice is to define a shared UserManager with an optional User. This is convenient but it requires us to constantly unwrap and check that user class UserManager { static let shared = UserManager() private(set) var user: User? } A more safer approach is to leverage Swift type system and separate the need based on authenticated and unauthenticated usage. For example, for an unauthorized users, we show the login screen....

Issue #824 Use a custom NavigationLink with EmptyView as the background, this failable initializer accepts Binding of optional value. This works well as the destination are made lazily. extension NavigationLink where Label == EmptyView { init?<Value>( _ binding: Binding<Value?>, @ViewBuilder destination: (Value) -> Destination ) { guard let value = binding.wrappedValue else { return nil } let isActive = Binding( get: { true }, set: { newValue in if !newValue { binding....

Issue #823 Make atomic components and compose them. Firstly with NavigationBar that has custom leading and trailing content, there we can customize padding. import SwiftUI struct NavigationBar<Leading: View, Trailing: View>: View { @ViewBuilder let leading: Leading @ViewBuilder let trailing: Trailing var body: some View { HStack { leading Spacer() trailing } .padding(.horizontal, 8) } } struct NavigationBarWithBackButton: View { let onBack: () -> Void var body: some View { NavigationBar( leading: backButton, trailing: EmptyView....