Create a vertically aligned image-text button for iOS using Swift
In iOS UI development, we sometimes need a vertically-aligned button in our user interface for several reasons. It could be because of limited visual space, or just as required by the UX design. However, some iOS developers, the same as the author, find it difficult to create a vertically aligned button with the built-in UIKit.
After searching on the internet, the author still can’t find the one that fits the need. Therefore, I decided to create my own, as shown below is the output of this post.
This post is intended for intermediate level Swift developers who create UI for their app programmatically without using storyboard.
To give an outline of what I am going to cover, I list the topics of code explanation below.
- Declaration and Initializers
- View arrangement using AutoLayout
- Handle UI control event and animations
- Use in UIViewController
For those who want to use this widget directly in the app, just copy the source code as well as the code of material design effect. Then skip to Topic 4 for the tutorial of how to use it in UIViewController. Here’s the link to the demo project on Github.
Declaration and Initializers
Including the RippleLayer.swift file, you can follow the code below to declare the parameters required by vertically-aligned button.
The default setup is good for now, so there is no need to change the parameters. The setupLayer() method is unused yet, we will cover that in view initialization later. So far, you have the Material Design layer added to your button, which is the background view of the button. What about the foreground view? As I mentioned, our vertically-aligned button is going to have an image view and a title label as the content of the button. Thus, we have to declare them and add them to the view hierarchy of the MaterialVerticalButton.
Inside the class, declare an UIImageView and an UILabel and update the initializer to add them to the view hierarchy. Besides, include the setupLayer() method in defaultSetup() as well.
At this point, all required views are added to the MaterialVerticalButton class, let’s move forward to the next step — view arrangement.
View arrangement using AutoLayout
View arrangement is the key of this vertically-aligned button. We need to use layout constraints to arrange the image and the text in the button. In our design, we want the imageView to be in square shape, and to be on top of the label. Consequently, we put these two widgets into the square-shaped button.
You can find below is the implementation of what we mentioned above.
We set the left and right margins of both imageView and label to be 10% of the width of the vertically-aligned button. Besides, the top margin of the imageView as well as the bottom margin of the label are set to be 3% of the entire button height. The gap between imageView and label is 5% of the button height.
Note: The margin we use above is actually the padding of the entire vertically-aligned button. You can read more about the explantation of margin and padding here if you’re interested.
Handle UI control event and animations
In order to enable Material Design effects, you have to override UIControl functions and call the touch functions in RippleLayer.swift inside those touch functions. The following code shows how to call those functions inside UIControl functions.
Hooray! You’re all set. As you include all the code above and build the it successfully, you’re good to go!
Use in UIViewController
You can now follow the code block below to use it in your UIViewController. We use a stackView to arrange three vertically-aligned button horizontally and make the height of the stackView to be 10% of height of the main view in UIViewController.
If you need more details of the source code, you can take a look at the Github repo here. In addition, this widget is included in the Material Design Widgets package, which is available for download by Cocoapods.
If you have further questions, please feel free to send me an email or leave a comment below.