swiftUI
-
[SwiftUI] VStack 사용 예제iOS 2021. 7. 29. 14:47
개요 VStack를 통해 수직으로 UI컴포넌트들을 배열해보자. VStack 수직으로 UI 컴포넌트들을 배열한다. 선언된 순서대로 위쪽부터 채워진다. alignment와 spacing을 설정할 수 있다. alignment는 center, leading, trailing 3가지를 설정할 수 있다. center : 가운데 정렬 leading: 좌측 정렬 trailing : 우측 정렬 spacing은 컴포넌트간 간격을 설정하는 속성이다. 예) struct ContentView: View { var body: some View { VStack(alignment: .center, spacing: 20, content: { Text("Hello, world!") .padding() CircleImageView() ...
-
[SwiftUI] ImageView에 Radius 적용(RoundedImageView)iOS 2021. 7. 29. 13:49
개요 ImageView에 cornerRadius를 적용하여 모서리가 둥근 ImageView를 만들어 보자. RoundedImage 구현 clipShape를 이용한 방법 아래 코드처럼 clipShape에 RoundedRectangle을 넣어 모서리가 둥근 ImageView를 만들 수 있다. struct RoundedImage: View { var body: some View { Image("dog") .clipShape(RoundedRectangle(cornerRadius: 100)) } } 위 코드의 Preview는 아래 사진과 같이 나온다. cornerRadius를 이용한 방법 cornerRadius를 직접 입력하여 모서리가 둥근 ImageView를 설정한다. struct RoundedImage: Vi..
-
[SwiftUI] Circle ImageView에 Border 넣기iOS 2021. 7. 29. 11:51
개요 이전 포스팅인 Circle ImageView에 Border를 넣어보자. 2021.07.29 - [iOS] - [SwiftUI] Circle ImageView [SwiftUI] Circle ImageView 개요 ImageView를 동그랗게 만들어보기로 한다. 파일 생성 아래와 같은 순서대로 SwiftUI 파일을 생성한다. 1. New File을 클릭한다. 2. User Interface -> SwiftUI View를 선택한 후 Next 버튼을 누른다. 3. 파.. growup-lee.tistory.com Border 넣기 아래와 같이 동그란 모양의 ImageView를 먼저 생성해준다. import SwiftUI struct CircleImageView: View { var body: some Vie..
-
[SwiftUI] Circle ImageViewiOS 2021. 7. 29. 11:30
개요 ImageView를 동그랗게 만들어보기로 한다. 파일 생성 아래와 같은 순서대로 SwiftUI 파일을 생성한다. 1. New File을 클릭한다. 2. User Interface -> SwiftUI View를 선택한 후 Next 버튼을 누른다. 3. 파일명을 입력한 후 Create 버튼을 눌러 파일을 생성한다. 동그란 모양의 ImageView 생성 생성된 파일에 아래와 같이 코딩을 해준다. import SwiftUI struct CircleImage: View { var body: some View { Image("dog") .clipShape(Circle()) } } struct CircleImage_Previews: PreviewProvider { static var previews: some ..
-
[SwiftUI] TextView의 텍스트 속성 변경iOS 2021. 7. 23. 13:52
개요 TextView의 텍스트 속성을 변경한다. Inspector로 변경하는 방법과 코딩으로 변경하는 방법을 볼 수 있다. Inspector로 변경하기 1. Preview 화면에서 바로 변경 Command를 누른 상태로 변경하고자 하는 TextView를 클릭하면 메뉴가 나타난다. Show SwiftUI Inspector를 클릭하면 속성을 변경하는 창이 나타난다. Font를 Title로 변경하고, Color를 Green으로 변경하여 크기와 색상을 변경한다. Weight를 변경하면 두께를 설정할 수 있다. 2. Inspector 화면에서 변경 Preview 화면의 TextView를 클릭하거나, 코드상의 TextView에 Cursor를 위치시키면 우측에 Inspector 창이 나타난다. Font를 Title로..
-
[SwiftUI] SwiftUI 프로젝트 생성iOS 2021. 7. 23. 11:06
개요 SwiftUI를 사용하는 프로젝트를 생성하고 첫 화면을 띄워본다. 프로젝트 생성 1. xcode를 실행하여 Create a new Xcode project를 클릭한다. 2. iOS의 App을 선택한 후 Next를 클릭한다. 3. Product Name, Organization Identifier를 적어주고 Interface를 SwiftUI, Life Cycle을 SwiftUI App으로 선택해준후 Next를 클릭하여 프로젝트가 생성될 디렉토리를 선택한 후 Create 버튼을 클릭하여 프로젝트를 생성해준다. 생성된 파일 확인 1. [Product Name]App.swift SwiftUI App lifecycle을 따르는 App protocol을 준수한다. body에 정의되는 부분은 앱 실행 시 첫화면..