Make a Banner Ad In UITableView Cell(Swift 5)
It’s very common to see banner ad in apps, especially in business apps. So I think it’s a good topic for me to practice. Let’s see the demo first:
There’re two ways to make the banner, the first one is UICollectionView, and the second one is UIScrollView + UIPageView. And in this article, I’ll show you how to make a banner ad by UIScrollView + UIPageView.
What I’ve learned from this practice:
- More familiar with UIScrollView & UIPageControl
- How to synchronize the pages & dots
- Scroll the UITableView doesn’t influence the banner
Let’s get started!
First of all, we need several pictures to display in our banner ad, so just put them in the Assets.xcassets file. I named the pictures from 0 to 9, because it will be more convenient to add them to UIScrollView, I’ll explain later.
Next, let’s create a UITableView in our code. The reason why I register 2 cells is because the first one is for banner ad, and the other one is for anything else you’d like to display on the screen.
Ok, then let’s put our main characters(UIScrollView & UIPageView) in the cell. But before we do that, we need to declare an identifier for our UITableView to register. And then, we need to create an array to store the images which we’re going to put in UIScrollView.
Since we use a for-in loop to append the images to the array, it’s better to set the frame at the same time, because the x coordinate of each image should be the screen width multiply the index in the array. That’s why I named the pictures from 0 to 9, and it is exactly what we want.
Then just set the detail for UIScrollView & UIPageControl. For setting the content size of UIScrollView, it should be the screen width multiply the number of pictures(line 31), and remember to add the pictures into UIScrollView.(line 35)
Now, we can go to ViewController to set the final part. First, I create an Enum to distinguish which section we’d like to control. And I also need an array as same as the one we set in View, because we’ll need it to set our TableViewController functions.
Let’s set the UITableView delegate and dataSource equal to self, and implement the functions. Instead of numbers, our code would be clearer and more readable if we use Enum to separate the sections.
In cellForRowAt function, remember to set the array which we just declared is equal to the one we set in UITableViewCell. And also set UIScrollView’s delegate equal to self.
Now, if you run the app, you’ll see that your UIScrollView and UIPageControl appear in your cell, but the height is not what we want. Therefore, we need to set the height for each section.
Your app should be like this now:
Alright, there’re a couple of things we need to do. When I swipe the UIScrollView, I want the dot move to the correct spot. And when I click the dot, I want it to move forward, and the UIScrollView will go to the correct page.
To achieve that, we need to set 2 more variables. The xOffset is the x coordinate for UIScrollView, and the currentPage is for the dot of UIPageView. And the xOffset will be changed once the currentPage is changed.
We also need 2 functions to know if the user is swiping left or right. If the user swipe left, then the dot should move forward. So every time the user trigger this function, the currentPage will plus 1. And it will become 0 once it is greater than the last index in our bannerViews. The concept is same for swipeRight, but it is opposite.
Then just go to cellForRow, and set the UIPageControl’s currentPage and the UIScrollView’s xOffset equal to the currentPage and xOffset which we just declared.
Finally, in order to detect the user is swiping left or right, we need to use scrollViewDidEndDecelerating function. The translatedPoint.x is basically a positive number or a negative number. When the user swipe left, the translatedPoint.x will be negative, and it will be positive if the user swipe right. So just put the correct function in the right place.
Now, when you swipe your UIScrollView, the dot should be able to move to the correct place. You may be confused because there’s no reaction when you click the UIPageControl, that’s because we haven’t done that yet. So, let’s add a function for our UIPageControl.
It’s pretty easy actually, when I click the dot of UIPageControl, I want it to go forward, so just put the swipeLeft() in the pageControlDidTap().
Everything should be ok for now. So it’s time to set timer to let it scroll by itself automatically!
First, let’s create a timer, and it will be triggered every 3 seconds. Because I want it to move forward, so the function of the timer would be swipedLeft(). Please remember to put setTimer() in the ViewDidLoad and don forget to add @objc in front of swipedLeft(), or we couldn’t build and run the app.
Now, your app should be like the gif below. There’re few things we could improve:
- Add animation
- Stop the timer when we touch the UIScrollView or UIPageControl
We can call invalidate() to stop the timer, so just put this function in anywhere we’d like to stop it. In this case, I’ll call this function when I click the UIPageControl, and when I drag the UIScrollView.
Don’t forget to restart the timer once the user stop dragging(line 124).
Okay, then let’s add animation to our code. When the x coordinate of UIScrollView is changed, we want it has animation effect. So just put the code we set UIScrollView’s x offset equal to self.xOffset in the UIView’s animate function.
Now, you may think everything is fine, but you’ll find that your banner ad will be affected when you scroll the UITableview. That’s because your UITableView and your UIScrollView share the same scrollView. So how to solve this problem?
Just determine if the scrollView is UITableView or not. If it is, then don’t do anything. The code will be like below.
Here is my Github for this project:
I hope this article will be helpful for someone who wants to learn more about UIScrollView & UIPageControl. If there’s any comment, please leave your massage. Thanks!