SWIFTUI/Image8 SwiftUI : AsyncImage [Placeholder,Extension,Phase,Transaction] AsyncImage 에 대해 알아보도록 합시다. AsyncImage iOS 15로 업데이트되면서 추가된 기능인데, AsyncImage는 URLSession 인스턴스를 사용하여 할당된 URL에서 이미지를 가져오는 기능을 가지고 있다. 디바이스를 실행하고 몇 초의 시간 후 이미지가 나타나게 하려면 AsyncImage를 사용할 수 있다. 먼저 간단하게 Url Image를 코드작성한다. import SwiftUI struct ContentView: View { private let imageName: String = "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlI00H%2F.. SWIFTUI/Image 2022. 1. 7. SwiftUI : Path / Shape 목차 Path 와 Shape 에 대해 알아보도록 합시다. Path SwiftUI는 사용자가 원하는 Custom Shape를 그릴 수 있도록 Path를 제공하고 있습니다. Color, grandient및 shape와 마찬가지로 Path는 그 자체로 View입니다. 이것은 우리가 TextField와 Image처럼 사용할 수 있다는 소리죠. Paths는 위치 값을 가진 선, 곡선 및 기타 정보를 가진 목록입니다. 하지만 Shape는 다른 정보를 미리 알 수 없죠. Shape 내부에 path(in:) 메서드가 호출이 끝나야 최종 적인 사이즈를 알 수 있습니다. Paths는 절 때 경로 안에서 좌표값에 맞춰 도형을 그리지만 Shape는 path(in:)에서 주어진 Rect를 기반으로 상대 경로를 받아서 그리게 됩.. SWIFTUI/Image 2021. 4. 22. SwiftUI : AspectRatio / GeometryReader / GeometryProxy AspectRatio / GeometryReader / GeometryProxy SwiftUI View에서 Image를 만들 때, 그것의 내용의 크기에 따라 자체의 크기를 자동으로 불러옵니다. 따라서 사진이 1000x500이면 Image view도 1000x500이 됩니다. 이것은 가끔은 사용자가 원할 때도 있지만, 대부분은 더 낮은 크기로 이미지를 보여주고 싶을 때가 있습니다. 어떻게 이미지를 사용자의 화면 너비에 맞게 만들 수 있는지 알아보도록 하겠습니다. 일단 Example 이라는 이미지를 Assets에 넣어준 후, 간단하게 코드를 입력합니다. struct ContentView: View { var body: some View { VStack { Image("Example") } } } → 프리뷰에.. SWIFTUI/Image 2021. 4. 4. 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 : 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 : 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. 이전 1 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기