Create a vertically aligned image-text button for iOS using Swift

Michael T. Ho
Jul 7, 2019 · 3 min read

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.

Image for post
Image for post
Vertically aligned buttons

To give an outline of what I am going to cover, I list the topics of code explanation below.

  1. Declaration and Initializers
  2. View arrangement using AutoLayout
  3. Handle UI control event and animations
  4. 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

Before we get started, if you would like to make your button have ripple visual effect as Material Design (shown above), download and import this into your project.

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.

pod 'MaterialDesignWidgets'

If you have further questions, please feel free to send me an email or leave a comment below.

The Startup

Medium's largest active publication, followed by +754K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store