SWIFTUI100

• 

  SwiftUI : Mask Mask SwiftUI에서는 mask()수정자를 사용하여 이미지 또는 텍스트를 마스크 할 수 있습니다. 간단한 예제를 보면서 어떻게 사용할 수 있는지 알아보도록 할게요. VStack { Image("sample2") .resizable() .aspectRatio(contentMode: .fit) .mask( ZStack { Circle() .frame(width: 208, height: 208) Circle() .frame(width: 90, height: 90) .offset(x: 80, y: 55) } ) .frame(maxHeight: .infinity) } 이제 mask를 활용해서 평점을 줄 수 있는 버튼을 하나 만들어 줄까 해요. 우선 별이 5개인 뷰를 만들어줍니다. import SwiftUI .. SWIFTUI/Others 2021. 5. 30.

• 

  SwiftUI : Gesture TapGesture 에 대해 알아보도록 합시다. 모든 SwiftUI view에는 Gesture 인식기가 연결될 수 있으며 이러한 Gesture인식기는 인식기가 활성화될 때 실행될 클로저를 차례로 연결할 수 있습니다. TapGesture 이것을 만들 때 제스처를 트리거하는 데 걸리는 탭 수를 지정한 다음, 제스처가 발생할 때 실행될 onEnded 클로저를 연결할 수 있습니다. 예를 들어 택할 때마다 작아지는 이미지를 만들어 보겠습니다. struct ContentView: View { @State private var scale: CGFloat = 1.0 var body: some View { Image("seogun") .scaleEffect(scale) .gesture( TapGesture() .onEn.. SWIFTUI/Others 2021. 5. 29.

• 

  SwiftUI : If let과 Guard If let / Guard 안전한 코딩은 정말 좋은 코드입니다. 값이 있는지 없는지 선택적 변수인지의 여부 등을 안전하게 나타내 줍니다. 안전한 코딩에는 if let과 guard let이 있습니다. If let의 대안은 guard let이며 unwrapping 옵셔널도 이에 해당합니다. guard let은 우리를 위해 언래핑 되지만, 내부에서 nil을 찾으면 사용한 함수, 루프 또는 조건을 종료할 수 있습니다. guard let 도 if let과 비슷하지만 다른 점이 있습니다. guard라는 것은 지키다 라는 뜻처럼, guard 문은 특성상 함수(메서드)에서만 쓰이며, guard구문의 조건을 만족하지 못하면 else문으로 빠져서 함수의 실행을 종료시킬 때 사용합니다. If let SwiftUI에서 사용해.. SWIFTUI/Grammar 2021. 5. 14.

• 

  SwiftUI : onAppear() onAppear() View 가 나타날 때 실행될 acttion을 추가합니다. SwiftUI는 UIKit의 ViewDidDisplay() 와 동등한 기능을 제공합니다. 원하는 모든 코드를 이 두 이벤트에 첨부할 수 있고, SwiftUI는 이벤트가 발생할 때 이것을 실행합니다. 즉 특정 뷰가 화면에 나타날 때 특정 항목을 로드합니다. struct ContentView: View { var body: some View { NavigationView { VStack { NavigationLink(destination: DetailView()) { Text("onAppear() & onDisappear()") } } } } } struct DetailView: View { var body: some View {.. SWIFTUI/Grammar 2021. 5. 14.

• 

  SwiftUI : Markups과 Documentation을 추가하는 방법 Markups과 Documentation Xcode에 코드를 작성하면서 코드를 Markup 하는 방법에 대해 알아보려고 합니다. 실제로 다른 개발자 혹은 자신을 위해서 코드에 섹션이나 메모를 하고 팀에서 일할 때 정말 좋은 Documentation을 만들 수 있습니다. 우선 아주 간단하게 뷰를 구성해주도록 하겠습니다. import SwiftUI struct DocumentationView: View { @State var data: [String] = [ "Text", "Slider", "Environment" ] @State var showAlert: Bool = false var body: some View { NavigationView { ScrollView { Text("서근개발블로그") Text.. SWIFTUI/Others 2021. 5. 13.

• 

  SwiftUI : Picker / Picker Style / Section Picker 와 Section에 대해 알아보도록 합시다. Picker selection binding, label, content를 표시할 내용을 제공하여 Picker를 만듭니다. selection parameter를 현재 selection으로 표시할 값을 제공하는 바인딩된 속성으로 설정합니다. 레이블을 선택 도구에서 내용 선택 목적을 시각적으로 설명하는 보기로 설정한 다음 선택 도구에서 표시할 내용을 제공합니다. ForEach 간단하게 Picker와 ForEach를 사용하여 목록을 선택할 수 있는 피커 화면을 구성할 수 있습니다. struct ContentView: View { //학생 목록을 만들고 let students = ["서근", "희진", "미진", "슬기"] //State으로 값이 수정되도.. SWIFTUI/View layout 2021. 5. 13.

• 

  SwiftUI : TextField (hideKeyboard 코드) 목차 TextField에 대해 알아보도록 합시다. TextField 레이블과 값에 대한 바인딩이 있는 TextField를 작성할 수 있습니다. 값이 문자열인 경우, TextField는 사용자가 입력하거나 편집할 때 값을 계속 업데이트합니다.String타입이 아닌 경우, return값을 누르는 등 사용자가 편집을 커밋할 때 값을 업데이트합니다. TextField에 텍스트가 커밋되면 내부에 메서드가 호출되게 할 수 있습니다. import SwiftUI struct ContentView: View { @State private var name = "" //State var body: some View { Form { TextField("아이디", text : $name) //$표시 필수 Text("Your n.. SWIFTUI/Controls 2021. 5. 12.

• 

  SwiftUI : ActionSheet ActionSheet에 대해 알아보도록 합시다. ActionSheet @State var someBindig = fasle .actionSheet(isPresented: $someBinding) { ActionSheet(title: Text, message: Text, button: [ActionSheet.Button]) } SwiftUI는 사용자가 선택할 수있는action Sheet를 만들기위한 ActionSheet View를 제공하며 Alert와 유사하게 작동합니다. Alert에 대해 자세히 알아보기 Alert와 마찬가지로 action Sheet를 표시할지 여부를 추적하는 속성을 정의해야 합니다. 그런 다음 actionSheet() 수정자를 사용하여 해당 속성을 모니터링하고 조건이 true가 되면 선.. SWIFTUI/Others 2021. 5. 12.

• 

  SwiftUI : Sheet / FullScreenCover (@Environment / presentationMode) Sheet .sheet(isPresented: $someBinding) { SecondView() } SwiftUI에는 여러 가지 view를 보여주는 방법이 있습니다. 가장 기본적인 것 중 하나는 sheet입니다. 이것은 기존 뷰 위에 새로운 뷰가 표시됩니다. iOS에서는 자동으로 프레젠테이션을 제공하여 현재 뷰가 뒤쪽으로 빠지고 새로운 뷰가 맨 위 애니메이션으로 표시됩니다. sheet(isPresented: ) 는 Alerts와 코드가 유사합니다 대신, sheet를 보여야 하는 조건을 정의하고, 그러한 조건이 true 이거나 false가 되면 sheet가 각각 제시되거나 기각됩니다. //보여주고싶은 뷰 하나를 생성한다 struct SecondView: View { var body: some View {.. SWIFTUI/View layout 2021. 5. 11.

• 

  SwiftUI : Sheet & FullScreenCover & Transition & Animation 비교 Sheet & FullScreenCover & Transition & Animation 이번에는 Sheet & FullScreenCover & Transition & Animation를 비교해보도록 하겠습니다. 위 수정자를 사용해서 모두 동일하게 sheet의 효과를 줄 수 있습니다. 간단하게 sheet부터 시작하도록 하겠습니다. Sheet sheet수정자는 sheetView에 presentationMode를 적용시켜 sheet뷰에서 "X" 버튼을 누르면 닫힐 수 있도록 만들어 줬습니다. import SwiftUI // MARK : Body struct ContentView: View { @State var showView: Bool = false var body: some View { ZStack(ali.. SWIFTUI/Others 2021. 5. 11.

• 

  SwiftUI : 애니메이션과 비슷한 Transitions Transition 에 대해 알아보도록 합시다. Transitons Transitions은 Animation과 매우 유사한 기능입니다. 하지만 이것을 사용하기 위해서는 반드시 조건부가 필요합니다. 확실히 animation을 사용하는 것보다는 복잡하죠. 바로 코드로 한번 알아볼게요. 기본적으로 버튼이 false이면 도형이 숨겨지고 true이면 나타나게 opactiy를 사용하여 구현할 수 있습니다. import SwiftUI struct ContentView: View { @State var transitionView: Bool = false var body: some View { ZStack(alignment: .bottom) { VStack{ Button("버튼") { transitionView.togg.. SWIFTUI/Others 2021. 5. 10.

• 

  SwiftUI : Animation #3 Animation #2강 Animation #3 이번에는 Animation을 실제로 비교해가면서 사용해보도록 하겠습니다. 우선 Animation은 앞서 배웠기 때문에 바로 코드로 비교해보도록 할게요 :) Animation.default 각 RoundedRectangle에 삼항연산자를 사용해서 값을 넣어줬고 overlay를 사용하여 어느 효과를 부여받고 있는지 보기 좋게 텍스를 적어줬습니다. 이제 아래 결과 화면을 보며 효과를 비교해 볼 수 있겠죠? import SwiftUI struct ContentView: View { @State var animate: Bool = false let timing: Double = 10.0 var body: some View { VStack { Button("애니메이션.. SWIFTUI/Others 2021. 5. 10.

• 

  SwiftUI : Lazy V(H)Grid 목차 Grid에 대해 알아보도록 합시다. Lazy V(H)Grid List와 Grid의 차이 Grid는 List와 친척이라고 생각하시면 됩니다. 일단 Grid 와 List의 차이를 간단하게 그림으로 보겠습니다. LazyV(H)Stack과의 차이는 다음 게시물에서 다루겠습니다, List List는 일반적으로 Vertical Direction 으로 목록을 나타내 준다고 보시면 됩니다. 가장 많이 사용되는 View 라고 생각하시면 됩니다. Grid Grid는 horizontal Direction으로 사진을 배열하여 화면을 구성하기 좋습니다. 가장 좋은 예로 Instargram / Pinterest / Netflix 의 레이아웃을 떠올리시면 됩니다. Grid Xcode에서 코드로 어떻게 사용하는지에 바로 알아보.. SWIFTUI/View layout 2021. 5. 8.

• 

  SwiftUI : ScrollView ScrollView SwiftUI의 ScrollView를 사용하면 뷰의 Scroll 컨테이너를 비교적 쉽게 만들 수 있습니다. 그 이유는 내부에 배치 한 콘텐츠에 맞게 자동으로 크기가 조정되고 안전 영역을 피하기 위해 추가 삽입물을 자동으로 추가하기 때문입니다. List / form으로 Scroll되는 데이터 테이블을 만드는 방법도 있지만, 임의 날짜를 Scroll하려는 경우에는 ScrollView로 전환해야 합니다. 예시로 1부터 100까지 나오는 ScrollView를 만들어 봅시다. ScrollView() { VStack { ForEach(1.. SWIFTUI/View layout 2021. 5. 8.

• 

  SwiftUI : Dynamic List and identifiable 목차 Dynamic List 이번에는 List를 사용하여 Dynamic List View를 만들어 보도록 하겠습니다. 위처럼 포켓몬의 이름에 따른 타입과 그에 맞는 컬러를 매치시키시고 오른쪽 상단에 있는 navigationBarItems을 누를 때마다 랜덤 하게 포켓몬의 이름이 생성되도록 하는 것이 목표입니다. 우선 간단하게 아래와 같이 작성해보도록 하겠습니다. 우선 pokemon의 모델을 struct로 하나 만들어 주겠습니다. struct pokemonModel { let name: String let type: String let color: Color let imagename: String } 그리고 @State변수로 name과 type그리고 color를 배열시켜 주도록 합니다. struct Pok.. SWIFTUI/Controls 2021. 5. 4.