TREASURE408

• 

  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.

• 

  (CODE) SwiftUI 컬러 익스텐션 만들기 - 헥스코드활용 목차 Color Extension 에 대해 알아보도록 합시다. 컬러 익스텐션 SwiftUI를 통해 개발을 할 때 자주 쓰일 컬러를 만들어 보도록 하겠습니다. 먼저 SwiftUI View템플릿으로 ColorExtentsion.swift파일을 하나 만들어 주겠습니다. import SwiftUI extension Color { } 방법 1) 헥스(HEX) 코드 활용 UIColor에서 그랬던 것처럼 SwiftUI에서 사용하는 Color타입도 #abcdef같은 형태의 헥스 코드를 그대로 사용할 수 없습니다. 이렇게 때문에 값을 추출해 반환하는 기능을 추가해야만 합니다. 따라서 헥스 코드를 입력받아 Color타입을 만들어 내는 생성자를 추가해 보겠습니다. // ColorExtentsion.swift import S.. USEFUL CODE 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.

• 

  SwiftUI : Identifiable을 사용하여 연락처 뷰 연락처 뷰 이번에는 Identifiable 프로토콜을 사용하여 연락처 앱을 간단하게 만들어 보겠습니다. 메인 화면 구성 우선 contentView에 사용자 연락처를 배열해주도록 하겠습니다. 우선 아래 이미지를 다운로드하여 Assets에 넣어주겠습니다. import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image("Leon") .resizable() .scaledToFit() .frame(height: 60) .clipShape(Circle()) VStack(alignment: .leading) { Text("Leon") .fontWeight(.black) Text("+82 10 1234 6523") } } }.. SWIFTUI/Others 2021. 5. 3.

• 

  SwiftUI : Identifiable protocol Identifiable SwiftUI에서 identifiable은 자주 쓰이기 때문에 반드시 알아둬야 할 프로토콜입니다. 이것에 대해 알아보기 전에 이 프로토콜이 생겨난 배경에 대해서 먼저 알아보도록 하겠습니다. 만약 앱 내에 다음 Product 구조체타입을 정의했다고 가정해보도록 하겠습니다. Struct Product { let name: String let price: Int } 그리고 Product 타입을 사용하여 제품명과 가격이 같은 객체를 생성해보도록 하겠습니다. let PS5 = Product(name: "controller", price: 100) let PS4 = Product(name: "controller", price: 100) 이것을 Equatable 프로토콜을 채택하고 바교해보면 .. SWIFTUI/Grammar 2021. 5. 3.

• 

  SwiftUI : @Namespace / matchedGeometryEffect() 애니메이션 동기화 .matchedGeometryEffect 에 대해 알아보도록 합시다. MatchedGeometryEffect 만약 view계층의 서로 다른 부분에 동일한 view가 나타나는 등 두 view사이에 애니메이션 효과를 주려면 .matchedGeometryEffec()수정자를 사용하는 것이 좋습니다. 이 수정자를 사용하려면 동일한 view모두에 이 수정자를 연결해줘야 합니다. 이렇게 하면 두 개의 view상태를 전환 할 때 SwiftUI가 동기화된 view에 원활하게 애니메이션을 적용시킬 수 있습니다. 우선 간단하게 가장 쉬운 animation효과만 적용시켜서 예를 들어보겠습니다. import SwiftUI struct ContentView: View { @State private var isFlipped = .. SWIFTUI/Grammar 2021. 4. 30.

• 

  iPad에서 Playground를 통해 SwiftUI 코드 작성 안녕하세요. 이번에 새로 iPad의 코딩 프로그램인 Playground가 업데이트되면서 SwiftUI를 사용할 수 있게 되었습니다. ( 제가 사용한 버전은 3.4.1 입니다 ) iPad에서 SwiftUI를 코딩할 수 있는 방법에 대해 알려드리고자 합니다. 아래 영상을 통해 확인 부탁드립니다:) 코드는 영상 하단부에 남겨놓도록 하겠습니다. 😁 App Store [ Playground ] for iPad 다운로드 App Store [ Playground ] for Mac 다운로드 TIP 주의 현재 한글은 정상적으로 지원을 하지 않는 것 같습니다. 이 부분 참고해주세요. import SwiftUI import PlaygroundSupport struct Home:View { var body: some View.. TIP/iOS & MacOS TIp 2021. 4. 29.

• 

  SwiftUI : Text 목차 SwiftUI에서 가장 기본이 되는 Text에 대해 알아보도록 합시다. Text VStack(spacing: 20) { Text("서근개발블로그") Text(Image(systemName: "star.fill")) Text(Date(), style: .time) } Text view는 현재 플랫폼에 적합한 본문 글꼴을 사용하여 앱의 사용자 인터페이스에 문자열을 그려줍니다. font(_:) view modifier를 사용하여 제목이나 캡션과 같은 다른 표준 글꼴을 선택할 수 있습니다. Text의 스타일을 조금 더 세밀하게 조정해야 하는 경우 같은 modifier 를 사용하여 글꼴을 구성하거나, 커스텀 폰트를 선택할 수 있습니다. Text("서근의 블로그") .font(.system(size: 12, .. SWIFTUI/Controls 2021. 4. 29.