SwiftKit

시작하기에 앞서... 이 글은 @Published, @ObservedObject 을 아주~ 간단하게 설명한 글이다. 기본적인 것부터 알아두고 심도있게 들어가는것이 맞는 것 같다. (Combine 프레임워크, ViewModel... 등 공부가 필요하다) @Published 우선 @Published 에 대해서 간단하게 설명해보자. 우선 단어에 답이 있다. Publish 라는 단어의 뜻은 출판, 발행하다라는 뜻이 있다. @Published 를 통해 선언한 변수는 어딘가에 발행하거나 알려주는 그런 역할을 한다는 느낌? 을 가지면 좋다. 그렇다면 한번 코드를 통해 예시를 보자. 아래와 같이 Count 라는 class 를 만들어 주었다. 이 클래스는 count 라는 변수를 선언하고, plus() 라는 함수는 cou..

@Binding 이라는 Property Wrapper 에 대해서 알아보자. @Binding 은 @State 와 연결시켜 주는 역할을 한다. @State 는 간단하게 이야기하면 변경값에 따라 뷰를 업데이트시켜 주는 친구이다. 자세한 내용은 아래를 참고하면 좋다 :) [SwiftUI] @State 자세히 알아보기 SwiftUI를 쓰다 보면 @State를 변수 선언할 때 자주 쓰게 된다. 그렇다면 이 @State는 뭘까? 결론부터 이야기하자면 Property wrapper라고 한다. 속성을 감싼다고? 이게 무슨 뜻이지 또? Property wrapper? @State va codingnest.tistory.com 결론은 @Binding 은 값을 다른뷰로 전달하고 그 값을 변경할 수 있는 property wra..

보통 앱을 만들다 보면 버튼들이 많이 생긴다. 버튼을 만들고 여러 가지 세부설정들을 붙이지만 그 버튼이 많이 쓰일 경우 색이나 크기, 모서리값을 미리 설정해 놓으면 편하다. 어떻게 커스텀 버튼을 만드는지 간단하게 알아보자. 더 편하고 좋은 방법이 나오면 업데이트 예정이다. 아래와 같은 방법으로 CustomButton 이라는 구조체를 만든 후 label, disable, action 만 입력하면 자동적으로 아래와 같은 버튼을 간단하게 만들어 줄 수 있다. import SwiftUI struct ContentView: View { var body: some View { VStack { CustomButton(label: "Custom Button", disable: false) { // action } } ..

앱을 만들다 보면 색상을 지정해 줘야 할 때가 있다. 다양한 방법이 있지만 그중에 아예 Asset 에 New Color Set 을 추가하여 색상을 만들어 줄 수 있다. 추가 방법 아래와 같이 Asset 에 들어가서 New Color Set 을 추가해준다. 직접 Color Panel 에 들어가서 색을 지정해 줄 수 있고, Hex 코드나 RGB 값으로도 입력이 가능하다. 이렇게 색을 추가하고 아래의 코드를 추가해 주면 된다. extension을 사용하여 Color 구조체에 static let 을 사용하여 정적 멤버를 추가해준다. extension Color { static let myColor1 = Color("myColor1") static let myColor2 = Color("myColor2") } 이..

Claymorphism 기본 카드뷰와 Claymorphism스타일의 카드의 차이는 이러하다. 마치 점토의 형상을 띄고 있고, 좀 더 둥글둥글하게 표현된다. SwiftUI로 Claymorphism구현 우선 Claymorphism 을 구현하기 위해서는 기본 Shadow, inner Shadow 가 필요하고, 이 Shadow 들을 자연스럽게 나타내기 위해 Blur 처리하는 것도 중요하다. SwiftUI 에는 모든 기능이 다 있다! Blur 기능은 radius 로 어느 정도 조절이 가능했다. 우선 내가 코드로 구현한 Claymorphism 스타일의 카드뷰이다. import SwiftUI struct ContentView: View { var body: some View { ZStack { VStack { Tex..

SwiftUI를 쓰다 보면 @State를 변수 선언할 때 자주 쓰게 된다. 그렇다면 이 @State는 뭘까? 결론부터 이야기하자면 Property wrapper라고 한다. 속성을 감싼다고? 이게 무슨 뜻이지 또? Property wrapper? @State var number: Int = 0 SwiftUI에서는 변수를 선언할 때 아래와 같이 선언을 하게 된다. number는 var 키워드를 사용하여 변수(variable)로 선언되었고, Int 데이터 타입(data type)을 가지며, 초기값으로 0을 가진다. 그리고 @State는 number라는 속성(property)을 상태(State)로 감싸(wrapping) 준다. Swift에서 속성(property)은 클래스(class), 구조체(struct), ..

Playground나 Xcode로 SwiftUI파일을 만들게 된다면 처음으로 보게 되는 화면이 있을 것이다. 바로 아래와 같은 화면이다. struct ContentView: View { var body: some View { Text("Hello, World!") } } 항상 그냥 지나치지만 과연 이 코드들? 뭘까? 간단하게 뜯어보도록 하겠다. struct ContentView: View struct 키워드를 사용하여 구조체를 선언하고, ContentView라는 이름을 가지며, View 프로토콜을 따르는 타입이다. 벌써부터 복잡해진다. 구조체? 프로토콜? ContentView라는 이름을 가진다는 것 밖에 이해를 못 하겠다. 구조체 선언? 구조체란 Swift에서 데이터 타입을 정의하는 방법이다. struc..

나의 집착.. 나의 마지막 Corner Radius에 대한 집착... 아래는 위의 Rounding Corners를 만들기 위한 코드이다. import SwiftUI struct ContentView: View { var body: some View { VStack { Text("Rounding Corners") .frame(width: 180, height: 70) .foregroundColor(Color.white) .background(Color.black) .roundingCorner(20, corners : [.topLeft, .topRight]) } } } extension View { func roundingCorner(_ radius : CGFloat, corners : UIRectCorne..

애플의 Document 참조 SwiftUI에 Corner Radius를 걸어주는 방법은 크게 세가지 정도가 있다. 우선 기본적인 것은 애플의 Document에서 그대로 가져왔다. cornerRadius(_:antialiased:) | Apple Developer Documentation Clips this view to its bounding frame, with the specified corner radius. developer.apple.com 애플 Document 코드 .cornerRadius import SwiftUI struct ContentView: View { var body: some View { VStack { Text("Rounded Corners") .frame(width: 175,..

이것은 버튼 패딩 뿐만이 아니라 모든 padding에 적용되는 것 같다. 버튼에 관련된 글을 작성하다가. 아래와 같이 버튼이 아주 이상해지는 상황이 발생했다!! 나는 아래를 자른적이 없는데 잘려버리는 상황이 발생했다. 도대체 뭘까? 궁금해하다가 문득 백그라운드 색을 씌워보기로 했다. 귀여운 알약이 등장... 아하 padding(.bottom) 을 했는데 padding을 건 모든 뷰 자체가 corner radius가 걸리는 구나 라는 걸 알았다. 그래서 이번에는 padding()으로 모든곳에 padding을 걸어 준 후, background를 적용해봤다. 물론 padding 부분은 버튼이 아니지만 이런 재미있는 버튼도 연출이 가능하다. 뭐 크게 쓸모는 없는듯. 어자피 버튼은 중간이라 의미 없을 것 같다. ..