SWIFTUI/View layout29

• 

  SwiftUI : Material - background blur 효과 Material 에 대해 알아보도록 합시다. Material SwiftU iOS15 이상에서 사용 가능한 background 반투명 흐림 효과 속성이 있다. 바로 Material 타입 이다. struct Material Material을 추가하여 background(_:ignoresSafeAreaEdges:) 수정자와 함께 사용 가능하다. 이 수정자는 어떠한 View 뒤에 나타나는 View에 반투명 흐림 효과를 적용할 수 있다. 참고로 SwiftUI에서 blur 라는 수정자가 있는데 이것은 잘못된 사용 방법이다. import SwiftUI struct ContentView: View { var body: some View { ZStack { LinearGradient( colors: [.red, .yel.. SWIFTUI/View layout 2022. 3. 4.

• 

  SwiftUI : Picker / Picker Style / Section Picker 와 Section에 대해 알아보도록 합시다. Picker selection binding, label, content를 표시할 내용을 제공하여 Picker를 만듭니다. selection parameter를 현재 selection으로 표시할 값을 제공하는 바인딩된 속성으로 설정합니다. 레이블을 선택 도구에서 내용 선택 목적을 시각적으로 설명하는 보기로 설정한 다음 선택 도구에서 표시할 내용을 제공합니다. ForEach 간단하게 Picker와 ForEach를 사용하여 목록을 선택할 수 있는 피커 화면을 구성할 수 있습니다. struct ContentView: View { //학생 목록을 만들고 let students = ["서근", "희진", "미진", "슬기"] //State으로 값이 수정되도.. SWIFTUI/View layout 2021. 5. 13.

• 

  SwiftUI : Sheet / FullScreenCover (@Environment / presentationMode) Sheet .sheet(isPresented: $someBinding) { SecondView() } SwiftUI에는 여러 가지 view를 보여주는 방법이 있습니다. 가장 기본적인 것 중 하나는 sheet입니다. 이것은 기존 뷰 위에 새로운 뷰가 표시됩니다. iOS에서는 자동으로 프레젠테이션을 제공하여 현재 뷰가 뒤쪽으로 빠지고 새로운 뷰가 맨 위 애니메이션으로 표시됩니다. sheet(isPresented: ) 는 Alerts와 코드가 유사합니다 대신, sheet를 보여야 하는 조건을 정의하고, 그러한 조건이 true 이거나 false가 되면 sheet가 각각 제시되거나 기각됩니다. //보여주고싶은 뷰 하나를 생성한다 struct SecondView: View { var body: some View {.. SWIFTUI/View layout 2021. 5. 11.

• 

  SwiftUI : Lazy V(H)Grid 목차 Grid에 대해 알아보도록 합시다. Lazy V(H)Grid List와 Grid의 차이 Grid는 List와 친척이라고 생각하시면 됩니다. 일단 Grid 와 List의 차이를 간단하게 그림으로 보겠습니다. LazyV(H)Stack과의 차이는 다음 게시물에서 다루겠습니다, List List는 일반적으로 Vertical Direction 으로 목록을 나타내 준다고 보시면 됩니다. 가장 많이 사용되는 View 라고 생각하시면 됩니다. Grid Grid는 horizontal Direction으로 사진을 배열하여 화면을 구성하기 좋습니다. 가장 좋은 예로 Instargram / Pinterest / Netflix 의 레이아웃을 떠올리시면 됩니다. Grid Xcode에서 코드로 어떻게 사용하는지에 바로 알아보.. SWIFTUI/View layout 2021. 5. 8.

• 

  SwiftUI : ScrollView ScrollView SwiftUI의 ScrollView를 사용하면 뷰의 Scroll 컨테이너를 비교적 쉽게 만들 수 있습니다. 그 이유는 내부에 배치 한 콘텐츠에 맞게 자동으로 크기가 조정되고 안전 영역을 피하기 위해 추가 삽입물을 자동으로 추가하기 때문입니다. List / form으로 Scroll되는 데이터 테이블을 만드는 방법도 있지만, 임의 날짜를 Scroll하려는 경우에는 ScrollView로 전환해야 합니다. 예시로 1부터 100까지 나오는 ScrollView를 만들어 봅시다. ScrollView() { VStack { ForEach(1.. SWIFTUI/View layout 2021. 5. 8.

• 

  SwiftUI : Form (Toggle / disabled / If ) Form 에 대해 알아보도록 합시다. Form (Toggle / Section) setting 또는 inspectors 같이 데이터 입력에 사용되는 컨트롤을 그룹화하기 위한 컨테이너 Form 뷰를 사용하면 Control들을 그룹화 하기 좋습니다. 아래 코드를 보시면 Form을 사용하여 컨트롤을 정리해 주어 화면을 한눈에 보기 좋게 만들어 줍니다. Toggle을 Bool 값으로 정의해주고 Section안에 넣어주면 버튼을 끄고 켤 수 있습니다. struct ContentView: View { @State var username: String = "" @State var isPrivate: Bool = true @State var notificationsEnabled: Bool = false @State p.. SWIFTUI/View layout 2021. 3. 19.

• 

  SwiftUI : ZStack ( Spacer / offset / zIndex ) ZStack Stack에는 가로방향 HStack, 세로방향 VStack, 겹겹히 쌓아있는 ZStack 총 세 가지 종류가 있습니다. 각 스택이 어떻게 사용되는지 알아보기 위해 2개의 사각형을 만들어 결과를 확인해 보겠습니다. HStack { //이 부분만 HStack, VStack, ZStack으로 수정해 봅니다. Rectangle() .fill(Color.green) .frame(width: 150, height: 150) Rectangle() .fill(Color.yellow) .frame(width: 150, height: 150) } ZStack 에서 offset ZStack과 함께 offset을 사용하면 한 뷰를 다른 뷰 안에 배치 할 수 있습니다. 이 기능은 ZStack의 정렬을 제어 할 때 .. SWIFTUI/View layout 2021. 3. 15.

• 

  SwiftUI : FixedSize - View의 크기를 동일한 너비/높이로 FixedSize 에 대해 알아보도록 합시다. FixedSize .fixedSize(horizontal: false, vertical: true) //높이를 동일한 크기로 .fixedSize(horizontal: true, vertical: false) //너비를 동일한 크기로 SwiftUI에서는 frame() 수정자를 fixedSize()와 결합하여 동일한 높이 또는 동일한 너비를 원하는지 여부에 관계없이 동일한 크기의 두 개의 뷰를 쉽게 만들 수 있습니다. 비슷한 수정자인 GeometryReader는 필요하지 않습니다. GeometryReader에 대해 자세히 알아보기 크기를 원하는 각 뷰에 최대 높이 또는 너비를 제공합니다. 그러면 사용 가능한 모든 공간을 채우기 위해 자동으로 늘어납니다. 그런 다.. SWIFTUI/View layout 2021. 3. 14.

• 

  SwiftUI : DisclosureGroup (Toggle / Slider) DisclosureGroup 에 대해 알아보도록 합시다. DisclosureGroup DisclosureGroup("SomeText", isExpanded: $SomeBinding) { } DisclosureGroup(isExpanded: $SomeBinding, content: { //someAction }, label: { V(H)Stack { //Code here } }) SwiftUI에는 DisclosureGroup(공개 표시기)를 제공하고 내부에 콘텐츠를 포함 하는 전용 View가 있습니다. 이것은 콘텐츠가 현재 표시되는지 여부를 결정하는 일종의 Bool 속성에 바인딩 될 수 있지만 펼칠 때 표시 할 많은 뷰를 내부에 배치 할 수 있습니다. 다시말해, DisclosureGroup View는 콘텐.. SWIFTUI/View layout 2021. 3. 10.

• 

  SwiftUI : List (ListStyle / onDelete / onMove) 목차 List에 대해 알아보도록 합시다. List List는 단일 열에 정렬 된 데이터 행을 표시하는 컨테이너입니다. struct ContentView: View { var body: some View { List { Text("첫번째 리스트") Text("두번째 리스트") Text("세번째 리스트") } } } 정적 콘텐츠 List의 생성자에 원하는 뷰를 전달하면 하나씩 각 row에 담아 표현합니다. 여기서 뷰 하나는 row 하나에 해당합니다. TIP UIKit에서는 UITableView에서 내용을 표시할 뷰를 셀이라고 불렀다면, SwiftUI에서는 row라고 표현합니다. 다음과 같이 텍스트가 아닌 다른 이미지 뷰를 넣어 봐도 동일하게 List를 작성 할 수 있습니다. List { Text("List".. SWIFTUI/View layout 2021. 3. 9.

• 

  SwiftUI : TabView / TabViewStyle 목차 TabView 에 대해 알아보도록 합시다. TabView SwiftUI는 UIKit의 UITabBarController와 동등한 기능을 가진 TabView를 제공합니다. 사용자가 화면 하단의 막대를 사용하여 여러 View를 전환할 수 있습니다. 기본 형식으로 각 항목에 이미지와 제목을 제공해야 하며, 프로그래밍 방식으로 활성화되는 탭을 제어하려는 경우 선택적으로 태그를 추가해야 합니다. 간단하게 예제를 들어보도록 하겠습니다. 탭 표시 줄 인터페이스 만들기 첫번째 우선 GreenTabView, RedTabView, BlueTabView 라는 새로운 SwiftUI 파일을 만들어주고 각 이름에 맞는 색으로 아래와 같이 코드를 작성합니다. struct GreenTabView: View { var body:.. SWIFTUI/View layout 2021. 3. 7.

• 

  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.