Image
An Image
view is used to incorporate images and enhance the aesthetic of the user interface (UI) and can be functional when used correctly.
Syntax
`Image`("image-example")
// Fitting and aspect ratios
A text label can be added to the image
and the image
can be changed to fit the requirements.
Example
The following example adds the Codecademy logo clipped to a circle shape:
Once the image
to be used has been added to the project’s ‘Assets’ (Assets.xcassets) library, it can be loaded.
var body: some View {Image("image-example").resizable().aspectRatio(contentMode: .fill).frame(width: 250.0, height: 250.0, alignment: .center).clipShape(Circle())}
The .resizable()
modifier fills the entire content of the parent container. The .aspectRatio()
maintains the original aspect ratio. The size can then be restricted to a custom .frame()
. In this case, the .clipShape()
modifier is a Circle()
.
This will display the following image:
Contributors
- Anonymous contributor