- Total
꿈꾸는리버리
[Xcode] Preview 활용기 (기기 변경, 라이트 다크 모드 등 ) 본문
SwiftUI에서 Preview를 사용하면서 활용했던 것들에 대한 내용이다.
Preview 활용기
우선 DarkMode, 여러 기기 등등을 띄우는 활용기에 대한 내용....! 아래 주석으로 표시해둔 부분의 코드가 바뀐다.
struct Content_Previews: PreviewProvider {
static var previews: some View {
Group {
// 여기 들어가는 뷰들이 바뀌는 거임
}
}
}
⚠️ 참고로 Preview의 기기에 따라 Userdefault나 Coredata와 같은 디바이스 용 데이터는 각각 저장된다. 한 시뮬레이터가 하나의 다른 기기라고 생각하면 편하다.
🌷 기기 변경
1️⃣ 코드 활용
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro")) // 세팅하는 기기명
.previewDisplayName(device.rawValue) // 기기 이름 닉네임
근데 매번 PreviewDevice를 찾고 있을 수는 없으니까..
enum DeviceName: String {
// iPhones
case iPhoneSE1 = "iPhone SE (1st generation)"
case iPhone6s = "iPhone 6s"
case iPhone6sPlus = "iPhone 6s Plus"
case iPhone7 = "iPhone 7"
case iPhone7Plus = "iPhone 7 Plus"
case iPhone8 = "iPhone 8"
case iPhone8Plus = "iPhone 8 Plus"
case iPhoneX = "iPhone X"
case iPhoneXR = "iPhone XR"
case iPhoneXS = "iPhone XS"
case iPhoneXSMax = "iPhone XS Max"
case iPhone11 = "iPhone 11"
case iPhone11Pro = "iPhone 11 Pro"
case iPhone11ProMax = "iPhone 11 Pro Max"
case iPhoneSE2 = "iPhone SE (2nd generation)"
case iPhone12Mini = "iPhone 12 mini"
case iPhone12 = "iPhone 12"
case iPhone12Pro = "iPhone 12 Pro"
case iPhone12ProMax = "iPhone 12 Pro Max"
case iPhone13Mini = "iPhone 13 mini"
case iPhone13 = "iPhone 13"
case iPhone13Pro = "iPhone 13 Pro"
case iPhone13ProMax = "iPhone 13 Pro Max"
case iPhoneSE3 = "iPhone SE (3rd generation)"
case iPhone14 = "iPhone 14"
case iPhone14Plus = "iPhone 14 Plus"
case iPhone14Pro = "iPhone 14 Pro"
case iPhone14ProMax = "iPhone 14 Pro Max"
case iPhone15 = "iPhone 15"
case iPhone15Plus = "iPhone 15 Plus"
case iPhone15Pro = "iPhone 15 Pro"
case iPhone15ProMax = "iPhone 15 Pro Max"
// iPads
case iPad5 = "iPad (5th generation)"
case iPad6 = "iPad (6th generation)"
case iPad7 = "iPad (7th generation)"
case iPad8 = "iPad (8th generation)"
case iPad9 = "iPad (9th generation)"
case iPad10 = "iPad (10th generation)"
case iPadAir3 = "iPad Air (3rd generation)"
case iPadAir4 = "iPad Air (4th generation)"
case iPadAir5 = "iPad Air (5th generation)"
case iPadPro97 = "iPad Pro (9.7-inch)"
case iPadPro105 = "iPad Pro (10.5-inch)"
case iPadPro11_1 = "iPad Pro (11-inch) (1st generation)"
case iPadPro11_2 = "iPad Pro (11-inch) (2nd generation)"
case iPadPro11_3 = "iPad Pro (11-inch) (3rd generation)"
case iPadPro11_4 = "iPad Pro (11-inch) (4th generation)"
case iPadPro129_2 = "iPad Pro (12.9-inch) (2nd generation)"
case iPadPro129_3 = "iPad Pro (12.9-inch) (3rd generation)"
case iPadPro129_4 = "iPad Pro (12.9-inch) (4th generation)"
case iPadPro129_5 = "iPad Pro (12.9-inch) (5th generation)"
case iPadPro129_6 = "iPad Pro (12.9-inch) (6th generation)"
case iPadMini5 = "iPad mini (5th generation)"
case iPadMini6 = "iPad mini (6th generation)"
// Apple Watches (Optional if needed)
case watchSE = "Apple Watch SE"
case watchSeries6 = "Apple Watch Series 6"
case watchSeries7 = "Apple Watch Series 7"
case watchSeries8 = "Apple Watch Series 8"
case watchUltra = "Apple Watch Ultra"
case watchUltra2 = "Apple Watch Ultra 2"
}
사용시에는 아래와 같이 이용하면 된다.
let device = DeviceName.iPhone14Pro
ContentView()
.previewDevice(PreviewDevice(rawValue: device.rawValue))
.previewDisplayName(device.rawValue)
2️⃣ 기기 선택
+) 기기를 더 만들고 싶다면 아래와 같이 진행하면 된다. 이름도 내 입맛에 맞게 커스텀이 가능하다.
🌷여러 기기 띄우기
ContentView()
// modifier로 기기 및 다크모드 등 설정 가능
ContentView()
// modifier로 기기 및 다크모드 등 설정 가능
🌷 Canvas Device Settings
아래와 같이 Color, Orientation, Dynamic Type를 수정할 수 있다. 이 방법 말고도 다른 방법은 아래를 확인 !
1️⃣ DarkMode / LightMode
ContentView()
.environment(\.colorScheme, .dark) // 다크모드
ContentView()
.environment(\.colorScheme, .light) // 라이트모드
위와 같이 코드로 colorScheme을 지정해도 되지만 개인적으로는 아래와 같은 방법을 많이 이용하는 편이다.
2️⃣ 가로 세로모드
ContentView()
.previewInterfaceOrientation(.portrait) // 세로 모드
.previewDisplayName("세로 모드")
ContentView()
.previewInterfaceOrientation(.landscapeLeft) // 가로 모드
.previewDisplayName("가로 모드")
이것도 아래와 같은 방법으로 더 쉽게 여러뷰를 띄우고 확인할 수 있다.
3️⃣ Dynamic Type sizes
ContentView()
.environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
위와 같이 Dynamic TypeSize에는 등등의 종류가 있고, 이것도 아래와 같은 방법으로 더 쉽게 여러뷰를 띄우고 확인할 수 있다.
🌷 선택 마우스 활용
아래의 화살표를 선택하고 코드를 만지면 우측 Preview와 같이 어느 부분이 작업되고 있는지 확인 할 수 있다. 반대로 화살표를 선택하고 Preview를 만져도 좌측에서 어느 부분의 코드인지 확인할 수 있다.
🌷 고정 활용
아래의 그림처럼 핀을 박아두면 다른 뷰에서 작업할 때 다른 Preview들이랑 같이 확인할 수 있다. 개인적으로는 부모 뷰나 자식 뷰 작업을 할 때 잘 활용했던 것 같다.
'오뚝이 개발자 > iOS' 카테고리의 다른 글
[앱스토어 커넥트 유영하기] - 특가 코드 (0) | 2025.01.09 |
---|---|
xcode에서 svg 이용할 때 주의할 점 (1) | 2024.12.15 |
< OurDay - 우리의 캐릭터를 위젯 디데이로 만나기 > 출시 스토리 (1) | 2024.11.22 |
KWDC ( iOS 컨퍼런스)에서 얻은 영감씨앗들로 열심히 농사해보자 (10) | 2024.10.29 |
[Xcode 6] 커스텀 자동 완성 만드는 방법 (Code Snippet) (0) | 2024.10.10 |