Member-only story

How to use Image in SwiftUI

SwiftUI’s Image allows you to showcase different variations of design in your app

Kelvin Tan
Swiftly Engineered iOS
3 min readMar 19, 2020

--

Photo by Christian Fregnan on Unsplash

In this tutorial, you’ll learn what SwiftUI Image is. You’ll learn:

  • How to resize your image
  • How to mask your image
  • The luminance to alpha effect

Prerequisites

To follow this tutorial, you’ll need:

  • Basic familiarity with Swift
  • at least Xcode 11

Resizeable

To modify the size of the image, you have to almost always include resizeable().

Image("tesla")
.resizable()
.scaledToFill()
.frame(width: 200, height: 200)
Image Source: Car and Driver 2020 Tesla Model-S

Mask

You can use mask the image by adding a layer on top of it.

.mask(RoundedRectangle(cornerRadius: 4.0))
.mask(Circle())

--

--

Swiftly Engineered iOS
Swiftly Engineered iOS

Published in Swiftly Engineered iOS

📱🚀 Your passport to iOS development excellence, powered by Swift! Dive into top-notch tutorials, expert insights, and the latest iOS trends. Whether you’re a newbie or a seasoned pro, join our dynamic Swift community and craft remarkable iOS experiences.

Kelvin Tan
Kelvin Tan

Written by Kelvin Tan

Father, husband, software engineer. Building software and building a family, one line of code and one moment at a time. 🚀💻💙 http://ko-fi.com/kelvintanzy

No responses yet