Recently I needed custom UI control for iOS that had rounded corners and a gradient background. To
make the user experience as rich as possible I wanted the background of the control to flatten when
the user tapped it. There were plenty of examples of gradient buttons and rounded corner views but
nothing did exactly what I needed.
After a bit of experimentation I found the easiest solution was to add a gradient layer to a custom
UIControl and swap it with a different layer when the control became highlighted.
The first step was to was to create a custom UIControl class and add a gradient background layer:
Next we need to add a UIView to our main view in Interface Builder and set the class property to
our new custom GradientControl:
Now if we run it in the simulator we can see our new shiny rounded gradient control:
Although this new component responds to events and triggers any actions that you assign it doesn’t
give any visual feedback to taps. This can be solved by creating a second gradient layer and
swapping the layers when the highlight value changes: