iOS 16 in SwiftUI
Updated:
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)
}
}
s
🗃 Reference
개발하는 정대리 - https://youtu.be/sADVK2mJ_XE parkgyurim - https://velog.io/@parkgyurim/iOS-SwiftUI-Kakao-Login x
Leave a comment