Every mobile application have at least one image which is displayed, whether is profile photo, photo album or product photo. This component is called UIImage. UIImage is component which is contained in every view component from UIKit. If we see in Attributes Inspector, every component have property background image or in case of buttons is also image for state, so this component is responsible for keeping image data and displaying it in component where is implemented.

Most of the time in the applications we will use UIImageView view component dedicated for displaying images. In this tutorial we will develop one example with UIImageView and UISwitch component which we saw how is working in the first tutorial, Using UISwitch component into your iOS App.

Let’s start.

 

We are starting with creating the Single View Application in our Xcode IDE.

Screen Shot 2016-07-11 at 11.09.50

 

Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.

Screen Shot 2016-08-09 at 20.37.10

 

Your project should look like this after finishing previous step:

Screen Shot 2016-08-09 at 20.37.34

 

Next we are setting the size of the view and we are choosing compact, portrait for all iPhones.

Screen Shot 2016-08-09 at 20.38.40

 

We are dropping from the Object Library one UIImageView and one UISwitch components.

Screen Shot 2016-08-09 at 20.41.50

 

If our image have transparent background we can set some background color or to remove default white background color we can choose Clear Color option.We can also set manually alpha channel of the component from 1.0 to 0.0.

Other important property is how we want this image to be displayed, are we want our image view to be automatically scaled to display the image in full resolution or we want the image to occupy the whole image view or maybe display centered, there are plenty options for how we want image to be displayed in out component UIImageView.

There is also property which allow us to have direct interaction with the UIImageView component where UIImage is displayed and is called User Interaction Enabled which should be checked if we want to make interesting custom components based on UIImageView, like check boxes for example but for customizing components and developing custom view components we will see in some of the next tutorials.

Next from the InterfaceBuilder in Assistant Editor we are creating IBOutlet for label which will be used for displaying selected value in our example.

Screen Shot 2016-08-09 at 21.54.33

Screen Shot 2016-08-09 at 21.54.42

Screen Shot 2016-08-09 at 21.55.06

Screen Shot 2016-08-09 at 21.55.20

With dragging from the InterfaceBuilder to Assistant Editor we are making one action method which will be executed by changing the state On / Off  on our UISwitch component we will display different image in our UIImageView component.

Screen Shot 2016-08-09 at 21.56.27

Screen Shot 2016-08-09 at 21.56.41

Now we are clicking on Assets group.

Screen Shot 2016-08-09 at 21.58.24

 

And we are dropping two or more images.

Screen Shot 2016-08-09 at 21.58.52

 

Next we are going back in our ViewController and we are initializing UIImageView with default image which will be equal to UISwitch component On state.

Screen Shot 2016-08-09 at 23.10.00

In the method which will be executed on UISwitch component state change we are writing simple logic for changing the image depending on the UISwitch state.

Screen Shot 2016-08-10 at 00.58.52

 

When we compile and run the application in the simulator we can try changing UISwitch component state so we can see if everything we have implemented correctly how its working.

Screen Shot 2016-08-09 at 23.55.16 Screen Shot 2016-08-09 at 23.55.32

 

Complete source code can be found on my GitHub ready for testing.

 

(note: emoji png icons are downloaded from Google Images and are free for download)

Print Friendly, PDF & Email

Leave a Comment

Your email address will not be published. Required fields are marked *