TREASURE408

• 

  SwiftUI Project8 : WebView and Image Project8 이번에는 WebViewImage를 사용하여 간단하게 위와 같은 화면을 구성해보겠습니다. Circle 이미지뷰 생성 우선 새로운 SwiftUI파일을 생성하고 이름은CircleImageView라고 정해주겠습니다. 그리고 아래와 같은 이미지를 만들어 주겠습니다. 원하는 이미지 파일을 Assets에 추가해주고 다음과 같이 코드를 작성해줍니다. //CircleImageView struct CircleImageView: View { var body: some View { VStack { Image("seogun") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 200, height: 200) .clipShape(Circle()) .shado.. PROJECT/Simple 2021. 3. 21.

• 

  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 : Toggle Switch (toggleStyle) Toggle에 대해 알아보도록 합시다 Toggle 기본 코드 @State private var someBinding = true Toggle("SomeText", isOn: $someBinding) SwiftUI의 Toggle()을 사용하면 UIKit의 UISwitch 에서처럼 사용자가 true이거나 false상태 사이를 이동할 수 있습니다. Toggle()의 현재 값을 저장하는 데 사용할 @State Boolean 속성을 정의해야 합니다. 그런 다음 이것을 사용하여 필요에 따라 다른 view를 표시하거나 숨길 수 있습니다. 버튼이 Toggle() 될 때마다if 문을 사용하여 텍스트를 지정해 줄 수 있습니다. struct ContentView: View { @State private var someTog.. SWIFTUI/Controls 2021. 3. 18.

• 

  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.

• 

  Tweets of the day : 오늘의 트윗 유튜버 개발하는정대리 님의 커뮤니티에 좋은 트윗이 올라와서 블로그에 메모하며 개발시 동기부여를 느끼기 위해 작성된 글입니다. Tweets of the day 1 더보기 'Sometimes code readability is more important than using some cool and "best practices" design patterns' '읽기 좋고 이해하기 쉬운 코드가 쿨하고 멋진 디자인 패턴보다 좋을때가 있습니다' 출처 Tweets of the day 2 더보기 "When do I consider myself a developer?" When you decided to BE a developer and started to DO developer things, like install a.. TIP/Etc Tip 2021. 3. 14.

• 

  SwiftUI : layoutPriority( ) - 뷰 우선순위 layoutPriority 에 대해 알아보도록 합시다. layoutPriority SwiftUI에서 뷰의 위치와 크기를 계산하는 방법과 .layoutPriority()를 사용하여 해당 프로세스를 변경하는 방법을 알아보도록 하겠습니다. 우선 간단하게 텍스트를 작성해보도록 하겠습니다. struct ContentView: View { var body: some View { Text("서근 개발블로그!!") } } SwiftUI는 사용 가능한 모든 공간을 ContentView에 전달합니다 . ContentView 에는 TextView 인 자식이 하나만 있습니다. ContentView 는 사용 가능한 공간을 TextView에 제안하고 크기를 계산하도록 요청합니다. TextView는 콘텐츠의 크기를 측정하여 Con.. SWIFTUI/Others 2021. 3. 14.

• 

  SwiftUI : ContainerRelativeShape (위젯에서만 사용가능) 본 게시물은 Keith Harrison 게시글을 번역한 자료입니다. ContainerRelativeShape 에 대해 알아보도록 합시다. ContainerRelativeShape SwiftUI에는 둥근 사각형을 만드는 많은 방법을 가지고 있지만, 위젯의 모서리 반경을 맞추고 싶다면 어떻게 해야할까요? Apple에서는 iOS 14부터 ContainerRelativeShape 라는 기능을 추가했습니다. 이 기능은 홈 화면 위젯을 만들 때 특히 중요합니다. 콘텐츠의 모서리 반경을 위젯의 모서리 반경과 조정하도록 제안합니다. Text("Hello World!") .font(.title) .padding() .background(Color.yellow) .cornerRadius(10) 위젯의 제일 작은 크기를 사.. SWIFTUI/Image 2021. 3. 13.

• 

  SwiftUI : trim( ) - Shape의 일부 그리기 (Timer) 목차 trim 에 대해 알아보도록 합시다. Trim SwiftUI에서는 trim() 수정자를 사용하여 모양에 대한 획 또는 채우기의 일부만 그릴 수 있습니다. 이 수정자는 시작 값(from)과 끝 값(to), 둘 다 CGFloat 0 과 1 사이로 저장되는 두 매개 변수를 사용합니다 . .trim(from: 0, to: 0) 예를들어, 반원을 원한다면 아래와 같이 코드를 작성 할 수 있습니다. Circle() .trim(from: 0, to: 0.5) .frame(width: 150, height: 150) 시간이 지날수록 도형이 채워지게 하는 방법 첫번째 화면을 실행 하면 자동으로 timer가 네트워크 요청 또는 기타 사용자 인터페이스와 같이 해당 값을 실제로 변경할 수 있는 방법이 필요합니다. 예를들.. SWIFTUI/Image 2021. 3. 13.

• 

  SwiftUI Project7 : Stack / ScrollView / Link 이번에는 Stack / ScrollView / Link 를 사용하여 간단하게 아래와 같은 화면을 구성해보겠습니다. #1 웹사이트 Link 카드 우선 Asset에 원하는 이미지를 넣고 아래와 같이 스택을 쌓아주겠습니다. //ProjectCard struct ProjectCard: View { var body: some View { VStack(alignment: .leading){ Text("SwiftUI : 서근 개발 노트 ") .fontWeight(.bold) Text("https://seons-dev.tistory.com/") Spacer().frame(height: 50) HStack { Image("Swift") .resizable() .frame(width: 50, height: 50) .cli.. PROJECT/Simple 2021. 3. 11.

• 

  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 Project6 : Use Views From Other Frameworks #1 상세 정보 생성 //ContentView struct ContentView: View { var body: some View { VStack(alignment: .leading){ HStack { Text("경복궁") .font(.title) .padding(.bottom, 10) Text("서울") .font(.caption) } VStack{ Text("161 Sajik-ro, Sejongno, Jongno-gu, 서울특별시 South Korea") .font(.footnote) } } } } #2 사용자 이미지 View 생성 새로운 SwiftUI 파일을 만들어 Asset에 원하는 사진을 첨부하여 아래와 같이 작성합니다. //CircleImageView struct CircleImage: Vie.. PROJECT/Simple 2021. 3. 8.

• 

  SwiftUI : Map View MapView 에 대해 알아보도록 합시다. Map View SwiftUI의 MapView를 통해 화면에서 지도를 사용할 수 있습니다. 시작하려면 먼저 지도에 표시되는 좌표를 추적할 수 있는 일종의 State를 만들어야 합니다. MKCoordinateRegion 를 사용해야 하고, latitude/longitude 에 좌표를 입력해주면 원하는 위치를 MapView가 실행될 때 표시됩니다. TIP 좌표를 찾고 싶다면 이 사이트 에서 확인 할 수 있습니다. 우선 MapKit을 import 해주고 @State변수를 아래와 같이 추가해줍니다. //서울 좌표 @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: .. SWIFTUI/WebView 2021. 3. 8.

• 

  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.