iOS 16 in SwiftUI

iPhone 14 출시와 함께, iOS 16버전이 출시 되었습니다. SwiftUI 에서도 어떠한 점들이 변경 되었는지 알아보겠습니다

1.Chart

• SwiftUI 에서 기본적으로 Chart 기능이 생겨서 여러가지 형태의 그래프를 쉽게 만들수 있게 되었습니다.

struct WeightModel: Identifiable {
	var id = UUID().uuidString
	var day: String
	var weight: Double
}

var weigthData: [WeightModel] = [
	WeightModel(day: "Sun", weight: 77),
	WeightModel(day: "Mon", weight: 80),
	WeightModel(day: "Tue", weight: 90),
	WeightModel(day: "Wed", weight: 82),
	WeightModel(day: "Thu", weight: 70),
	WeightModel(day: "Fri", weight: 60),
	WeightModel(day: "Sat", weight: 88)

]

struct ChartBasic: View {
	var body: some View {
		// custom 색 array
		let barColors: [Color] = [.red, .black, .blue, .green, .yellow, .purple, .teal]
		ScrollView {

			VStack (spacing: 20) {

				Text("1.바형 차트")
				Chart(weigthData) { item in
					BarMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					.foregroundStyle(by: .value("Day", item.day))
					//				.annotation(position: .top) {
					//					Image(systemName: "square.and.arrow.down")
					//						.foregroundStyle(.red)
					//				}
				} //: CHARTS
				// customColor
				.chartForegroundStyleScale(
					domain: weigthData.compactMap({ weight -> String in
						weight.day
					}),
					range: barColors
				)
				.frame(height: 200)

				Text("2.라인 차트")
				Chart(weightData) { item in
					LineMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					//				.lineStyle(StrokeStyle(lineWidth: 10))
					.symbol(by: .value("Day", item.day))
					//				.foregroundStyle(.red)
					.interpolationMethod(.catmullRom) // 약간 곡선 형태
					//				.interpolationMethod(.stepEnd) // 계단식 형태

				} //: CHARTS
				.frame(height: 200)

		Text("3.사각형 차트")
				Chart(weightData) { item in
					RectangleMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
				} //: CHARTS
				.frame(height: 200)

				Text("4.범위 차트")
				Chart(weightData) { item in
					AreaMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					.interpolationMethod(.catmullRom)

					RuleMark(
						y: .value("Mid", 75)
					)
					.foregroundStyle(.red)
				} //: CHARTS
				.frame(height: 200)

2.Half, Small Sheet

• Sheet 사이즈를 Custom 해서 적용할 수 있습니다

struct HalfSheetBasic: View {
	@State var showSheet: Bool = false

    var body: some View {
		Button {
			showSheet.toggle()
		} label: {
			Text("Sheet 보이기")
				.font(.title)
		}
		.sheet(isPresented: $showSheet) {
			Text("Half Sheet 입니다")
			// Custom Size
				.presentationDetents([.small, .medium, .large])
				.presentationDragIndicator(.hidden)
		}

    }
}

// Sheet Size 더 작게 Custom
extension PresentationDetent {
	static let small = Self.height(100)
}

3.LinkShare

• 인터넷 사이트 링크, 텍스트, 이미지등을 SwiftUI 에서 쉽게 내보낼 수 있는 기능입니다.

struct ShareLinkBasic: View {
    var body: some View {
		var natureImage = ImageFile(image: Image("nature"))
		VStack (spacing: 20) {
			// New ShareLink
			ShareLink(item: URL(string: "https://jacobko.info")!) {
				Text("링크 Share")
			}

			// Share Images with the help of Transferable
			ShareLink(item: natureImage, preview: SharePreview("Nature 사진", image: natureImage.image)) {
				Text("이미지 Share")
			}
		}
    }
}

struct ShareLinkBasic_Previews: PreviewProvider {
    static var previews: some View {
        ShareLinkBasic()
    }
}

struct ImageFile: Transferable {
	var image: Image
	static var transferRepresentation: some TransferRepresentation {
		ProxyRepresentation(exporting: \.image)
	}
}

4.New Grid

• Grid 에서 CellSize 라던지 Anchor 위치를 설정할 수 있게 되었습니다.

struct NewGridBasic: View {
	var body: some View {

		VStack (spacing: 20) {
			Grid {
				GridRow {
					Color.red
					Color.red
					Color.red
				} //: GRIDROW
				GridRow {
					Color.red
						.frame(width: 100, height: 100)
					Color.red
						.frame(width: 30, height: 30)
						.gridCellColumns(1) // Custom Cell Size
						.gridCellAnchor(.center) // Anchor point 위치 조절 가능
				} //: GRIDROW

			} //: GRID
			.frame(height: 200)

			Divider()

			Grid {
				GridRow {
					Color.blue
						.frame(width: 30, height: 30)
					Color.blue
						.frame(width: 30, height: 30)
					Color.blue
						.frame(width: 30, height: 30)
				} //: GRIDROW
				.gridCellUnsizedAxes(.horizontal) // Horizontal Axis 기준으로 배치

				GridRow {
					Color.blue
						.frame(width: 30, height: 30)
				} //:GRIDROW
			}  //: GRID
			.frame(height: 200)
		}  //: VSTACK
		.padding(20)
	}
}

5.NavigationStack

• 기존의 NavigationView 을 대채해서 NavigationStack 이 생겼습니다. Navigation 방식에 스택을 적용해서 page 간의 이동을 할 수 있게 되었습니다

struct NavigationStackBasic: View {

	// 스택 생성
	@State var stack = NavigationPath()

    var body: some View {
		NavigationStack(path: $stack) {
			NavigationLink("2번째 페이지 이동", value: 40)
				.navigationDestination(for: Int.self) { value in
					VStack (spacing: 20) {
						NavigationLink("3번째 페이지 이동", value: 100) // 3번째 페이지로 이동
						Text("나의 나이는 \(value) 입니다")
						Button {
//							stack.removeLast() // 이전 페이지로 이동 stack 의 마지막 부분 없앰
							stack = .init() // 완전 초기화면으로 이동
						} label: {
							Text("초기 화면으로 이동")
						}

					}  //: VSTACK
				}
		}  //: NAVIGATION
    }
}

6.Gauge View

• 게이지 표시를 쉽게 할수 있는 Gauge View 기능이 추가 되었습니다

struct GaugeViewBasic: View {
    var body: some View {
		let gradient = Gradient(colors: [.green, .yellow, .orange, .red])
		Gauge(value: 0.4, label: {

		}, currentValueLabel: {
			Text("40%")
				.font(.caption)
		})
		.gaugeStyle(.accessoryLinear)
		.tint(gradient)
		.padding()
    }
}

---

s

🗃 Reference

개발하는 정대리 - https://youtu.be/sADVK2mJ_XE parkgyurim - https://velog.io/@parkgyurim/iOS-SwiftUI-Kakao-Login x