SWIFTUI100

• 

  SwiftUI : Link Link에 대해 알아보도록 합시다. Link SwiftUI에서는 Link버튼을 누르면 Safari에서 URL을 기능을 제공합니다. 사용 방법은 간단합니다. 아래 코드와 같이 버튼의 제목과 표시 할 URL 주소를 지정하면됩니다. Link("Learn SwiftUI", destination: URL(string: "https://seons-dev.tistory.com/")!) //주소위에 '!' 옵셔널 이미지 또는 SF Symbols를 활용해서 링크 버튼을 만들 수 있습니다. Link(destination: URL(string: "https://seons-dev.tistory.com/")!) { HStack { Text("서근 개발블로그") Image(systemName: "tortoise.fill") .f.. SWIFTUI/WebView 2021. 1. 30.

• 

  SwiftUI : Menu 버튼을 눌렀을 때 메뉴를 표시 본 게시글은 acking with swift님의 게시글을 참고하여 작성된 글 입니다. menu에 대해 알아보도록 합시다. Menu SwiftUI는 버튼에서 팝업 메뉴를 표시하기위한 Menu라는 전용 뷰를 제공합니다. 메뉴에 표시할 항목을 제어하기 위해 다양한 버튼을 추가해줄 수 있습니다. 우선 간단한 예를 한번 알아보겠습니다. struct ContentView: View { var body: some View { Menu("Create") { Button("Cancel", action: {}) Button("Search", action: {}) Button("Add", action: {}) } } } Menu 키워드를 사용하고 메뉴 이름을 “Create”로 지정해줬습니다. 다음으로 메뉴 중괄호{ }안에 .. SWIFTUI/Others 2021. 1. 30.

• 

  SwiftUI : WebView 생성(코드) WebKit에 대해 알아보도록 합시다. WebView 화면구성 WebView를 구성하기 전에 설정해줘야 하는것이 있습니다. 사전 설정 1. Xcode에 Info.plist로 들어가서 목록 제일 아래를 클릭후 엔터↩를 눌러주세요 2. App Transport Security Settings을 추가한 후, 그안에 Allow Arbitrary Loads를 추가해주세요. 3. Allow Arbitrary Loads값을 YES 로 바꿔주면 인터넷을 사용 할 수 있습니다. 코드 작성 이제, SwiftUI View를 'WebView'로 따로 만들어 놓겠습니다. 그리고 아래 코드를 넣어주세요. import SwiftUI import WebKit struct MyWebView: UIViewRepresentable { v.. SWIFTUI/WebView 2021. 1. 27.

• 

  SwiftUI : Group / GroupBox Group / GroupBox에 대해 알아보도록 합시다. Group Group에서 꼭 외워야 할 것은 VStack 과의 차이점입니다. 간단하게 말하자면 - VStack은 최대 10개의 자식을 가질 수 있습니다. (HStack, LazyVStack, LasyHStack 모두 동일) - Group은 이 문제를 해결해줍니다. 코드로 한번 같이 보도록 합시다. 아래와 같이 VStack만으로 11개의 자식을 만들게 되면 컴파일 오류가 생깁니다. NavigationView { VStack { Text("1") Text("2") Text("3") Text("4") Text("5") Text("6") Text("7") Text("8") Text("9") Text("10") Text("11") //11번째부터는 컴파일 .. SWIFTUI/View layout 2021. 1. 27.

• 

  SwiftUI : Animation #2 Animation #1강 Animation #2 animation stack 컨트롤 다음 예제는 클릭시 clipShape를 통해 배경색과 버튼 모양들이 변하는 코드를 작성하도록 하겠습니다. 우선 @State 에 bool 값을 할당해 준 후, 버튼 액션을 toggle로 설정해줍니다. struct ContentView: View { @State private var animationAmount = false var body: some View { Button("Tap Me") { self.animationAmount.toggle() } //background 보다 frame이 먼저 와야 한다. .frame(width: 200, height: 200) .background(Color.blue) .foregro.. SWIFTUI/Others 2021. 1. 26.

• 

  SwiftUI : Animation #1 Animation에 대해 알아보도록 합시다. Animation #1 버튼을 클릭할때마다 화면 또는 이미지가 커지는 효과를 주는것은 CGFloat 와 .scaleEffect를 사용해야합니다. struct ContentView: View { //State로 animationAmount에 CGFloat을 넣어준다 @State private var animationAmount: CGFloat = 1 var body: some View { Button("Tapl Me") { //버튼이 탭 될때마다 +1씩 상승한다 self.animationAmount += 1 } .padding(50) .background(Color.green) .foregroundColor(.white) .clipShape(Circle()) /.. SWIFTUI/Others 2021. 1. 26.

• 

  SwiftUI : DatePicker / DateFormatter 목차 DatePicker대해 알아보도록 합시다. (picker에 대해 알아보려면 링크를 클릭해주세요) DatePicker Picker에 시간/날짜 를 선택 할 수 있는 DatePicker에 대해 알아보도록 하겠습니다. SwiftUI의 DatePicker View는 UIKit의 DatePicker와 유사하며, 모양과 작동 방식을 제어하기 위한 다양한 옵션과 함께 제공됩니다. 값을 저장하는 모든 컨트롤과 마찬가지로 앱의 특정 @State 에 바인딩되어야 합니다. struct ContentView: View { @State private var wakeUp = Date() var body: some View { //텍스트를 "" = empty로 지정할 수 있다. DatePicker("날짜를 선택하세요", se.. SWIFTUI/View layout 2021. 1. 25.

• 

  SwiftUI : Stepper (onIncrement / onDecrement) 목차 Stepper에 대해 알아보도록 합시다. Stepper 사용자가 값을 증가시키거나 감소시키면서 세분화된 제어를 하도록 하려면 Stepper 컨트롤을 사용해야 합니다. 예를들어 Stepper는 다음과 같이 수행 됩니다. 값을 1로 위아래로 변경합니다. 규정된 범위 내에서 작동 됩니다. Stepper의 가능한 값 범위에서 특정 양만큼 단계적으로 수행 합니다. 고급예제를 알아 보기 전에 간단하게 Stepper를 표현하는 방법에 대해서 보고 가도록 하겠습니다. Stepper를 사용하면 + (incrementStep) - (decrementStep) 버튼이 나오는 화면을 구성 할 수 있습니다. struct ContentView: View { //Stepper에 보여질 Amount값을 추가해주고 @State .. SWIFTUI/View layout 2021. 1. 25.

• 

  SwiftUI : 삼항 연산자 / IF 삼항 연사자에 대해 알아보도록 합시다. 삼항 연산자 true ? Text("삼항 연산자는 잘 실행 됩니다."): Text("0") Nil-coalescing : 옵셔널 값을 풀어주는 개념으로 삼항 연사자를 활용해서 쓸 수 있습니다. TIP 연산자 란? 값을 확인, 변경, 결합하는 데 사용하는 특별한 기호나 문구 삼항 연사자에서?는 true, : 는 false 라고 생각하면 좋은데, 예를 들어 useRedText가 true이면 yellow, fasle이면 green으로 배경색을 바뀌게 하고 싶으면 아래와 같이 코드를 작성할 수 있습니다. .background(useRedText ? Color.yellow : Color.green) struct ContentView: View { //useRedText를 f.. SWIFTUI/Grammar 2021. 1. 25.

• 

  SwiftUI : @State, @ObservedObject / Struct를 Class로 목차 @State 왜 @State는 오직 Struct에서만 작동을 하는가? 앞전 게시물에서 수없이 나왔던 @State 와 Struct에 대해서 알아보겠습니다. SwiftUI에서 가장 기본이 되고 많이 사용하는 것들이니 꼭 알아두시길 바랍니다. 만약 사용자가 버튼을 누르거나 스크롤을 하거나 텍스트에 상자를 입력했다고 치면, 그 특정 행동은 그 State 즉 상태를 변경합니다. 그 이후에 일어날 일은 State가 변경되면 자동으로 변환시켜주는 일을 합니다. 사용자 인터페이스를 업데이트하는 것이죠. 그렇다면 어떻게 이렇게 할 수 있을까요? View를 사용할 때 ContentView가 실제로 View 프로토콜을 준수한다는 것을 기억해야 합니다. Body속성을 작성하죠. 이것이 View 프로토콜의 유일한 요구 사.. SWIFTUI/Grammar 2021. 1. 25.

• 

  SwiftUI : ForEach ForEach ForEach(array, id: \.self) name in 일반적으로 ForEach를 사용하여 SwiftUI 에서 View를 반복할 수 있습니다. TIP ForEach를 보고 Swift시퀀스의 forEach()방식과 동일하다고 생각하기 쉽지만, 보시는 것처럼 그렇지 않습니다. SwiftUI의 ForEach는 Struct구조 이므로 보기 본문에서 직접 반환할 수 있습니다. 항목 배열을 제공하고, 각 항목을 고유하게 식별하여 값이 변경될 때 업데이트하는 방법을 알 수 있습니다. 또한 루프의 각 항목에 대한 뷰를 생성하기 위해 실행할 클로저를 전달합니다. 아래 코드는 1부터 10까지 row값이 화면에 나타나도록 하는 코드입니다. Form { ForEach(1.. SWIFTUI/View layout 2021. 1. 24.

• 

  SwiftUI : UIKit와 SwiftUI 구성요소 비교 View and Controls UIKit SwiftUI UILabel Text UITextField TextField UITextField(isSecureTextEntry) SecureField UIButton Button UllmageView Image UISwitch Toggle UISlider Slider UIStepper Stepper UIPickerView Picker(WheelPickerStyle) UISegmentedControl Picker(SegmentedPickerStyle) UIDatePicker DatePicker UITextView TextEditor (일반 문자열에만 해당) UIStackView HStack(가로 방향), VStack(세로 방향) UIScrollView Scro.. SWIFTUI/Grammar 2021. 1. 24.

• 

  SwiftUI : UserDefaults 정보 수집 및 저장 UserDefaults UserDefaults 를 사용하여 사용자 설정을 저장 할 수 있습니다. 만약 어플에서 버튼으로 숫자를 4까지 올려놓고, 앱을 재실행 했을때 사용자가 눌렀던 카운트 4가 그대로 이어지는것을 볼 수 있습니다. 일단, 버튼을 눌렀을때 1씩 올라가는 화면을 만들어 보겠습니다. struct ContentView: View { //tapCount는 0 으로 지정 @State private var tapCount = 0 var body: some View { Button("Tap count: \(tapCount)") { //버튼이 클릭될때마다 "1"씩 증가 self.tapCount += 1 } } } 이제, UserDefaults를 이용해 정보를 수집하고 저장하는 코드를 만들어 보겠습니다. .. SWIFTUI/Grammar 2021. 1. 24.

• 

  SwiftUI : Alert (알림 메세지) iOS 15 버전 부터 더이상 아래 형태로 사용 되지 않습니다. ( 업데이트 예정) Alert 대해 알아보도록 합시다. Alert Alert는 SwiftUI에서 UIKit의 UIAlertView와 동일합니다. SwiftUI에서 어떻게 경고메세지를 만들고 표시하는지 알아봅시다. 기본 코드 .alert(isPresented: $____) { Alert(title: Text(""), message: nil, dismissButton: .defalut(Text(""))) } Alert 사용 조건 Alert를 표시할지에 대한 여부를 지정하는 Bool binding (state) Alert를 반환하는 closure SwiftUI는 bool 값이 상태이기 때문에 변경 될 때마다 뷰를 새로 고칩니다. 결과적으로 tru.. SWIFTUI/Controls 2021. 1. 23.

• 

  SwiftUI : EditButton [onDelete, OnMove] OnDelete와 OnMove에 대해 알아보도록 합시다. EditButton 현재 편집 범위에 대한 편집 모드를 toggle하는 버튼입니다. SwiftUI는 컬렉션에서 개체를 삭제하는 방법을 제어하는 데 사용할 onDelete()수정자를 제공합니다. 이 기능은 목록 및 각 행에만 거의 사용됩니다. 각 행에 표시되는 행 목록을 만든 다음, 각 행에 대해 OnDelete()를 추가해 사용자가 원하지 않는 행을 제거 또는 이동할 수 있습니다. 버튼 토글시 새로운 번호 생성 숫자 표시되는 목록을 만들고 버튼을 누를 때마다 새 번호가 나타나게 만들어 봅시다. 그 코드는 다음과 같습니다. import SwiftUI struct ContentView: View { @State private var numbers = .. SWIFTUI/Controls 2021. 1. 23.