How to use Segmented Control, Swipe Gesture Recognizer, and Page Control to control image display?

Learn Swift from scratch and challenge to create 100 apps — Book Recommendation App

Figure 1 shows the animation of the Book Recommendation App. In this app, we control book covers displayed in the ImageView using three different ways, Segment Control, Swipe Gesture Recognizer, and Page Control respectively.

Figure 1 The animation of the Book Recommendation App

Now, we’re going to explain step-by-step how to make it.

1. Using arrays to store book titles and descriptions

As shown in Figure 2, two arrays are used to store the book title (the name of the book picture) and the description. Here, we assume that we recommend three books: Brand, Conflict, and Law. Therefore, create an array to store the names of these three books and the corresponding descriptions of these three books. Moreover, the default will be to display the first book, so set the index to 0 in this app.

Figure 2 The code of array explanation

Next, we will first introduce how to use Segmented Control and Page Control, and then introduce the Swipe Gesture Recognizer to control the display of the image.

2. Segmented Control and Page Control

After adding Segmented Control and Page Control, using @IBOutlet to connect Segmented Control and Page Control to the front of viewDidLoad() function respectively, and name them segIndex and pageCon variable separately.

Then, connect the Segmented Control and Page Control to the back of the viewDidLoad() function in the program code ViewController respectively to be two functions (named as segChange and pageChange) as depicted in Figure 3.

When the user changes the choice of Segmented Control, the “segChange” function will be triggered. By accessing the “selectedSegmentIndex” attribute, we’ll retrieve the index of the user’s new selection.

Similarly, when the user switches between options in the Page Control, it activates the “pageChange” function. The index of the selected choice will be acquired by using the “currentPage” attribute. Then, the “changeBook” function will be invoked to display the book cover corresponding to that index on the ImageView.

Figure 3 The code of Segmented Control and Page Control functions

Figure 4 illustrates the content of the “changeBook” function, it first changes the image of ImageView according to the current index. Next, change the title and description of the book subsequently. In order to synchronize the changes to the Segmented Control and Page Control, its index is set to the current index position respectively.

Figure 4 The code of the changeBook function

3. Add two Swipe Gesture Recognizer

Figure 5 indicates that the Swipe Gesture Recognizer can be found directly in the Library. Typically, we want to be able to swipe the ImageView to the Right and the Left. Hence, two Swipe Gesture Recognizers are needly added, and set “Swipe” attribute to be Right and Left respectively.

Figure 5 Swipe Gesture Recognizer UI elements

Note that adding Swipe Gesture Recognizers directly to the component where gestures are to be added can reduce other settings. Then, connect both Swipe Gesture Recognizers to the back of the viewDidLoad() function in the program code ViewController and name “rightGesture” and “leftGesture” separately. The code of both functions is shown in Figure 6.

Figure 6 The code of both rightGesture and leftGesture function

Finally, the Book Recommendation APP is done!

The home page of the Book Recommendation App is shown in Figure 7.

Figure 7 The home page of the Book Recommendation App

If you have any questions or recommendations, feel free to comment below.