Todayssky

ActionSheet 를 사용하는데 deprecated 되었다고 confirmationDialog를 사용하라고 합니다. 바로 알아봅시다.

ConfirmationDialog

가장 기본적인 confirmationDialog 입니다. 첫번째 인자로 titleKey가 들어가고 isPresented 에 바인딩값을 연결해준 뒤 action 클로저 안에 우리가 평소에 쓰는 Button을 쭉 나열하면 됩니다.

struct ContentView: View {
    @State var isPresented = false
    
    var body: some View {
        Button(action: {
            isPresented = true
        }) {
            Text("사진 불러오기")
                .padding()
        }
        .confirmationDialog(
            "제목",
            isPresented: $isPresented,
            actions: {
                Button("카메라") {
                    print("카메라 선택")
                }
                Button("라이브러리") {
                    print("라이브러리 선택")
                }
            }
        )
    }
}

기본적으로 Cancel 버튼이 존재하고 제목이나 메세지가 생략이 가능합니다.

메세지 추가

.confirmationDialog(
            "제목",
            isPresented: $isPresented,
            actions: {
                Button("카메라") {
                    print("카메라 선택")
                }
                Button("라이브러리") {
                    print("라이브러리 선택")
                }
            },
            message: {
                Text("불러올 사진 위치를 선택해주세요.")
            }
        )

제목 추가

세번쨰 인자로 존재하는 titleVisibility 를 통하여 설정 가능합니다.

.confirmationDialog(
    "제목",
    isPresented: $isPresented,
    titleVisibility: .visible,
    actions: {
        Button("카메라") {
            print("카메라 선택")
        }
        Button("라이브러리") {
            print("라이브러리 선택")
        }
    },
    message: {
        Text("불러올 사진 위치를 선택해주세요.")
    }
)

ActionSheet.Button의 .destructive

.destructive 의 설정은 Button을 생성할 때 할 수 있습니다.

Button("카메라", role: .destructive) {
    print("카메라 선택")
}

확실히 기존의 ActionSheet 보다 더욱 더 선언형에 맞게 변화된 모습이 보이네요. 사용하기에도 더욱 편한것 같습니다.

SwiftUI의 Preview는 따로 앱을 빌드하여 시뮬레이터를 실행하지 않고도 코드를 입력하면 바로바로 눈에 보이도록 해주는데요. 이로 인해 더욱 더 생산성 높은 작업을 할 수 있도록 도와줍니다. SwiftUI에서 하나의 ViewController 같은 화면이 아닌 하나의 Component View를 만드는 경우가 많습니다. 하지만 이럴 때도 Preview는 선택한 기기의 화면으로 보입니다. 이런 경우나 여러가지의 형태(가로모드, 세로모드) 등등 을 한눈으로 확인 할 수 있도록 해주는 Preview의 기능에 대해 알아봅시다.

1. PreviewLayout

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.device)
        ContentView()
            .previewLayout(.fixed(width: 400, height: 200))
        ContentView()
            .previewLayout(.sizeThatFits)
    }
}

previewLayout은 말 그대로 preview 화면의 레이아웃에 관련된 함수입니다. 의미도 모두 직관적이라 따로 설명은 생략하도록 할게요!

위 코드 처럼 View 타입을 여러개 선언해주게 되면 아래 이미지처럼 한번에 여러개의 Preview를 볼 수 있습니다. Component View를 작성할 때 .sizeTahtFits을 자주 사용하고 있습니다.

2. PreviewDevice, PreviewDisplayName

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 mini"))
            .previewDisplayName("iPhone 12 mini")
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 13 Pro Max"))
            .previewDisplayName("iPhone 13 Pro Max")
    }
}

 먼저 previewDevice는 아이폰 기기의 이름으로 preview의 디바이스를 직접 변경시켜 줄 수 있습니다. Xcode에서 시뮬레이터를 실행할 때 기기를 하나만 선택하여 하나의 기기로 실행하게 되는데 이를 이용하면 해당 화면이 여러 화면에서 어떻게 동작되는지 확인할 수 있습니다. PreviewDevice의 enum을 인자로 받게 되어있는데 해당 기기들이 case로 정해져 있지 않고 저렇게 String값으로 생성해줘야 한다는게 좀 불편하네요... 자주 사용하시는 분들이라면 따로 enum을 정의해도 좋을 것 같네요!

 PreviewDisplayName은 Preview에 이름을 붙혀줍니다. 아래 사진을 보면 기기 위에 정의해둔 이름이 붙혀인 것을 보실 수 있습니다.

3. Preview 가로모드로 보는법

아쉽게도 Preview에서는 가로모드가 지원되지 않습니다. 하지만 위에서 사용되었던 previewLayout을 사용하면 됩니다!

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.fixed(width: 1180, height: 820))
    }
}

일반적으로 Assets에 고정된 색상을 등록하고 사용하지만 가끔은 서버에서 받은 hex값을 사용하여 색상을 표현해야 하는 경우가 있다.

역시 일반적인 방법으로 Color를 Extension 하여 새로운 이니셜라이저를 추가해준다.

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }

        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

출처: https://stackoverflow.com/questions/56874133/use-hex-color-in-swiftui

iOS 의 키보드를 보면 기본적으로 키보드를 내리는 키가 있지만 많은 이용자들이 화면을 탭했을 때 키보드가 내려가는 동작이 익숙하다. 아주 간단하게 SwiftUI에서 구현하는 방법이 있다.

1. Extension 선언

extension UIApplication {
    func addTapGestureRecognizer() {
        guard let window = windows.first else { return }
        let tapGesture = UITapGestureRecognizer(target: window, action: #selector(UIView.endEditing))
        tapGesture.requiresExclusiveTouchType = false
        tapGesture.cancelsTouchesInView = false
        tapGesture.delegate = self
        window.addGestureRecognizer(tapGesture)
    }
}

extension UIApplication: UIGestureRecognizerDelegate {
    public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true // set to `false` if you don't want to detect tap during other gestures
    }
}​

2. 사용

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onAppear(perform: UIApplication.shared.addTapGestureRecognizer)
        }
    }
}

위와 같이 최상단의 View에 onAppear를 호출하는것으로 모든 화면에서 해당 동작이 적용된다.

출처: https://stackoverflow.com/questions/56491386/how-to-hide-keyboard-when-using-swiftui

1. 왜 SwiftUI의 Alert이 아닌 UIKit의 Alert을 사용하는가?

SwiftUI의 Alert

먼저 SwiftUI에서 제공되는 Alert을 사용하기 위한 필요한 요소에 대해 알아보자.

1. alert이 열려있는지 닫혀있는지에 대한 정보를 담은 Bool 타입의 State 변수를 선언한다.

2. View에 alert을 체이닝 형식으로 선언한 후 아까 선언한 State 변수를 연결한다.

3. View의 alert 클로저에 Action처리를 포함한 Alert(View)을 추가한다.

struct AView: View {
	// 1
    @State var isShowingAlert = false
    
	var body: some View {
    	VStack {
        	Button(action: { 
            	isShowingAlert = true
            }) {
            	Text("show alert")
            }
        }
        .alert(isPresented: $viewModel.showingPayAlert) { 	// 2
            // 3
            Alert(
                    title: Text("알림"),
                    message: Text("수락하시겠습니까?"),
                    primaryButton: .default(Text("확인")) {
                        print("action!")
                    },
                    secondaryButton: .cancel(Text("취소")
            )
        }
    }
}

 SwiftUI에서 제공되는 Alert을 사용하려면 해당 Alert이 열림과 닫힘을 알 수있는 State 변수 하나, View타입 끝에 체이닝 형식으로 alert을 하나하나 달아줘야 한다. 만약 여러개의 화면에 모두 각각 alert이 필요하면 매번 State 변수를 만들고 매번 alert을 달아준 다음 해당 action을 추가해야한다. 물론 최상단의 View에 하나의 alert을 달아놓고 매번 최상단의 alert의 binding 변수를 변경해주거나 하는 방법으로 해결할 수 있지만 최상단의 State값이 변경됨으로써 생기는 사이드이펙트들을 또한 신경써줘야 하는 단점이 있었다. 또한 하나의 View에 여러개의 alert이 필요한 경우 하나의 View 타입에 여러개의 alert을 달아주는 경우 정상적으로 동작하지 않는 경우가 생겨 불필요한 코드들이 추가되기도 한다.

 물론 선언형인 SwiftUI에서 어울리는 방법이긴 하다. 하지만 개인적으로 모든 View에서 매번 저 3가지의 작업을 한다는게 번거롭고 코드의 양도 쓸데없이 커진다는 느낌을 받았다.

SwiftUI에서 UIKit

특정 Action을 처리하는 alert인데 굳이 명령형으로 하지 않고 선언형을 사용 할 필요가 있을까?

아래 코드처럼 UIKit를 사용한 AlertController를 만들어 단지 호출만 하여 간단 명료하게 Alert을 표시할 수 있다.

struct BView: View {
	var body: some View {
    	Button(action: { 
        	AlertController.showAlert(
       			title: "알림",
			message: "승인하시겠습니까?",
              	  	primaryAction: { print("승인") }
            )
        }) {
        	Text("show alert!")
        }
    }
}

아래 코드는 가장 상위의 ViewController를 찾은 후 해당 ViewController에 Alert을 추가하는 코드이다.

UIKit의 UIAlertController를 현재 Scene의 가장 상위의 ViewController를 가져와 추가하는 작업이다.

import Foundation
import UIKit

final class AlertController {
    static func showAlert(
        title: String = "알림",
        message: String?,
        primaryAction: @escaping () -> ()
    ) {
        let alert = UIAlertController(
            title: title,
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(
            .init(
                title: "확인",
                style: .default,
                handler: { _ in
                    primaryAction()
                }
            )
        )
        alert.addAction(
            .init(
                title: "취소",
                style: .cancel
            )
        )
        rootController().present(alert, animated: true)
    }
    
    private static func rootController() -> UIViewController {
        guard let screen = UIApplication.shared.connectedScenes.first as? UIWindowScene else {
            return .init()
        }
        
        guard let root = screen.windows.first?.rootViewController else {
            return .init()
        }
        
        return root
    }
}

고찰

SwiftUI를 사용하다 보면 참 편한기능이 많고 생산성이 엄청 좋고 유지보수, 코드 관리가 편하다는 것을 느낀다. 하지만 무조건 장점만은 있는게 아니기 때문에 UIKit의 장점과 SwiftUI의 장점을 잘 종합적으로 사용해야 한다는 생각이 든다.

SwiftUI에서 UIkit 사용하기

SwiftUI에서 UIkit를 사용하기 위해서는 UIViewRepresentable을 채택하는 struct를 구현하면 됩니다.

UIViewRepresentable을 채택하게 되면 필수로 구현해야 하는 makeUIView와 updateUIView가 있고 UIViewType을 원하는 UIkit의 View로 변경하면 됩니다.

UIViewRepresentable

// 구현
struct SwiftUIView: UIViewRepresentable {
	func makeUIView(context: Context) -> UIViewType {
    	let view = UIViewType()
        return view
    }
    
    func updateUIView(_ view: UIViewType, context: Context) {
    
    }
}


// 사용
struct MyView: View {
	var body: some View {
    	VStack { 
        	SwiftUIView()
        }
    }
}

UIViewControllerRepresentable

만약 Custom View가 아닌 하나의 Controller일때는 UIViewControllerRepresentable이라는 것을 따로 제공합니다. 

makeUIViewController에 해당하는 ViewController를 리턴하도록 해주면 됩니다.

struct MyViewControllerRepresentation: UIViewControllerRepresentable { 
	func makeUIViewController(context: Context) -> ViewController {
		
    }

	func updateUIViewController(_ uiViewController: ViewController, context: Context) { 
    
    } 
}

SwiftUI에서 Storyboard 사용하기

코드로 구현된 UIViewController가 아닌 Storyboard(.xib)로 구현되어있다면 어떻게 해야할까요?

UIStoryboard

struct MyViewControllerRepresentation: UIViewControllerRepresentable { 
	func makeUIViewController(context: Context) -> ViewController {
		UIStoryboard(name: "MyStoryBoardView", bundle: nil)
        	.instantiateViewController(withIdentifier: "ViewController") as! ViewController
    }

	func updateUIViewController(_ uiViewController: ViewController, context: Context) { 
    
    } 
}



SwiftUI로 개발을 하다보면 네비게이션 바를 커스텀 색상으로 바꾸어야 할 경우가 생깁니다.

예를 들면 특정 색을 가지고있다가 특정 뷰에서만 투명하게 처리한다던지...

UINavigationController를 extension한 후 viewDidload()를 override하여 사용할 수 있어요.

View에서 편하게 사용하기 위해 View안에 NotificationCenter로 구현하여 사용합니다!

extension View {
	func setNavigationBarColor(color: Color) {
    	DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) { 
              NotificationCenter.defualt.post(
              name: NSNotification.Name("UPDATENAVIGATIONBAR"),
              object: nil,
              userInfo: ["color": color]
            )
        }
    }
    
    func resetNavigationBar() { 
    	DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) { 
        	NotificationCenter.defualt.post(
              name: NSNotification.Name("UPDATENAVIGATIONBAR"),
              object: nil
            )
        }
    }
    
    func setNavigationTitleColor(color: Color) { 
    	DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) { 
              NotificationCenter.defualt.post(
              name: NSNotification.Name("UPDATENAVIGATIONBAR"),
              object: nil,
              userInfo: [
              	"color": color,
                "forTitle": Bool
              ]
            )
        }
    }

}

extension UINavigationController { 

	open override func viewDidLoad() {
    	NotificationCenter.default.addObserver(
        self,
        selector: #selector(updateNavigationBar(notification:)),
        name: NSNotification.Name("UPDATENAVIGATIONBAR", object: nil
        )
    }
    
    @objc
    func updateNavigationBar(notification: Notification) { 
    
    	if let info = notification.userInfo {
        	let color = info["color"] as! Color
            
            if let _ = info["forTitle"] { 
            	navigationBar.standardAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor(color)]
                navigationBar.standardAppearance.titleTextAttributes = [.foregroundColor: UIColor(color)]
                
                navigationBar.scrollEdgeAppearance?.largeTitleTextAttributes = [.foregroundColor: UIColor(color)]
                navigationBar.scrollEdgeAppearance?.titleTextAttributes = [.foregroundColor: UIColor(color)]
                
                navigationBar.compactAppearance?.largeTitleTextAttributes = [.foregroundColor: UIColor(color)]
                navigationBar.compactAppearance?.titleTextAttributes = [.foregroundColor: UIColor(color)]
                
                return
            }
            
            if color == .clear { 
              let transparentAppearance = UINavigationBarAppearance()
              transparentAppearance.configureWithTransparentBackground()

              navigationBar.standardAppearance = transparentAppearance
              navigationBar.scrollEdgeAppearance = transparentAppearance
              navigationBar.compactAppearance = transparentAppearance
              return
            }
            
            let apperance = UINavigationBarAppearance()
            appeerance.backgroundColor = UIColor(color)
            
            navigationBar.standardAppearance = appeerance
            navigationBar.scrollEdgeAppearance = appeerance
            navigationBar.compactAppearance = appeerance
            
        } else {
        	let apperance = UINavigationBarAppearance()
            
            let transparentAppearance = UINavigationBarAppearance()
            
            navigationBar.standardAppearance = appeerance
            navigationBar.scrollEdgeAppearance = transparentAppearance
            navigationBar.compactAppearance = appeerance 
        }
    }

}

사용할때는 아래처럼 사용합니다.

Button(action: {
	setNavigationBarColor(color: .red)
}) { 
	Text("빨간색으로 네비게이션바 색상 빨간색으로 변경하기")
}

Button(action: { 
	resetNavigationBar()
}) { 
	Text("reset")
}

Button(action: {
	setNavigationBarTitleColor(color: .blue)
}) {
	Text("네비게이션바 타이틀 색상 파란색으로 변경하기")
}​