Today I want to explain how to redirect actions to another UI elements in storyboard. I know lately SwiftUI is being more popular than UIKit but still when we create an iOS project we might need to support older versions. That’s why I want to show you a little trick that I used in a project I worked on lately.
Let’s begin to learn then…
First we create a new Single View Project and add the images that we need to the Assets folder.
Then we get back to Main.storyboard and start to edit the View Controller. Simply we are changing the background color of the view inside view controller with what color we want and adding a new UITableView component. After setting the constraints of the tableview and the background color as clear color, first step is done.
Now we can get to ViewController.swift file. First we add a prototype cell to the tableview and in ViewController.swift, we implement datasource and delegate methods as extension. Actually I prefer to implement those as an extension but you can also create a class or just simply inherit the UITableViewDataSource and UITableViewDelegate classes in the view controller to achieve this.
Anyway we will use 20 of UITableViewCell for this example. That’s why we return 20 in the numberOfRowsInSection method. And lastly we need to set datasource and delegate to the tableview inside viewDidLoad override method.
Now if we run the project, we should see this result.
At this moment I realize that we didn’t set the bottom constraint to the superview. That’s why we see that the safe area on the bottom is in pink now. So, in order to solve this issue, we get back to the Main.storyboard and after selecting the tableview component on the right of the screen we change the bottom constraint by simply double clicking on it. And the first item should be Superview instead of Safe Area.Bottom.
After solving this issue we can continue from where we left off. First I want to use a view for the top area and I want to set the height of it to 200. And inside of it I want to add a UIButton and make it center. Remember that we added some images at the beginning of the project. Now that’s the time to use them. In selected state we use ic_pause and in enabled state we need to use ic_play.
Now if we run the project again we should see this.
That looks almost right. When we scroll down a little bit we can see the button is there but if we release our finger it will stay under the tableview. Ok that’s not a problem, we will solve this in a minute. Just we need to add some padding from the top. In order to do that we will set contentInset to the tableview. Remember that we set height of the view to 200? We will set the top inset to 200 again.
And now everything looks better.
Now we can set the button click method to change the state of it in order to change button image.
Ok it seems fine but if we try to click on the button, we see that the method won't be triggered. Because we add the view under the tableview and it would catch all of the touch events even though we see the button on the screen.
So here’s the magic.
We will add an extension to UITableView and override the point method. By doing this we can easily catch every touch of the tableview. So when we look at the parameters of this method, we can see that this method provides us the point. Hmm 🤔 That might be useful. Remember we added contentInset to the tableview? Because of it while we see the button on the screen y origin of the scroll will always be negative. So if we return false from this method it would redirect that touch event to the component under the tableview right?
Gotcha. Guess we achieved what we want. Now let’s take a look at the result.
This is a really good solution for those of you who come across with this kind of problem. But still if you have a better solution for this just comment me and let’s make this solution great together. 😊
Github link for the project: http://github.com/girginkagan/RedirectActions
Have a nice day.
MAY THE CODE BE WITH YOU
Top comments (0)