Idea is to have a stack view of button aligned horizontally or vertically as per specification.

Follow below steps:

  1. Construct mainStackview for UIImageButton
  2. rootStackView contains series of buttons. ( like $,$$, $$$, etc.. )
  3. Pin both mainStackView & rootStackView inside the UIView to establish corner radius functionality.
  4. Have key variables like widthConstraint, buttonsAreHidden ,updateButtonImage. These variables values will be altered during expanding /unexpanding the buttons via didSet

performAnimation is called when button is toggled, this method performs below functionalities

Hides the rootStackView

update the button image to dotted_filled

hiding the sub layers left borders while animation is happening

update the width Constraint

remove constraints if any

Complete source code available in Github

Any feedback is really appreciated. Happy Coding. !!

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