SWIFTUI/View layout29

• 

  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 : 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 : 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 : 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 : NavigationView / NavigationLink 목차 NavigationView 는 SwiftUI의 가장 중요한 구성 요소 중 하나입니다. 화면을 쉽게 Push 와 Pop할 수 있으며, 사용자에게 명확하고 계층적인 방식으로 정보를 제공할 수 있습니다 NavigationView NavigationView를 사용하려면 다음과 같이 항목을 감싸야합니다. struct ContentView: View { var body: some View { NavigationView { Text("Hello, World!") } } } NavigationView는 최상위에 위치해야 하지만, TabView내에서 사용하는 경우에는 NavigationView가 TabView 내에 있어야 합니다. // 옳은 방법 NavigationView { Text("Hello, World!").. SWIFTUI/View layout 2021. 1. 23.

• 

  SwiftUI : Overlay / Background / Alignment 목차 overlay / Background / Alignment에 대해 알아보겠습니다. ZStack overlay와 Background를 이용하면 ZStack에서 사용했던것 처럼 중첩된 뷰를 표현하는것이 가능합니다. 앞으로 자주 사용될 수식어이므로 함께 비교해서 알아봅시다. ZStack은 특성상 그 나중에 작성한 green사각형이 먼저 작성한 red사각형보다 뷰 계층에서 상위에 위치합니다. ZStack { Rectangle() .fill(Color.red) .frame(width: 150.0, height: 150.0) Rectangle() .fill(Color.green) .frame(width: 150.0, height: 150.0) .offset(x: 10.0, y: 10.0) } 이제 overla.. SWIFTUI/View layout 2021. 1. 22.

• 

  SwiftUI : HStack / Spacer / minLength / Frame 목차 HStack 앞에 Stack은 뷰 컨테이너이자 하나의 뷰라고 했습니다. 따라서 스택에도 뷰 프로토콜이 가진 수식어를 적용할 수 있습니다. 우선 HStack 주위로 테두리를 그려봅시다. 참고로 여기서padding을 먼저 적용하지 않으면 텍스트 주위로 바짝 붙어서 여백이 없어지니 순서에 유의해주세요. HStack { Text("HStack") .font(.title) //이미 폰트크기를 정해줬기때문에 밖에있는 largeTitle은 영향X .foregroundColor(.blue) Text("은 뷰를 가로로 배열합니다") Text("!") } .padding() .border(Color.black) //border은 테두리를 뜻한다. .font(.largeTitle) 이처럼 largeTitle 폰트를 H.. SWIFTUI/View layout 2021. 1. 22.

• 

  SwiftUI : View layout (HStack / VStack / ZStack) 목차 view layout에 대한 전반적인 내용을 간단히 살펴보겠습니다. 세부적인 내용은 다음 게시글에서 다루도록 하겠습니다. View Layout Stack Stack은 SwiftUI에서 뷰를 배치하는 데 사용하는 컨테이너 뷰로, 콘텐츠로 전달된 지식 뷰들을 어떤 형태로 배치할 것인지 결정짓습니다. SwiftUI에서는 거의 필수적으로 활용되므로 매우 중요하며 사용 방법 또한 매우 간단합니다. Stack에는 가로방향 HStack, 세로방향 VStack, 겹겹히 쌓아있는 ZStack 총 세 가지 종류가 있습니다. var body: soom View { Text("hello") //컴파일 오류 Text("SwiftUI") } var body: soom View { VStack { Text("hello") T.. SWIFTUI/View layout 2021. 1. 22.