SwiftUI : State and Binding '클릭시 화면 변경'

앞에서 @State와 @Binding을 배워봤으니 간단하게 프로젝트를 만들어서 활용해보도록 하겠습니다.

 

클릭시 화면 변경

뷰 생성

우선 화면에 표시될 뷰를 따로 만들어 주겠습니다.

//musicPlay View

import SwiftUI

struct Episode {
    let song: String
    let singer: String
    let track: String
}


struct musicPlay: View {
    
    let episode = Episode(song: "Dynamite", singer: "BTS", track: "DayTime Version")
   
   @State var isPlaying = false
    
    var body: some View {
        
            VStack {
                Text(self.episode.song)
                    .font(.title)
                    //isPlaying이 재생중이면 blue 아니면 white
                    .foregroundColor(self.isPlaying ? .blue : .white)
                
                Text(self.episode.track)
                    .font(.footnote)
                    .foregroundColor(.secondary)
                
                Text(self.episode.singer)
                
                playButton()
                
            }
            //버튼을 눌렀을때 적용시켜줄 삼항연산자 코드 추가
            .padding(isPlaying ? 100 : 30)
            .background(self.isPlaying ? Color.yellow : Color.blue)
            .cornerRadius(self.isPlaying ? 60 : 10)
    }
}

버튼추가

버튼을 눌렀을때 표시될 코드는 작성했지만 정작 버튼은 만들어주지 않았습니다. 아래에 버튼을 추가해보도록 하겠습니다.

// playButton View

struct playButton: View {
    
    //isPlaying 바인딩
    @Binding var isPlaying: Bool
    
    var body: some View {
        Button(action: {
            //애니메이션과 함께
            withAnimation{
                self.isPlaying.toggle()
            }
        }) {
            //재생중이면 일시정지 버튼
            if(self.isPlaying) {
                Image(systemName: "pause.fill")
                    .foregroundColor(Color.blue)
            //재생중이지 않으면 재생버튼 생성
            } else {
                Image(systemName: "play.fill")
                    .foregroundColor(Color.black)
            }
        }
        .font(.system(size: 30))
        .padding(12)
    }
}

Playing: Bool 타입을 Binding으로 가져왔으니 위에 코드도 추가야해야 할것이 있습니다.

 

바인딩으로 가져오면 추가햐아하는건 앞 게시글에서 다뤄서 알고계시죠? :)

//musicPlay
playButton(isPlaying: $isPlaying)

현재 까지 코드

<hide/>
//musicPlay View

import SwiftUI

struct Episode {
    let song: String
    let singer: String
    let track: String
}


struct musicPlay: View {
    
    let episode = Episode(song: "Dynamite", singer: "BTS", track: "DayTime Version")
   
   @State var isPlaying = false
    
    var body: some View {
        
            VStack {
                Text(self.episode.song)
                    .font(.title)
                    //isPlaying이 재생중이면 blue 아니면 white
                    .foregroundColor(self.isPlaying ? .blue : .white)
                
                Text(self.episode.track)
                    .font(.footnote)
                    .foregroundColor(.secondary)
                
                Text(self.episode.singer)
                
                playButton(isPlaying: $isPlaying)
                
            }
            //버튼을 눌렀을때 적용시켜줄 삼항연산자 코드 추가
            .padding(isPlaying ? 100 : 30)
            .background(self.isPlaying ? Color.yellow : Color.blue)
            .cornerRadius(self.isPlaying ? 60 : 10)
    }
}

화면 터치시 배경 변경 뷰 생성

플레이버튼을 만들어줬으니, 이제 ContentView로 가서 플레이버튼을 넣어주고 화면을 터치할 때 마다 뒷배경이 바뀌는 뷰를 만들어보겠습니다. 

//ContetView

let play = musicPlay()

struct ContentView: View {
     var body: some View {
     
            VStack{
                Spacer()
                
                musicPlay()
                    .padding(40)
                Spacer()
            }
            .frame(maxWidth: .infinity)
            .background(Color.yellow)
            .edgesIgnoringSafeArea(.all)
     }
 }

musicPlay를 가져왔고, 배경화면을 노란색으로 덮어줬습니다. 이제 버튼쪽이 아닌 버튼밖을 터치하면 배경화면을 바꾸고 싶은데 어떻게 해야할까요? 바로 아래 추가해야 할 코드들이 몇가지 있습니다.

struct ContentView: View {

    @State var index = 0
    
    //배경화면을 배열함
    private var backgroundColors = [
        Color.yellow,
        Color.blue,
        Color.green,
        Color.white
    ]

배경화면을 배열하고 index값을 @State로 추가합니다. 그리고 bakcground 쪽을 수정해줘야 합니다.

.background(backgroundColors[index])

배경을 배열에 맞는 색으로 가져왔다면, onTapGesture로 제스쳐를 추가해줘야 하겠죠?

            .onTapGesture {
                    //index가 background숫자보다 1이 낮으면 index = 0
                    if(self.index == self.backgroundColors.count-1){
                        self.index = 0
                    //그게 아니라면 index 값 + 1
                    }else {
                        self.index += 1
                }

왜 backgroundColors.count를 -1 해야 할까요?

 

이유는 Swift에서는 0 부터 카운트가 시작해서, 배경색에서의 0 = 'yellow', 1 = 'blue', 2=' green', 3='white', 4 = 'empty' 입니다. 그렇기 때문에 만약 if 문 없이 self.index += 1 을 주게 되면 index값이 '4'가 되었을때 오류가 생기게 됩니다.

 

이제 화면을 실행시켜 보도록 하겠습니다.

 

 

 

읽어주셔서 감사합니다🤟

 

이 글도 읽어보세요

SwiftUI : State에 대해 자세히 알아보기

SwiftUI : #1 Binding이란 무엇인가?

SwiftUI : 삼항 연산자 / IF