SWIFTUI100

• 

  SwiftUI : Button / onTapGesture 목차 SwiftUI 3.0 버전의 Button 기능이 다수 추가되었습니다. 추후 업데이트 예정입니다. 트리거(Trigger) 될 때 작업을 수행하는 컨트롤입니다. Button에 대해 알아보도록 합시다. Button 기본 코드 //첫번째 Button(action: { //action }) { //view HStack { Image(systemName: "folder.fill") Text("폴더") } } //두번째 Button("서근개발노트") { // action } Action 과 Label 을 제공하여 버튼을 만들 수 있습니다. 액션은 사용자가 버튼을 클릭하거나 택할 때 작업을 수행하는 메서드 또는 클로저 프로퍼티입니다. 레이블은 예를 들어 '취소'와 같은 텍스트 또는 '뒤로 가기 화살표'와 같은 아.. SWIFTUI/Controls 2021. 1. 23.

• 

  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 : Shape (Rectangle, Circle, Capsule...) 목차 Rectangle / Circle / RoundedRectangle / Capsule에 대해 알아보도록 합시다. Shape SwiftUI에는 사각형, 원 및 캡슐과 같은 여러 가지 기본 제공 모양이 있으며 필요에 따라 각 모양을 만들고 색상을 지정하고 배치할 수 있습니다. Rectangle Circle RoundedRectangle Capsule Circle Circle() .fill(Color.red) .frame(width: 200, height: 200) Rectangle VStack() { Rectangle() .fill(Color.blue) .frame(width: 100, height: 100) Rectangle() .fill(Color.blue) .frame(height: 5) } Ro.. SWIFTUI/Image 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.

• 

  SwiftUI : Colors and Gradient 목차 Color / Gradient 에 대해 알아보도록 합시다. Color ZStack Color ZStack 바로 뒤에 Color.색 을 주게 되면 전체에 배경화면이 써집니다. (Stack에 대해서는 View layout 에서 자세히 다루도록 하겠습니다.) 또, Color.red.frames(width: , height: ) 를 주게 된다면 아래와 같은 결과를 생성할 수 있습니다. import SwiftUI struct ContentView: View { var body: some View { ZStack { Color.red.frame(width: 200, height: 200) VStack { Text("안녕") Text("잘가") } } } } Color(Literal()) iOS 13.0 버전 .. SWIFTUI/Image 2021. 1. 22.

• 

  SwiftUI : Image 목차 Image 대해 알아보도록 합시다. Image SwiftUI에서는 이미지를 가져오는것이 정말 간단합니다. Xcode의 Assets 파일안에 사진 파일을 넣어주고 사용하면 됩니다. 기본 옵션 .resizable() //크기조정 .aspectRatio(contentMode: .fit) //종횡비 .cornerRadius(50) //코너반경 .padding(.all) //여백 .clipShape(Circle()) //원 .frame(width:100, height:50) //프레임 .clipped() //프레임을 벗어나는 이미지 제거 .offset(x: ,y: ) //위치 조정 .opacity(0.x) //투명도 //이미지 넓이를 채우는 방법 * Divider().opacity(0) * Rectangle.. SWIFTUI/Image 2021. 1. 21.

• 

  SwiftUI : TextEditor TextEditor 대해 알아보도록 합시다. TextEditor 긴 형식의 텍스트를 표시하고 편집할 수 있는 View입니다. TextEditor View를 사용하면 앱의 사용자 인터페이스에 스크롤 가능한 여러 줄의 텍스트를 표시하고 편집할 수 있습니다. 기본적으로 TextEditor View는 환경에서 상속된 특성을 사용하여 텍스트를 스타일링합니다. font(_:), foregroundColor(_:), multilineTextAlignment(_:). struct ContentView: View { // 1. @State private var text: String = "Enter some text: " var body: some View { VStack { // 2. TextEditor(text: $.. SWIFTUI/Controls 2021. 1. 21.

• 

  SwiftUI : SecureField SecureField에 대해 알아보도록 합시다. SecureField 사용자가 비공개 텍스트를 안전하게 입력하는 컨트롤입니다. 기본 코드 VStack{ SecureField("비밀번호", text:$password) { } //텍스트필드 스타일 .textFieldStyle(RoundedBorderTextFieldStyle()) .padding() } TextField와 비슷한 동작을 수행 하지만 사용자가 텍스트를 표시하고 싶지 않고 (***) 식으로 표시하고 싶을때 SecureField를 사용합니다. 일반적으로 비밀번호 또는 중요한 정보를 입력할 때 사용합니다. 필드는 모든 키 입력 또는 기타 편집에서 바인딩된 문자열을 업데이트하므로, 완료 단추와 같은 다른 컨트롤에서 언제든지 값을 읽을 수 있습니다. .. SWIFTUI/Controls 2021. 1. 21.