SWIFTUI100

• 

  SwiftUI : #3 Understanding @Binding Binding에 관한 첫번째 게시글을 보시려면 여기를 클릭해주세요. Binding에 관한 두번째 게시글을 보시려면 여기를 클릭해주세요. Understanding @Binding 저희는 이전 게시물에서 Binding이 정확히 무엇인지 배워봤습니다. 이제 바인딩에 대해 다시 살펴보고 바인딩을 사용하여 애플리케이션을 만드는 방법을 살펴보도록 하겠습니다. 첫번째로 할것은 음악 트랙에 따라 달라지는 UI를 만들어 보겠습니다. Xcode 프로젝트명을 'SwiftUI_Binding_music'으로 생성하고 새로운 그룹을 만들어서 모델 안에 새로운 Swift 파일을 만듭니다. //Episode.swift import Foundation struct Epicode { let song: String let singer: .. SWIFTUI/Grammar 2021. 2. 12.

• 

  SwiftUI : #2 Hello Binding (Example) Binding에 관한 첫번째 게시글을 보시려면 여기를 클릭해주세요. 단방향 바인딩 과 양방향 바인딩 이번에는 어떤것이 Uni Directional Binding(단방향 바인딩) 이며, 어떤것이 Dicrectional Binding(양방향 바인딩)인지 정확히 알아보고 공부해보려고 합니다. 바인딩의 개념을 이해할 수 있도록 간단한 예제를 만들어 보도록 하겠습니다. @State는 변수(name)가 변경 될 때마다 body를 다시 렌더링 한다는 의미입니다. 그런 의미에서 이름을 사용하여 body에 있는 모든것들을 업데이트 하죠. struct ContentView: View { @State var name: String = "" var body: some View { Text(name) } } text에 name.. SWIFTUI/Grammar 2021. 2. 12.

• 

  SwiftUI : #1 Binding이란 무엇인가? 'Binding에 대해 알아보도록 합시다. Binding은 총 3개의 게시물로 다룰 예정입니다. SwiftUI 에서 중요한 Binding(바인딩)에 대해 알아보겠습니다. 바인딩에 가장 일반적인 방법 또는 방향 중 두 가지는 1. View to View Model 바인딩 2. View Model to View 바인딩 입니다. 그렇다면 View to View Model 바인딩이 무엇일까요? View to View Model TextField를 예로 들어보겠습니다. 아래 사진과 같이 이름과 나이를 쓰는 텍스트필드 박스가 있고, 특정 화면을 제어하거나 표시하는 View Model이 있습니다. 만약 이름과 나이를 입력하면 UserViewModel의 Name/age 속성에 바인딩 됩니다. 자동으로 Name/age .. SWIFTUI/Grammar 2021. 2. 11.

• 

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

• 

  SwiftUI : Lottie Animation(애니메이션) Lottie Animation SwiftUI에서 Lottie Animaiton을 사용하는 방법에 대해 알아보도록 하겠습니다. 우선, 로티애니메이션을 사용하려면 cocoapods등을 통하여 Xcode 프로젝트에 추가해줘야합니다. 설치방법 1. airbnb - lottie-ios의 code 주소를 복사합니다. https://github.com/airbnb/lottie-ios.git 2. 프로젝트를 열고 File 👉🏻 Swift Packages 👉🏻 Add Package Dependency를 누른다. 3. 위 코드 주소를 넣고 설치를 진행합니다. (첫 설치시, 사용자의 컴퓨터 성능에 따라 시간이 소요 될 수 있습니다.) 4. Lottie가 설치 되었다면, 새로운 Swift File을 만들어 이름은 'Lotti.. SWIFTUI/View layout 2021. 2. 10.

• 

  SwiftUI : List를 이용해서 Grid형식 만들기 SwiftUI : Lazy V(H)Grid Grid에 대해 알아보도록 합시다. List와 Grid의 차이 Grid는 List와 친척이라고 생각하시면 됩니다. 일단 Grid 와 List의 차이를 간단하게 그림으로 보겠습니다. LazyV(H)Stack과의 차이는 다음 게시물에서 seons-dev.tistory.com List View를 통해 Grid형식으로 이번에는 List view를 통해서 grid형식으로 화면을 구성하도록 하려고 합니다. 일단 아래 이미지를 Assets 폴더에 넣어주겠습니다. (출처: unsplash.com/photos/8Nc_oQsc2qQ) 이미지파일을 Assets에 넣어줬으면, 이제 ContentView로 가서 아래와 같이 코드를 작성해줍니다. 일단 List 안에 HStack을 쌓아주.. SWIFTUI/View layout 2021. 2. 9.

• 

  SwiftUI : 반복되는 뷰 Struct 반복되는 뷰 만들기 반복되는 값을 입력할때에는 Extension값을 생성해주면 되는데, SwiftUI에서는 Struct 를 사용합니다. Struct Name : View { var body: some View { //코드 입력// } } import SwiftUI struct capsuleText: View { var text: String var body: some View { Text(text) .font(.largeTitle) .padding() .background(Color.blue) .clipShape(Capsule()) } } struct ContentView: View { var body: some View { VStack { capsuleText(text: "First") .foregro.. SWIFTUI/View layout 2021. 2. 8.

• 

  SwiftUI : ColorPicker ColorPicker에 대해 알아보도록 합시다. ColorPicker ColorPicker("some text", selection: $bgColor) ColorPicker는 현재 선택한 색상을 표시하는 색상저장소를 제공하고, 사용자가 새로운 색상을 선택할 수 있도록 더 큰 팔레트를 표시합니다. 기본적으로 ColorPicker는 불투명한 색상을 지원합니다. 하지만 불투명도를 비활성화 하려면 매개 별수를 설정해야합니다. ColorPicker("some text", selection: $bgColor, supportsOpacity: false) TIP SwiftUI에서 ColorPicker를 사용하려면 Color를 변경 할 수 있는 @State 속성을 먼저 만들어줘야 합니다. 첫번째 방법 bgColor = .. SWIFTUI/View layout 2021. 2. 7.

• 

  SwiftUI : ProgressView (작업 진행률) 타이머 목차 ProgressView 에 대해 알아보도록 합시다. ProgressView ProgressView("some text", value: someBinding, total: 100) SwiftUI는 가로로 된 진행률 즉 ProgressView하기 위해 Double에 Binding 할 수 있습니다. 예를 들어, "다운로드 중"이라는 제목의 진행률바(progress bar)가 만들어지며, 진행률바(progress bar)가 downloadAmount 즉, 얼마나 꽉 찼는지 결정합니다. ProgressView는 진행중이든 아니든 혹은 완료를 했든 진행 유형을 모두 표시 할 수 있습니다. 진행 상황을 나타내는 숫자 값과 작업 완료를 나타내는 총 값에 대한 Binding으로 ProgressView를 초기화하여 .. SWIFTUI/View layout 2021. 2. 7.

• 

  SwiftUI : Label(사용자 라벨스타일 만들기) 목차 Label에 대해 알아보도록 합시다. Label Label("some string", systemImage: "some SF Symbols") Label { Text("some text") } icon : { Image(systemName: "some image") } SwiftUI에서 가장 일반적이고 인식 가능한 User interface의 구성 요소 중 하나는 아이콘과 레이블의 조합입니다. 이 관용구는 여러 종류의 앱에 사용되고 collection, list, menu 의 액션 아이템 등에 표시됩니다. 그러면 SF Symbols를 사용하여 간단한 형식의 레이블을 만들어 보도록 하겠습니다. List { //1. 기본적인 레이블 Label("나의 계정", systemImage: "person.cro.. SWIFTUI/View layout 2021. 2. 7.

• 

  SwiftUI : Lazy V(H)Stack 목차 LazyStack 에 대해 알아보도록 합시다. Lazy V(H)Stack SwiftUI 에서 V(H)Stack 과 LazyV(H)Stack이 있습니다. 이 둘의 차이점은 아래 코드를 통해서 간단하게 알아보도록 하겠습니다. V(H)Stack import SwiftUI struct ContentView: View { var body: some View { ScrollView { VStack(alignment: .center) { ForEach(1...100, id: \.self) { Text("Row \($0)") } } } } } LazyV(H)Stack import SwiftUI struct ContentView: View { var body: some View { ScrollView { LazyV.. SWIFTUI/View layout 2021. 2. 6.

• 

  SwiftUI : SearchView 본 게시글은 Artur Rymarz님의 게시글을 참고하여 작성된 글 입니다. SearchView에 대해 알아보도록 합시다. SearchView SwiftUI에서 SearchView를 사용하는 방법은 두 가지가 있습니다. 첫번째 UIKit을 가져와서 구현하는방법 두번째 SwiftUI 자체로 간단하게 코드를 구현하는 방법 일단 SwiftUI로 구현하는 방법부터 알아보도록 하겠습니다. 먼저 새로운 SwiftUI 파일을 만들어서 SearchBar 이라고 정해주고, 아래 코드를 입력합니다. import SwiftUI struct SearchBar: View { @Binding var text: String var body: some View { HStack { HStack { Image(systemName: "m.. SWIFTUI/View layout 2021. 2. 3.

• 

  SwiftUI : Slider Slider에 대해 알아보도록 합시다. Silder SwiftUI에서 Slider는 UISlider와 비슷하게 작동하지만, 반듯이 값일 지정할 수 있도록 어딘가에 바인딩 해야합니다. 상성을 할때 제공할 수 있는 매개변수는 다양하지만, 가장 중요한 매개변수는 다음과 같습니다. Value : What Double to bind it to In : 슬라이더의 범위 Step : 슬라이더를 이동할 때 값을 변경하는정도 struct ContentView: View { //sliderValue:Double 생략가능 @State private var sliderValue = 0.0 var body: some View { VStack { Slider(value: $sliderValue, in: -100...100, st.. SWIFTUI/View layout 2021. 2. 1.

• 

  SwiftUI : Divider 구분선 Divider에 대해 알아보도록 합시다 Divider Divider는 하나의 Contents와 다른 Contents를 구분하는 뷰입니다. Divider는 간단하게 선언만 해주면 되는데, 복잡하지 않습니다. 사용하는 방법은 코드로 확인해보도록 하겠습니다. Horizontal Divider var body: some View { //VStack으로 전체 화면을 40으로 할당 VStack(spacing: 40){ Group { //H_Divider Text("Horizontal Divider") Divider() Image(systemName: "a.circle.fill") Divider() } } Vertical Divider Group { //2. V_Divider Text("Vertical Divider.. SWIFTUI/View layout 2021. 1. 31.

• 

  SwiftUI : VideoPlayer VideoPlayer에 대해 알아보도록 합시다. VideoPlayer iOS14부터 SwiftUI에 비디오를 추가해주는 VideoPlayer 생성자가 추가되었습니다. VideoPlayer를 사용하게 되면 로컬 또는 원격 URL에서 영화 및 동영상을 재생할 수 있습니다. AVKit 프레임 워크에서 제공되기 때문에 Import AVKit을 반드시 추가해 줘야합니다. import AVKit 앱 번들에 video가 있는 경우 만약 앱 번들에 video.mp4가 들어가있고 이것을 재생하기 위해서는 다음과 같은 코드를 작성해야합니다. TIP import AVKit 이것을 사용하려면 Swift 파일에 동영상을 추가해야 합니다. var body: some View { VideoPlayer(player: AVPlayer.. SWIFTUI/WebView 2021. 1. 31.