Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Preface: from small to big, it seems that a lot of things are three minutes heat, things are very simple, but stick to it is very difficult. Whether it is work or study, sometimes I think that if I insist on one thing all the time, will I be able to achieve the result I want?

Career Statement: The business environment changes quickly and unpredictably, so make a decision and do it immediately.

In this chapter, you will learn how to load and display local images, system ICONS, and simple manipulation of images.

First, let’s create a new project called SwiftUIImage.

In the assets. xcassets file, you can import local images. Assets can not only import images, but also set colors, which we will use later.

Click Assets, click the “+” button at the bottom, and select Image Set (or right mouse button).

Rename the image so that it can be referenced later, such as a sample image.

It is recommended to use simple English names for images. Chinese names may sometimes cause problems.

We can see that we need to import three sizes of pictures, which is to better display on different types of devices.

We open the local images folder and drag the image file into the images area.

So, we are done importing the image.

Let’s see how to load and display the image we just imported.

Go back to the contentView.swift file and enter the following code.

Image(" Sample Image ")Copy the code

This code initializes an image that we can see displayed on the emulator, which is the basic syntax for creating an image view.

We’ll see a big picture, only a part of it.

At this point, if we want to see the full image, we need to scale the image.

Image(" sample Image ").resizable()Copy the code

We can see that the simulator has reserved two areas, the top bar and the bottom bar, because of the existence of “safety zone”.

A security zone is a view area that excludes the top bar (that is, the status bar) and the bottom bar, and defines a view area where UI components can be safely placed. With safe zones, you can prevent the risk of some UI controls not knowing where to go during programming.

If you want to ignore security zones and spread the view across the screen, you can ignore security zones by setting the. EdgesIgnoringSafeArea modifier.

Resizable ().edgesignoringSafeArea (.all)Copy the code

From the emulator we can see that the sample image is already a bit distorted because.resizable() is simply stretching and scaling without maintaining the original scale. If we want to scale equally then we need to use.scaledTofit () modifier so that we can maintain the aspect ratio of the original image.

Resizable ().scaledToFit().resizable().scaledToFit()Copy the code

Alternatively, use.aspectratio (contentMode:.fill) to achieve the same effect. Try both.

If we want to resize the image to make it more aesthetically pleasing to other UI controls, we can also adjust the display size of the image.

Image(" sample Image ").resizable().aspectratio (contentMode:.fit).frame(width: 350)Copy the code

In App development, if we want to use a picture as an avatar, our picture may not be round.

At this point, we can cut out the extra parts, leaving the middle part.

Resizable ().aspectratio (contentMode:.fit).frame(width: 350).clipShape(Circle())Copy the code

If the image tone is too dark, it will conflict with the overall tone of the App.

We can try to reduce the opacity of the image to make it more harmonious with the App.

.resizable().aspectratio (contentMode:.fit).frame(width: 350). ClipShape (Circle ()). The opacity (0.8)Copy the code

Sometimes, the picture is just as a background, there will be text or ICONS on the picture, example: wallpaper software.

In this case, we need to add another view to the image view and “overlay” it with the. Overlay () modifier.

Resizable ().aspectratio (contentMode:.fit).frame(width: Opacity (0.8).overlay(Text(" edit ").fontweight (.bold).font(.system(size: 24)) .foregroundColor(Color.white) )Copy the code

In addition to displaying locally imported images and network images (as discussed in a later chapter), Image can also display system ICONS.

With more than 3,000 new symbols available for developers to use, there is little need for developers to collect common ICONS themselves.

After downloading and installing the application, we can quickly learn the name of the icon symbol so that we can use it quickly.

You can use the icon library without downloading it, but this app helps you quickly find the name of the icon.

To do this, simply add systemName to the Image.

Image(systemName:"square.and.arrow.up ").font(.system(size: 80))Copy the code

So, try using what you’ve learned in the previous chapters to give your system ICONS different colors, sizes, and shadows.

The next day, in fact, this article is written the day before, save in the draft box, is worried about their “broken more”…….