Dynamic image handling<\/li>\n<\/ul>\nUnderstanding the basic concepts of SwiftUI<\/h2>\n
The core concept of SwiftUI is ‘declarative programming’. By explicitly declaring the elements that compose the UI in code, developers can maintain consistency between the code and the UI. The main component of SwiftUI is the View<\/code>. All UI elements are based on View<\/code>, allowing developers to write lightweight and concise code.<\/p>\nIn general, SwiftUI defines each view using struct<\/code>. For example, the code below shows how to create a simple text view:<\/p>\nstruct ContentView: View {\n var body: some View {\n Text(\"Hello, SwiftUI!\")\n }\n }<\/code><\/pre>\nHow to use the Image view<\/h2>\n
To display images in SwiftUI, you use the Image<\/code> view. The Image<\/code> view provides a very straightforward way to display image files on the screen. By default, the Image<\/code> view references images that are included in the app bundle for display.<\/p>\nHere is a basic example of using the Image<\/code> view:<\/p>\nstruct ContentView: View {\n var body: some View {\n Image(\"exampleImage\")\n .resizable()\n .aspectRatio(contentMode: .fit)\n }\n }<\/code><\/pre>\nIn the example above, the resizable()<\/code> method allows the image to be resized, and aspectRatio(contentMode: .fit)<\/code> displays the image in a visually pleasing way while maintaining its aspect ratio.<\/p>\nHow to add images to your app<\/h2>\n
Adding images to an Xcode project is very simple. You just need to drag and drop the image files into the Assets.xcassets<\/code> folder in Xcode. Each image you want to use should be saved with an appropriate name so that it can be referenced later in the Image<\/code> view.<\/p>\nWhen adding images in Xcode, you can prepare images at various resolutions, such as 1x, 2x, 3x, to provide optimized images for the screen resolutions of Apple devices. By adding high-resolution image files, you can ensure clearer images even on low-resolution devices.<\/p>\n
Utilizing various image options<\/h2>\n
The Image<\/code> view in SwiftUI allows you to manipulate images through various modifiers. For example, you can add color effects or create borders. The following example shows how to add a border and shadow to an image:<\/p>\nstruct ContentView: View {\n var body: some View {\n Image(\"exampleImage\")\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(width: 200, height: 200)\n .cornerRadius(10)\n .shadow(radius: 10)\n }\n }<\/code><\/pre>\nAdditionally, you can handle dynamic images such as GIFs or animations. While you can use UIImageView<\/code> from UIKit to display these images, SwiftUI makes it easy to handle animations.<\/p>\nDynamic image handling<\/h2>\n
Handling dynamic images is particularly important for enhancing user experience in apps. For example, you can implement features that download images from the network or display images selected by the user.<\/p>\n
Here, we will explain a basic method to download images from the network. We use URLSession<\/code> to download images asynchronously, and once the download is complete, we update it to SwiftUI’s state:<\/p>\nimport SwiftUI\n\n struct ContentView: View {\n @State private var image: Image?\n\n var body: some View {\n VStack {\n if let image = image {\n image\n .resizable()\n .aspectRatio(contentMode: .fit)\n } else {\n Text(\"Loading image...\")\n }\n }\n .onAppear {\n loadImage()\n }\n }\n\n func loadImage() {\n guard let url = URL(string: \"https:\/\/example.com\/image.jpg\") else { return }\n URLSession.shared.dataTask(with: url) { data, response, error in\n if let data = data, let uiImage = UIImage(data: data) {\n image = Image(uiImage: uiImage)\n }\n }.resume()\n }\n }<\/code><\/pre>\nIn the above code, the loadImage()<\/code> method asynchronously downloads the image, and by using SwiftUI’s @State<\/code> property, the view updates automatically when the image is loaded.<\/p>\nConclusion<\/h2>\n
Through this course, you have learned how to utilize the image view in iPhone app development using SwiftUI. We explored a wide range of topics, starting from the basic usage of the Image<\/code> view to how to add images to your app, utilize various options, and handle dynamic images. SwiftUI is a powerful yet flexible UI tool, which will greatly aid your app development. Please continue to explore the various features of SwiftUI.<\/p>\nIn the next course, we will cover how to handle user interactions in SwiftUI. Stay tuned!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
In this course, we will take a detailed look at how to display images on the screen in an iPhone app using SwiftUI. SwiftUI is Apple’s latest UI framework that allows developers to build user interfaces in a more intuitive and declarative way. The course will be divided into the following main topics. Understanding the … \ub354 \ubcf4\uae30 “Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[125],"tags":[],"class_list":["post-32729","post","type-post","status-publish","format-standard","hentry","category-swift-iphone-app-development-swiftui"],"yoast_head":"\nDeveloping iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32729\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developing iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In this course, we will take a detailed look at how to display images on the screen in an iPhone app using SwiftUI. SwiftUI is Apple’s latest UI framework that allows developers to build user interfaces in a more intuitive and declarative way. The course will be divided into the following main topics. Understanding the … \ub354 \ubcf4\uae30 "Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32729\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:11:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:23:59+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen\",\"datePublished\":\"2024-11-01T09:11:08+00:00\",\"dateModified\":\"2024-11-01T11:23:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/\"},\"wordCount\":590,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Swift iPhone app development (SwiftUI)\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32729\/\",\"name\":\"Developing iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:11:08+00:00\",\"dateModified\":\"2024-11-01T11:23:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32729\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32729\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developing iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32729\/","og_locale":"ko_KR","og_type":"article","og_title":"Developing iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In this course, we will take a detailed look at how to display images on the screen in an iPhone app using SwiftUI. SwiftUI is Apple’s latest UI framework that allows developers to build user interfaces in a more intuitive and declarative way. The course will be divided into the following main topics. Understanding the … \ub354 \ubcf4\uae30 \"Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen\"","og_url":"https:\/\/atmokpo.com\/w\/32729\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:11:08+00:00","article_modified_time":"2024-11-01T11:23:59+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32729\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32729\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen","datePublished":"2024-11-01T09:11:08+00:00","dateModified":"2024-11-01T11:23:59+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32729\/"},"wordCount":590,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Swift iPhone app development (SwiftUI)"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32729\/","url":"https:\/\/atmokpo.com\/w\/32729\/","name":"Developing iPhone Apps with SwiftUI - 03 Displaying Desired Images on Screen - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:11:08+00:00","dateModified":"2024-11-01T11:23:59+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32729\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32729\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32729\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Developing iPhone Apps with SwiftUI – 03 Displaying Desired Images on Screen"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32729"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32729\/revisions"}],"predecessor-version":[{"id":32730,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32729\/revisions\/32730"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}