세그먼트 컨트롤 및 SwiftUI 2.0

세그먼트 화 된 컨트롤의 값이 변경 될 때 UI 애니메이션

Unsplash의 Markus Spiske의 사진.

전체보기를 한 세그먼트에서 다른 세그먼트로 스크롤 할 수있는 완전히 분할 된 컨트롤보기는 없습니다. 그러나 SwiftUI로 거의 모든 것을 달성 할 수 있기 때문에 그것은 완전히 괜찮습니다.

오늘, 우리는 완전히 분할 된 스크롤 효과를 만들 것입니다.

스택

• Xcode 12.3
• SwiftUI

이 자습서를 따르려면 다음과 같은 몇 가지 기본 지식이 필요합니다.

• 빠른
• Xcode 11 이상

state선택한 세그먼트 컨트롤의 값을 유지하기 위해 를 만듭니다 .

@State private var currentSegment = 0

VStack {
    Picker("A or B", selection: $currentSegment) {
		Text("A").tag(0)
        Text("B").tag(1)
    }.pickerStyle(SegmentedPickerStyle()).padding(.horizontal)
}

그리고 두 개의 세그먼트가있는 세그먼트 컨트롤이 표시됩니다.

첫 번째 세그먼트 제어보기 설정

동일한 VStack에서를 사용하여 GeometryReader한 세그먼트에서 다른 세그먼트로의 애니메이션 전환을 지원합니다.

	GeometryReader { geo in
	ZStack {
	VStack(spacing: 20) {
	HStack {
	Spacer()
	Label(
	title: { Text("A") },
	icon: { Image(systemName: "a.circle.fill") }).font(.system(size: 50))
	Spacer()
	}.background(Color.green)
	Image("image")
	.resizable()
	.scaledToFill()
	.frame(width: 250, height: 400)
	Spacer()
	}.offset(x: self.currentSegment == 0 ? 0 : -geo.size.width, y: 0)
	.animation(.default)
	}
	}.padding(.horizontal)

view rawgeometryreader.swift hosted with ❤ by GitHub

분할 된 컨트롤의 첫 번째보기에서 최소한 Label이미지와 텍스트뿐만 아니라 Image.

추가 한 모든 구성 요소가 포함 된 첫 번째 화면은 다음과 같습니다.

두 번째 세그먼트 제어보기 설정

동일한 에서 두 번째 세그먼트 컨트롤 뷰에 속하는 ZStack다른 하나 VStack를 만듭니다 .

	VStack(spacing: 20) {
	HStack {
	Spacer()
	Label(
	title: { Text("B") },
	icon: { Image(systemName: "b.circle.fill") }).font(.system(size: 50))
	Spacer()
	}.background(Color.green)
	Image("image")
	.resizable()
	.scaledToFill()
	.frame(width: 250, height: 400)
	Spacer()
	}.offset(x: self.currentSegment == 1 ? 0 : geo.size.width, y: 0)
	.animation(.default)

view rawsecondvstack.swift hosted with ❤ by GitHub

코드를 비교하면 꽤 반복적 인 일입니다. 유일한 차이점은 offset.

분할 된 제어 애니메이션

이제 애니메이션 전환이있는 작업 세그먼트 컨트롤의 전체보기가 있습니다.